Tres notaciones para un mismo conjunto de números
HEX y RGB no son modelos de color distintos. Son los mismos tres números escritos en bases
distintas: #3498db es rgb(52, 152, 219) con cada canal deletreado en hexadecimal, dos dígitos
cada uno. Entre ellos no se convierte nada en ningún sentido significativo, solo se reformatea, que
es la razón por la que esa dirección concreta no puede perder precisión nunca.
HSL sí es una transformación real. Toma el cubo RGB y lo remapea a un cilindro, donde un color es un ángulo de tono en la rueda, una saturación que va del gris al vivo, y una luminosidad que va del negro pasando por el color puro hasta el blanco. La aritmética es exacta en los dos sentidos, pero la forma del espacio es genuinamente distinta, y esa diferencia es la razón por la que merece la pena tener HSL.
Las tres describen sRGB, así que nada de esto cambia el color que enseña tu pantalla. El alfa es el cuarto número, y es el único sitio donde las notaciones discrepan en la ortografía: el hexadecimal añade dos dígitos más, y RGB y HSL cambian a sus formas de cuatro argumentos.
HSL es la notación que merece la pena aprender
El hexadecimal es compacto y universal, y también es opaco al razonamiento humano. Dado #3498db,
hazlo un 20 por ciento más oscuro. No puedes, no sin hacer cuentas, porque los tres canales están
enredados y ahí dentro no hay ningún dígito que signifique “brillo”.
Conviértelo y la respuesta sale sola. #3498db es hsl(204, 70%, 53%). La luminosidad está ahí
mismo como un número que puedes mover. Bájala al 30 por ciento para un estado de hover que sigue
siendo reconociblemente el mismo azul. Súbela al 88 por ciento y tienes un tono de fondo para una caja
destacada. Mantén el tono y la saturación, mueve la luminosidad, y tienes una escala completa
construida a partir de un solo color de marca sin adivinar nada. Gira el tono 180 grados y tienes el
complementario; muévelo 30 grados a cada lado y tienes vecinos que no van a chocar.
Esta es también la razón por la que HSL es el formato natural para las propiedades personalizadas de CSS. Guarda el tono una vez, deriva la escala entera de él, y un cambio de marca se convierte en editar un número. Si lo que necesitas es un esquema completo en lugar de una escala, el generador de paletas de colores hace las armonías por ti.
Todas las sintaxis que aceptan las tres cajas
Los analizadores son deliberadamente generosos, porque los colores llegan pegados de donde sea que los tuviera el diseñador.
El hexadecimal admite las formas de tres, cuatro, seis y ocho dígitos, con o sin la almohadilla
delante, en cualquier mezcla de mayúsculas y minúsculas. Las formas cortas duplican cada dígito, así
que #f90 es exactamente #ff9900, no una aproximación.
El redondeo, los viajes de ida y vuelta, y el dígito que HSL pierde
Aquí está la parte honesta. HEX y RGB son intercambiables sin pérdida porque son la misma información en dos bases. HSL no lo es del todo: los valores que se muestran están redondeados a enteros, y hay más colores RGB distintos que combinaciones enteras de tono, saturación y luminosidad.
En la práctica eso significa que convertir a HSL, copiar esos enteros y volver a convertir puede devolverte un canal desplazado en una unidad. Es invisible a la vista y da igual para elegir colores, pero importa si estás comparando dos valores para ver si son idénticos: compáralos en hexadecimal o en RGB, nunca en HSL redondeado.
Cuándo un conversor es la herramienta equivocada
Convertir notaciones no dice nada sobre si un color funciona. Dos preguntas frecuentes quedan fuera de aquí a propósito.
Si lo que quieres saber es si un texto se lee sobre un fondo, eso es contraste, no conversión, y el comprobador de contraste calcula la relación y la compara con los umbrales de accesibilidad. Y si el color que persigues está dentro de una imagen y no en un campo de texto, el selector de color de imagen lo saca de los píxeles directamente en lugar de obligarte a adivinarlo a ojo.
Convertir un color
- Escribe o pega un color en cualquiera de las tres cajas. Las otras dos se actualizan mientras escribes.
- Ajusta la luminosidad o el tono en la caja HSL si lo que buscas es una variante y no una traducción.
- Copia la notación que necesites, o el bloque de propiedades personalizadas de CSS de debajo.
- Si el color lleva transparencia, usa la forma de ocho dígitos en hexadecimal o la de cuatro argumentos en RGB y HSL.
