Que formato de cor usar
- HEX (
#2563eb): o máis compacto e o que exportan Figma e case todas as ferramentas de deseño. Con 8 díxitos leva transparencia:#2563eb80é o mesmo azul ao 50 %. - RGB (
rgb(37, 99, 235)): as mesmas tres canles en decimal. Útil cando precisas a transparencia á parte, enrgba(). - HSL (
hsl(221, 83%, 53%)): ton, saturación e luminosidade. É doado de retocar a man: para un ton máis escuro da mesma cor, baixa só o último valor. - OKLCH (
oklch(54.6% 0.215 262.9)): luminosidade, croma e ton nun espazo perceptualmente uniforme. Dúas cores coa mesma L vense igual de claras, cousa que en HSL non pasa.
Por que OKLCH está de moda
En HSL, un amarelo e un azul con 50% de luminosidade non se parecen nada en claridade. En OKLCH si, e iso
permite xerar escalas de cor coherentes (100, 200… 900) cambiando só a L, e degradados sen a zona gris do medio. Ademais
pode describir cores máis vivas ca sRGB para as pantallas P3; cando iso pasa, a ferramenta avísate e amosa en HEX e RGB a
máis próxima representable. Todos os navegadores actuais entenden oklch().
Cores nos URL de ximg.es
O xerador de placeholders recibe a cor de fondo e a do texto no propio URL, en hexadecimal sen
cancelo: /600x300/2563eb/fff. Admite 3, 4, 6 e 8 díxitos (os de 4 e 8 levan transparencia en PNG, WebP e
AVIF), os atallos de 1 e 2 díxitos (c é cccccc) e os 148 nomes de CSS:
/600x300/tomato/white. A última fila do conversor dáche o URL co texto en branco ou negro, o que mellor
contraste faga.
Nomes de cor CSS
CSS ten 148 nomes, de aliceblue a yellowgreen. Se a cor non ten nome propio, a ferramenta busca
o máis parecido á vista (a distancia mídese en OKLab, non en RGB), algo práctico para nomear variables ou para describir
unha cor nunha conversa.