Las sintaxis de color
| Sintaxis | Ejemplo | Notas |
|---|---|---|
| Hex | #1F4FE0, #1F4FE080 | Dos dígitos hex por canal; 8 dígitos añaden alfa. #RGB es la forma corta de #RRGGBB. |
| rgb() | rgb(31 79 224 / 50%) | 0–255 por canal. La sintaxis moderna usa espacios y una barra para el alfa; la forma con comas sigue funcionando. |
| hsl() | hsl(225 76% 50%) | Tono en grados, saturación y luminosidad en porcentaje. Fácil de ajustar a mano, pero valores iguales de luminosidad no se ven igual de claros. |
| hwb() | hwb(225 12% 12%) | Tono, blancura, negrura: como mezcla un pintor. |
| oklch() | oklch(0.51 0.22 266) | Luminosidad perceptual 0–1, croma, tono. Cambiar L en la misma cantidad se ve como el mismo cambio en cualquier tono, lo que lo convierte en el espacio adecuado para paletas. |
| oklab() | oklab(0.51 0.01 -0.22) | La forma cartesiana de OKLCH. |
| Con nombre | rebeccapurple | 148 nombres de CSS Color Level 4. |
Contraste
WCAG 2 define el contraste como (L₁ + 0,05) / (L₂ + 0,05) a partir de la luminancia relativa, de 1:1 (idénticos) a 21:1 (negro sobre blanco). El texto normal necesita 4,5:1 para AA y 7:1 para AAA; el texto grande (18 pt o 14 pt en negrita) y los componentes de interfaz como bordes e iconos necesitan 3:1. El comprobador muestra los cuatro veredictos e intercambia los dos colores para mostrar que la relación es simétrica.
Por qué OKLCH
En HSL, un amarillo y un azul con la misma «luminosidad» difieren enormemente en lo claros que parecen, así que las paletas construidas en HSL tienen pasos desiguales. OKLCH se diseñó para que diferencias numéricas iguales se vean iguales. Lo admite todo navegador actual, y color-mix() y la sintaxis de color relativo funcionan en él. El conversor marca los colores OKLCH fuera del gamut sRGB, ya que la herramienta los recorta.
Preguntas
¿Cómo convierto hex a RGB a mano?
Divide los seis dígitos en pares y convierte cada uno desde hex: #1F4FE0 → 1F = 31, 4F = 79, E0 = 224 → rgb(31, 79, 224). El hex de tres dígitos duplica cada dígito (#F80 = #FF8800).
¿Qué relación de contraste necesito?
4,5:1 para texto normal y 3:1 para texto grande o componentes de interfaz en WCAG AA; 7:1 y 4,5:1 para AAA. El texto de marcador de posición y los controles desactivados están exentos, pero aun así merece la pena comprobarlos.
¿Por qué la misma luminosidad hsl() se ve distinta en tonos distintos?
HSL es una transformación geométrica de RGB sin modelo perceptual; el amarillo puro (hsl 60 100% 50%) es mucho más claro que el azul puro (hsl 240 100% 50%) con el mismo L. Usa OKLCH si necesitas pasos visualmente uniformes.
¿Qué es el canal alfa?
La opacidad, de 0 (transparente) a 1 (opaco), escrita tras una barra en la sintaxis moderna o como cuarto valor en rgba(). Aquí el contraste se calcula sobre el color opaco; el texto semitransparente sobre un fondo necesita el resultado mezclado.