Cómo se usa
- Introduce un color (#0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…)) o elige uno con el selector de color.
- Copia de la lista el formato que necesites.
- Pon un color de fondo para comprobar la relación de contraste y los resultados WCAG AA/AAA.
- Haz clic en un tono de la escala para usarlo.
Opciones explicadas
- HEX / RGB
- Colores de pantalla como rojo, verde y azul de 0 a 255. #rrggbbaa y rgb(… / 50%) añaden transparencia.
- HSL / HSV
- Tono, saturación y luminosidad (o valor). Práctico para aclarar u oscurecer un color a mano.
- OKLCH
- Un espacio de color perceptual de CSS Color 4. Al cambiar la luminosidad se mantienen el tono y la viveza percibida, lo que lo hace ideal para paletas y temas oscuros.
- CMYK
- Una conversión sencilla, solo como referencia. Los colores de impresión reales dependen del perfil de color de la imprenta, así que pídele a tu imprenta los valores exactos.
- Relación de contraste
- WCAG 2.2 exige 4,5:1 para texto normal y 3:1 para texto grande (18 pt, o 14 pt en negrita) en el nivel AA; 7:1 y 4,5:1 en AAA.
Ejemplo
#0f766e es rgb(15 118 110), hsl(175 77% 26%) y oklch(51.1% 0.086 186.4). Sobre fondo blanco, su relación de contraste es de aproximadamente 5,5:1, que cumple WCAG AA para todos los tamaños de texto.
Colores habituales en todos los formatos
Colores con nombre de CSS y sus valores. Aquí CMYK es una conversión matemática simple; para imprimir de forma profesional, usa los valores CMYK del perfil de color de tu impresora.
| Nombre CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Qué formato usar
HEX es la forma más corta de escribir un color en CSS y en las herramientas de diseño: dos dígitos hexadecimales para el rojo, otros dos para el verde y otros dos para el azul.
RGB es la misma información en decimal, y rgb(255 0 0 / 50%) añade transparencia.
HSL describe el matiz, la saturación y la luminosidad, lo que facilita crear tonos más claros u oscuros del mismo color cambiando solo el último número.
OKLCH es un formato de CSS más reciente en el que pasos iguales de luminosidad se ven igual de distintos a simple vista; resulta útil para paletas de colores accesibles.
Preguntas frecuentes
¿Cuál es una buena relación de contraste para el texto?
Al menos 4,5:1 para el texto principal (WCAG AA). El negro puro sobre blanco es 21:1; el gris #767676 tan habitual sobre blanco da 4,54:1, justo por encima del mínimo.
¿Por qué el valor CMYK no coincide con el de Photoshop?
Photoshop convierte mediante un perfil de color ICC para una imprenta y un papel concretos. Esta herramienta usa la fórmula matemática simple, válida para estimaciones pero no para pruebas de impresión.
¿Qué diferencia hay entre HSL y OKLCH?
HSL es una simple reorganización de RGB, así que un amarillo y un azul con la misma luminosidad se ven con un brillo muy distinto. OKLCH está diseñado para que la misma luminosidad se perciba igual de brillante.
¿Puedo usar OKLCH en CSS hoy?
Sí. oklch() funciona en todos los navegadores principales actuales.
Privacidad
Esta herramienta funciona por completo en tu navegador. Tus archivos y textos se procesan en tu dispositivo y nunca se suben a nuestros servidores.