Sobre la herramienta: Conversor de colores
Las herramientas de diseño usan HEX, CSS usa RGB o HSL y la imprenta trabaja en CMYK. Escribas en el campo que escribas, el resto de formatos se actualiza al instante y puedes copiar el código CSS con transparencia (alfa).
La herramienta también calcula la relación de contraste entre el color del texto y el del fondo y muestra con insignias AA y AAA si se cumplen las pautas WCAG 2.1, en las que se basa la norma UNE-EN 301 549.
Cómo se usa
- Toca la muestra grande de arriba a la izquierda para elegir un color, o escribe un código en cualquiera de los campos HEX, RGB, HSL, HSV o CMYK.
- Mueve el control de opacidad para obtener el HEX de 8 dígitos y los códigos rgba y hsla.
- En Relación de contraste verás el contraste con blanco, negro y un color que elijas.
- Toca un color de la paleta Más claro · más oscuro para copiar su HEX, o copia todo el CSS al final.
Formatos de color
| Formato | Ejemplo | Qué significa |
|---|---|---|
| HEX | #4f46e5 | Rojo, verde y azul con dos dígitos hexadecimales cada uno; con 8 dígitos, los dos últimos indican la opacidad |
| RGB | rgb(79, 70, 229) | Cada canal de 0 a 255 |
| HSL | hsl(243, 75%, 59%) | Tono (0–360°), saturación y luminosidad; fácil de ajustar a mano |
| HSV (HSB) | hsv(243, 69%, 90%) | El modelo de los selectores de color de Photoshop y Figma |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Porcentaje de tintas para impresión |
Requisitos de contraste WCAG
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA (mínimo) | 4,5:1 o más | 3:1 o más |
| AAA (reforzado) | 7:1 o más | 4,5:1 o más |
Se considera texto grande el de al menos 18 pt (unos 24 px) o 14 pt en negrita (unos 18,66 px). Las webs del sector público deben cumplir el nivel AA, es decir, al menos 4,5:1 en el texto normal. La relación va de 1:1 (mismo color) a 21:1 (negro sobre blanco).
Preguntas frecuentes
¿Por qué los colores impresos se ven distintos que en pantalla?
La pantalla mezcla luz (RGB) y la impresora mezcla tintas (CMYK), así que cada una reproduce una gama distinta. El CMYK de esta herramienta sale de la fórmula de conversión simple y será diferente al calculado con un perfil como FOGRA39. Pide una prueba de color para impresiones importantes.
¿Qué es un código HEX de 8 dígitos?
Es el formato #RRGGBBAA, donde los dos últimos dígitos son la opacidad: 80 es aprox. el 50 %, CC el 80 % y FF el 100 % (opaco). Todos los navegadores actuales lo admiten.
¿Cómo se calcula el contraste de un color transparente?
Con transparencia, el color visible depende del fondo, así que la herramienta ignora la opacidad y calcula el contraste con el color sólido.
¿Puedo escribir nombres de colores?
Sí. Escribe en el campo HEX cualquiera de los 148 nombres de color CSS, como red, navy, skyblue o tomato.