Convertidor de colores
Un color entra, todas las notaciones salen, más tonos, sombras y contraste WCAG.
Entrada
Hex, rgb(), hsl(), hsv(), cmyk() o un nombre de color de CSS. En los porcentajes valen la coma y el punto.
Algunos valores estaban fuera de rango y se recortaron, como hace CSS.
Este color es translúcido. Hex, rgb(), hsl() y hsv() conservan el alfa; CMYK y la paleta no lo tienen, así que ahí se descarta.
En todas las notaciones
- HEX
- RGB
- HSL
- HSV
- CMYK
- Nombre
El CMYK sale de la fórmula simple, sin perfil de impresora; las tintas impresas se verán distintas.
Tonos, sombras y armonías
La luminosidad avanza en pasos iguales hacia el blanco y hacia el negro; el complementario está enfrente en el círculo cromático y los análogos a 30° a cada lado. Haz clic en una muestra para copiar su hex.
Más claros
Más oscuros
Complementario
Análogos
Comprobador de contraste
Escribe un color válido arriba y un segundo aquí para medir el contraste.
El primer color era translúcido y se fundió sobre el segundo antes de medir; el alfa del segundo color se ignora.
| Nivel WCAG | Mínimo | Resultado |
|---|---|---|
| AA, texto normal | 4.5:1 | – |
| AA, texto grande | 3:1 | – |
| AAA, texto normal | 7:1 | – |
| AAA, texto grande | 4.5:1 | – |
El texto grande tiene al menos 18 pt, o 14 pt en negrita (unos 24 px, o 18,7 px en negrita). La relación se juzga exacta y se muestra con dos decimales.
Herramientas relacionadas
-
Conversor de unidades
Escribe un valor, elige dos unidades y mira el resultado y toda la tabla. -
Texto a binario
Convierte texto y bytes en ambos sentidos con ASCII o UTF-8. -
Conversor de números romanos
Pasa de números a letras romanas y consulta el desglose. -
Convertidor de imágenes
Cambia el formato de tus imágenes, no sus dimensiones. -
Calculadora de relación de aspecto
Obtén la proporción exacta y calcula un nuevo ancho o alto. -
Normalizador de iconos SVG
Una cuadrícula común para iconos con márgenes distintos, sin convertirlos en píxeles.
Pega o escribe un color en la notación que tengas: un código hex con o sin #, rgb() o rgba(), hsl(), hsv(), cmyk() o uno de los 148 nombres de color de CSS. El convertidor lo muestra en las demás notaciones mientras escribes, y el selector nativo junto al campo se sincroniza en ambos sentidos. Debajo, tonos más claros y más oscuros, el complementario y dos análogos forman una paleta rápida, y el comprobador de contraste mide la relación WCAG frente a blanco, negro o cualquier otro color. Todo funciona en tu navegador; el color no se envía a ningún sitio.
Cómo se usa
- Escribe o pega un color: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) o dodgerblue.
- Léelo en las demás notaciones y copia la que necesites; Ctrl+Mayús+C copia el valor en el que estás.
- Arrastra el selector junto al campo para ajustar el color; el campo y todas las notaciones lo siguen.
- Elige blanco, negro u otro color en el comprobador de contraste y lee la relación con sus marcas de aprobado y suspenso.
Qué tiene en cuenta
- Acepta hex de 3, 4, 6 y 8 dígitos, rgb() con valores o porcentajes, hsl(), hsv() o hsb(), cmyk(), listas como 30, 144, 255 y los 148 nombres de color de CSS.
- Conserva el alfa en hex, rgb(), hsl() y hsv(); CMYK y la paleta no lo tienen, y una nota avisa cuando se descarta.
- Recorta los valores fuera de rango como hace CSS y lo indica; el tono da la vuelta al círculo.
- Entiende la coma decimal en porcentajes como 55,9% si la lista va separada por espacios o por coma y espacio.
- Muestra cada veredicto de contraste con palabra y símbolo, nunca solo con color.
Preguntas frecuentes
¿Qué diferencia hay entre HSL y HSV?
Ambos describen un color por tono, saturación y un tercer eje. En HSL es la luminosidad: 100 % es siempre blanco y 50 % es el tono puro a plena saturación. En HSV, también llamado HSB, es el valor o brillo: 100 % es el propio tono puro y el blanco se alcanza bajando la saturación. Los selectores de diseño suelen usar HSV, CSS usa HSL; el convertidor calcula ambos del mismo color.
¿Por qué el CMYK se ve distinto al imprimir?
El CMYK de aquí sale de la fórmula simple: el negro toma la parte más oscura del color y las otras tres tintas rellenan el resto, sin perfil ICC. La impresión real depende del papel, de las tintas y del perfil de la imprenta, cuyo programa convierte el color RGB a través de ese perfil, así que sus porcentajes serán distintos. Toma este CMYK como punto de partida, no como valores definitivos.
¿Qué relación de contraste necesita un texto?
WCAG 2 pide al menos 4,5:1 entre el texto normal y su fondo en el nivel AA y 3:1 para texto grande: 18 puntos o 14 puntos en negrita, unos 24 px o 18,7 px en negrita. El nivel AAA sube a 7:1 y 4,5:1. El comprobador calcula la relación con la luminancia relativa que define la norma y juzga el valor exacto: 4,4999 suspende aunque aparezca 4,50.
¿Se envía a algún sitio el color que escribo?
No. La lectura, la conversión y el cálculo del contraste ocurren en la propia página, así que nada sale de tu dispositivo y la página sigue funcionando sin conexión. El último color y el segundo color del comprobador se guardan solo en este navegador, y el color principal aparece en la barra de direcciones como ?c= para que un enlace copiado lo abra. Limpiar borra las dos cosas.
Actualizado el