Selector de Color
- Elige el color con el selector visual o escribe un valor en cualquiera de los formatos.
- Los cuatro formatos se muestran a la vez: HEX, RGB, HSL y oklch.
- Copia el formato que use tu proyecto.
HEX y RGB describen lo mismo de formas distintas: la intensidad de rojo, verde y azul. Son directos para la máquina y poco intuitivos para crear una paleta: no puedes mirar dos valores HEX y saber cuál es más claro.
HSL separa matiz, saturación y luminosidad. Eso hace predecibles las variaciones: el mismo matiz con distinta luminosidad da una escala de tonos.
oklch hace lo mismo, pero en un espacio perceptualmente uniforme. Esa es la diferencia que importa en la práctica.
En HSL, una luminosidad del 50% no significa el mismo brillo aparente en colores distintos. Un amarillo al 50% parece mucho más claro que un azul al 50%, porque el ojo humano es más sensible al verde y al amarillo.
La consecuencia práctica es conocida: una paleta construida variando la luminosidad en HSL sale visualmente irregular, y los degradados pasan por zonas grisáceas en el centro.
oklch lo corrige porque se construyó sobre un modelo de percepción humana. Una luminosidad igual en oklch significa un brillo aparente igual, sea cual sea el matiz. Las paletas quedan consistentes y los degradados limpios sin ajustes manuales.
Por eso oklch entró en las especificaciones de CSS y se está adoptando en los sistemas de diseño.
Ningún formato garantiza la legibilidad por sí solo. El texto necesita contraste suficiente con el fondo, y eso se mide con la razón de contraste, no con la diferencia entre los valores del color.
La referencia habitual exige una razón de al menos 4,5 a 1 en texto normal y 3 a 1 en texto grande.
Un riesgo frecuente: un color de marca bonito puede resultar ilegible como texto. En ese caso funciona mejor como fondo, borde o elemento gráfico que como color de lectura.
- Introduce el color en HEX o en RGB. La conversión es bidireccional e inmediata.
- La almohadilla es opcional en la entrada HEX.
- Formatos aceptados: #RGB de tres dígitos, #RGBA de cuatro, #RRGGBB de seis y #RRGGBBAA de ocho con canal alfa.
Son la misma información en notaciones distintas. Cada canal —rojo, verde y azul— va de 0 a 255, lo que cabe exactamente en dos dígitos hexadecimales.
Por eso #FF0000 y rgb(255, 0, 0) son idénticos: FF en hexadecimal es 255 en decimal.
La forma corta de tres dígitos es una abreviatura en la que cada dígito se duplica. #F00 pasa a #FF0000, y #ABC pasa a #AABBCC. Solo puede representar colores en los que los dos dígitos de cada canal coinciden: 4.096 combinaciones frente a los 16,7 millones de la forma completa.
Dos dígitos extra al final del HEX representan la opacidad, también de 0 a 255. #FF000080 es rojo con aproximadamente un 50% de opacidad.
En RGB, el alfa se expresa de 0 a 1 en la notación rgba(). La conversión entre ambas escalas divide entre 255, así que no todo valor tiene correspondencia exacta: 0,5 pasa a 128, que devuelve 0,5 redondeado.
La forma corta de cuatro dígitos sigue la misma regla de duplicación: #F008 equivale a #FF000088.
- HEX es más compacto y sigue siendo el formato dominante en hojas de estilo y herramientas de diseño.
- RGB permite manipular canales mediante variables CSS, útil para generar variaciones de opacidad a partir de un color base.
- HSL es más intuitivo para crear una paleta, porque separa matiz, saturación y luminosidad.
- oklch es el más reciente y trabaja en un espacio perceptualmente uniforme, lo que hace que los degradados y las variaciones de luminosidad resulten más naturales a la vista.
Preguntas frecuentes
HEX sigue siendo el más común y basta para colores fijos. Para generar variaciones de forma programática, oklch da resultados más predecibles que HSL.
Porque la luminosidad de HSL no coincide con el brillo percibido. El amarillo y el azul con la misma luminosidad se ven muy distintos. En oklch esa distorsión no existe.
Los navegadores actuales lo admiten. Para versiones antiguas, declara un color alternativo antes de la regla en oklch.
Mide la razón de contraste con el fondo. La referencia pide al menos 4,5 a 1 en texto normal. La diferencia entre los valores del color no lo indica.
No. Toda la conversión ocurre en tu navegador.
Ninguna en el resultado. La forma corta duplica cada dígito, así que #FFF equivale a #FFFFFF. Existe solo para colores en los que los dos dígitos de cada canal coinciden.
Añade dos dígitos al final, de 00 para totalmente transparente a FF para opaco. #00000080 es negro con cerca de la mitad de opacidad.
Porque las escalas son distintas: el alfa va de 0 a 1 en RGB y de 0 a 255 en HEX. 0,5 corresponde a 128, que en hexadecimal es 80.
No. #ff0000 y #FF0000 son el mismo color. La elección es solo de estilo de escritura.
No. La conversión ocurre en tu navegador.