Novo Livro!
Categorias
Ferramentas
Projetos
Cor

Escala de cores OKLCH

Escolha a cor base: a ferramenta gera os tons de 50 a 950 com luminosidade uniforme em OKLCH, mostra o contraste de cada um e entrega as custom properties.

Funciona em todos os navegadores atuais Ver no Baseline

Ajuste

Vira --blue-500. Letras, números e hífen.

97%
26%
Formato do código

Veja

  1. 50 Aa 19,2:1 oklch(96.84% 0.0153 252.61)
  2. 100 Aa 15,5:1 oklch(89.94% 0.0373 262.88)
  3. 200 Aa 12,4:1 oklch(82.87% 0.0631 262.88)
  4. 300 Aa 9,7:1 oklch(75.81% 0.0949 262.88)
  5. 400 Aa 7,4:1 oklch(68.74% 0.1313 262.88)
  6. 500 Aa 5,6:1 oklch(61.68% 0.1716 262.88)
  7. 600 base Aa 5,2:1 oklch(54.61% 0.2152 262.88)
  8. 700 Aa 7:1 oklch(47.46% 0.1946 262.88)
  9. 800 Aa 9,4:1 oklch(40.31% 0.1645 262.88)
  10. 900 Aa 12,5:1 oklch(33.15% 0.1293 262.88)
  11. 950 Aa 15,7:1 oklch(26% 0.0904 262.88)

Copie o código

CSS 
:root {
  --blue-50: oklch(96.84% 0.0153 252.61);
  --blue-100: oklch(89.94% 0.0373 262.88);
  --blue-200: oklch(82.87% 0.0631 262.88);
  --blue-300: oklch(75.81% 0.0949 262.88);
  --blue-400: oklch(68.74% 0.1313 262.88);
  --blue-500: oklch(61.68% 0.1716 262.88);
  --blue-600: oklch(54.61% 0.2152 262.88);
  --blue-700: oklch(47.46% 0.1946 262.88);
  --blue-800: oklch(40.31% 0.1645 262.88);
  --blue-900: oklch(33.15% 0.1293 262.88);
  --blue-950: oklch(26% 0.0904 262.88);
}

O problema

Montar a escala de uma cor, do fundo quase branco ao texto quase preto, costumava ser no olho. Clarear e escurecer em HSL muda a claridade percebida de um jeito diferente em cada matiz: com o mesmo L, o amarelo parece muito mais claro que o azul, e a escala sai torta.

O defeito aparece no contraste. O tom 600 de uma cor passa no AA com texto branco, o 600 de outra não, e cada componente precisa de um ajuste à mão.

Como funciona

Em OKLCH, a luminosidade (L) acompanha a percepção. A escala mantém o matiz (H) da cor base e distribui L em passos iguais entre a ponta clara e a escura:

oklch(L C H): L em passos iguais, H fixo

A cor base entra sem alteração no tom de luminosidade mais próxima; os tons acima dividem o caminho até a ponta clara, e os de baixo, até a escura.

O croma (C) diminui em direção às pontas. Tons quase brancos com o croma da base parecem neon, e quase pretos parecem tinta; escalas feitas à mão também fazem isso. Quando um tom ainda não cabe no sRGB, o croma cai mais um pouco pelo mapeamento de gamut do CSS Color 4.

Cada tom mostra o texto, branco ou preto, que mais contrasta com ele, e a razão do WCAG 2. Isso ajuda a escolher os pares de fundo e texto dos componentes.

Quando usar

  • Tokens de cor de um design system: fundos, bordas, textos e estados a partir da cor da marca.
  • Variações de hover, foco e seleção que mantêm o mesmo matiz.
  • Tema escuro, invertendo a escala: o 900 vira fundo e o 100 vira texto.
  • Trocar os lighten() e darken() do Sass por valores fixos e previsíveis.

Leia no blog

Outras ferramentas

Cor

Conversor de cores CSS

Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.

 Cor

Gerador de gradientes CSS

Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.

 Cor

Gerador de sombras CSS

Monte uma box-shadow em camadas, tingida com o tom do fundo, e leve a cor numa custom property pronta para trocar.