Convertidor de colores
Convierte un color entre HEX, RGB, HSL, HSV y CMYK, y comprueba si dos colores tienen suficiente contraste para que un texto se lea bien.
Funciona completamente en tu navegador
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Nombre CSS
Comprobador de contraste
Relación de contraste –
| Uso | Requiere | Resultado |
|---|---|---|
| Texto normal, AA | 4,5:1 | |
| Texto normal, AAA | 7:1 | |
| Texto grande, AA | 3:1 | |
| Texto grande, AAA | 4,5:1 | |
| Íconos y partes de la interfaz, AA | 3:1 |
Lee HEX (3, 4, 6 u 8 dígitos), rgb(), hsl(), hsv(), cmyk() y nombres de color CSS; el resto de la sintaxis de color CSS la lee tu navegador cuando puede. HSL, HSV y CMYK se muestran con un decimal.
Cómo convertir un color
- Escribe o pega un color en cualquier formato común, como
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)onavy, o elige uno con el selector de color. - Copia de la lista el formato que necesites. Los valores se actualizan mientras escribes.
- En Comprobador de contraste, ingresa un color de texto y un color de fondo para ver su relación de contraste y si cumplen WCAG AA y AAA.
Formatos de color y contraste
Un convertidor de colores pasa de un formato a otro sin cambiar el color. HEX y RGB describen un color de pantalla como cantidades de rojo, verde y azul de 0 a 255; HEX simplemente escribe cada cantidad como dos dígitos hexadecimales, con un tercer par opcional para la opacidad. HSL y HSV describen los mismos colores por su tono (un ángulo en el círculo cromático), su saturación y su luminosidad o valor, lo que facilita elegir una versión más clara o más apagada de un color. Son coordenadas distintas para los mismos colores sRGB, así que la conversión entre ellas es exacta salvo por el redondeo.
CMYK es diferente: describe tinta, y la conversión real depende del proceso de impresión. La cifra que se muestra es la fórmula simple (el negro es 1 menos el canal más brillante, y las demás tintas completan el resto), útil para trabajos aproximados, pero no sustituye a un perfil de impresión.
El comprobador de contraste aplica la fórmula de contraste de WCAG 2, la que se usa en las auditorías de accesibilidad y en las herramientas para desarrolladores de los navegadores. Solo mide el contraste de luminancia, así que no puede avisarte de combinaciones problemáticas para el daltonismo, como rojo sobre verde, y las fuentes muy delgadas o pequeñas pueden necesitar más contraste que el mínimo.
Consejos
- ¿Necesitas el color de un píxel en una foto o captura de pantalla? Usa el Selector de color de imagen.
- ¿Haces un código QR con los colores de tu marca? El Generador de códigos QR te avisa cuando el contraste es demasiado bajo para escanearlo.
- ¿Conviertes números hexadecimales que no son colores? Prueba el Conversor de bases numéricas.
Preguntas frecuentes
¿El valor CMYK sirve para imprimir?
Solo de forma aproximada. El CMYK de aquí es la fórmula simple que convierte el RGB de pantalla sin un perfil de color, que es lo que usan la mayoría de los convertidores online. Las imprentas trabajan con tintas y papeles concretos, descritos por un perfil ICC, así que para trabajos de impresión convierte en un programa de diseño con el perfil que te dé tu imprenta.
¿Cómo se calcula la relación de contraste?
Con la fórmula de WCAG 2: la luminancia relativa de cada color se calcula a partir de sus valores sRGB, y la relación es (más claro + 0,05) dividido entre (más oscuro + 0,05). Va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). El texto actual de WCAG usa un umbral de 0,04045 en la fórmula; las versiones anteriores decían 0,03928, lo que da el mismo resultado para todos los colores de 8 bits.
¿Qué relaciones exigen AA y AAA?
El texto normal necesita 4,5:1 para AA y 7:1 para AAA. El texto grande, es decir, al menos 24 px normal o unos 18,7 px en negrita, necesita 3:1 para AA y 4,5:1 para AAA. Los íconos, los bordes de los campos y otras partes de la interfaz necesitan 3:1 (WCAG 1.4.11). La relación no se redondea hacia arriba: 4,49:1 no cumple AA para texto normal.
¿Qué pasa con los colores transparentes?
Un color de texto parcialmente transparente se mezcla primero con el fondo, como lo muestra una pantalla, y se mide el color resultante. Se supone que un fondo parcialmente transparente está sobre blanco. Después de mezclar, los canales se redondean a números enteros, como los mostraría una pantalla.
¿Por qué los valores HSL cambian un poco al convertir de vuelta?
Los colores de pantalla tienen 256 niveles por canal, así que la mayoría de los valores HSL y HSV no caen exactamente en uno de ellos. El convertidor mantiene toda la precisión internamente y solo redondea para mostrar: HEX y RGB a números enteros, y HSL, HSV y CMYK a un decimal.
¿Conoce los nombres de color CSS?
Sí, los 148 colores con nombre de CSS, como rebeccapurple y cornflowerblue. Escribe un nombre para convertirlo; cuando un color coincide exactamente con un nombre, también se muestra el nombre. Algunos colores tienen dos nombres, como aqua y cyan.