Que formato de cor usar
- HEX (
#2563eb): o mais compacto e o que o Figma e quase todas as ferramentas de design exportam. Com 8 dígitos inclui transparência:#2563eb80é o mesmo azul a 50 %. - RGB (
rgb(37, 99, 235)): os mesmos três canais em decimal. Útil quando a transparência é necessária à parte, emrgba(). - HSL (
hsl(221, 83%, 53%)): tom, saturação e luminosidade. É fácil de ajustar à mão: para um tom mais escuro da mesma cor, basta baixar o último valor. - OKLCH (
oklch(54.6% 0.215 262.9)): luminosidade, croma e tom num espaço percetualmente uniforme. Duas cores com a mesma L parecem igualmente claras, o que em HSL não acontece.
Porque é que o OKLCH está na moda
Em HSL, um amarelo e um azul com 50% de luminosidade não se parecem nada em claridade. Em OKLCH sim, e isso
permite gerar escalas de cor coerentes (100, 200… 900) mudando apenas a L, e degradês sem a zona cinzenta ao meio. Além
disso, pode descrever cores mais vivas do que o sRGB para ecrãs P3; quando isso acontece, a ferramenta avisa e mostra
em HEX e RGB a cor representável mais próxima. Todos os navegadores atuais entendem oklch().
Cores nos URL do ximg.es
O gerador de placeholders recebe a cor de fundo e a do texto no próprio URL, em hexadecimal sem
cardinal: /600x300/2563eb/fff. Aceita 3, 4, 6 e 8 dígitos (os de 4 e 8 incluem transparência em PNG, WebP e
AVIF), os atalhos de 1 e 2 dígitos (c é cccccc) e os 148 nomes CSS:
/600x300/tomato/white. A última linha do conversor dá o URL com o texto a branco ou a preto, consoante o que
tiver melhor contraste.
Nomes de cor CSS
O CSS tem 148 nomes, de aliceblue a yellowgreen. Se a cor não tiver nome próprio, a ferramenta
procura o mais parecido à vista (a distância é medida em OKLab, não em RGB), o que é prático para dar nome a variáveis ou
descrever uma cor numa conversa.