Qué formato de color usar
- HEX (
#2563eb): el más compacto y el que exportan Figma y casi todas las herramientas de diseño. Con 8 dígitos lleva transparencia:#2563eb80es el mismo azul al 50 %. - RGB (
rgb(37, 99, 235)): los mismos tres canales en decimal. Útil cuando necesitas la transparencia aparte, enrgba(). - HSL (
hsl(221, 83%, 53%)): tono, saturación y luminosidad. Es fácil de retocar a mano: para un tono más oscuro del mismo color, baja solo el último valor. - OKLCH (
oklch(54.6% 0.215 262.9)): luminosidad, croma y tono en un espacio perceptualmente uniforme. Dos colores con la misma L se ven igual de claros, cosa que en HSL no pasa.
Por qué OKLCH está de moda
En HSL, un amarillo y un azul con 50% de luminosidad no se parecen nada en claridad. En OKLCH sí, y eso
permite generar escalas de color coherentes (100, 200… 900) cambiando solo la L, y degradados sin la zona gris del
centro. Además puede describir colores más vivos que sRGB para las pantallas P3; cuando eso pasa, la herramienta te avisa
y muestra en HEX y RGB el más cercano representable. Todos los navegadores actuales entienden oklch().
Colores en las URLs de ximg.es
El generador de placeholders recibe el color de fondo y el del texto en la propia URL, en hexadecimal
sin almohadilla: /600x300/2563eb/fff. Admite 3, 4, 6 y 8 dígitos (los de 4 y 8 llevan transparencia en PNG,
WebP y AVIF), los atajos de 1 y 2 dígitos (c es cccccc) y los 148 nombres de CSS:
/600x300/tomato/white. La última fila del conversor te da la URL con el texto en blanco o negro, el que
mejor contraste haga.
Nombres de color CSS
CSS tiene 148 nombres, de aliceblue a yellowgreen. Si el color no tiene nombre propio, la
herramienta busca el más parecido a la vista (la distancia se mide en OKLab, no en RGB), algo práctico para nombrar
variables o para describir un color en una conversación.