Seletor de cores: hexagonal, RGB, HSL — e a verificação de contraste que pulei

Nossa marca laranja é #E99537. eu gosto. Está quente, não é a mesma laranja que todos os outros, e fica ao lado do nosso azul sem lutar.

Eu usei como cor de link em branco por meses.

Então eu realmente corri os números. #E99537 em #FFFFFF fornece uma relação de contraste de 2.38:1. WCAG 2.1 SC 1.4.3 Requer 4,5:1 para texto normal. Isso nem mesmo limpa a barra 3:1 para grande texto. Cada link laranja naquele site era, pelo padrão que EU alegava se importar, ilegível - e tinha parecido perfeitamente bem para mim, no meu monitor, no meu escritório, com os meus olhos.

É o que acontece com a cor: sua percepção não é uma medida. #E99537 Na nossa marinha #0F172A pontuações 7,50:1, confortavelmente AAA. Mesma cor, veredicto completamente diferente e nenhuma quantidade de olhos apertados teria me dito. Você tem que computar.

o seletor de cores No Toolz.dev converte entre hex, RGB e HSL e mostra a taxa de contraste, no navegador, sem upload. Este guia é o que eu gostaria de ler antes de enviar esses links.

tl;dr: usar bruxa Para valores estáticos, HSL sempre que precisar derivar uma cor (estados de foco, paletas, modo escuro) porque a leveza é um número do qual você pode subtrair e RGB/HSLA quando você precisa de alfa. O contraste é 4,5:1 para corpo de texto e 3:1 para texto grande - verifique, don' t globo ocular. seletor de cores Faz as conversões e a proporção. Em seguida, faça suas paradas no gerador de gradiente.

Hex, RGB, HSL: Qual é a diferença real?

Todos eles descrevem as mesmas cores sRGB. O que difere é quais perguntas cada um facilita a resposta.

bruxa

Três bytes em hexadecimal. #4466EE é vermelho 44 (68), verde 66 (102), azul EE (238). taquigrafia #RGB funciona apenas quando cada par é duplicado - #FF0000 Recolher para #F00, mas #4466EE não pode ser reduzido. O formulário de 8 dígitos adiciona alfa: #4466EE80 é aproximadamente 50% opaco.

É o padrão em CSS porque é compacto e inequívoco. Também é completamente opaco para a leitura humana, e é por isso que nunca olhei para um código hexadecimal e sabia o que mudar para torná-lo um pouco menos saturado.

RGB

Mesmos três canais, decimais, 0–255. A sintaxe moderna do CSS Color 4 elimina as vírgulas: rgb(68 102 238 / 80%). RGB é o que você deseja em JavaScript, Canvas e WebGL, porque é o formato que tudo o que o downstream realmente consome e você pode fazer aritmética nele.

HSL - aquele que ganha o seu lugar

Matiz (0–360° ao redor da roda), saturação (0–100%), leveza (0–100%). #4466EE é hsl(228, 83%, 60%).

Aqui está o porquê disso. O estado de foco do botão deve ser "da mesma cor, um pouco mais escura". Em hexagonal, essa é uma pergunta irrespondível. Na HSL, é subtração:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

Quatro estados, uma tonalidade, nenhuma ferramenta de design. É 90% do motivo pelo qual o HSL está no meu kit de ferramentas.

O problema - e é & #39; é real - é que a leveza HSL é não perceptivo. hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (Azul) Ambos reivindicam 50% de leveza, e um deles queimará suas retinas enquanto o outro é quase preto. Esse é o problema que o Oklch resolve.

Oklch, brevemente

Nível de cor 4 do CSS traz oklch(L C H), onde L está percebido leveza. Duas cores com o mesmo L realmente parecem igualmente brilhantes. É a ferramenta certa para gerar uma rampa tonal onde cada degrau parece uniformemente espaçado, e é o que usaria para um novo sistema de design hoje. É também por que linear-gradient(in oklch, blue, yellow) não & #39; fique cinza no meio - veja o Guia do gerador de gradiente CSS.

cmyk

Imprimir somente. CSS não tem CMYK. Se um guia de marca lhe entregar valores CMYK, alguém terá que convertê-los em sRGB, e a conversão é aproximada porque as gamas diferem genuinamente - há cianos que uma impressora pode atingir e seu monitor pode & #39; t, e vice-versa Obter ambos Valores definidos no guia da marca em vez de converter um para o outro e esperar.

Como faço para converter entre eles?

Hex → RGB é apenas uma conversão básica. #4466EE → Dividir em 44, 66, EE → 68, 102, 238.

RGB → HSL envolve encontrar canais máximos/min, derivando a leveza de sua média, depois saturação e matiz a partir daí. São quinze linhas de código, e escrevi essas quinze linhas de memória exatamente zero vezes. Para um único, o seletor de cores faz isso instantaneamente. Para código:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

E aquele que realmente importa - luminância relativa e taxa de contraste, direto do Definição WCAG:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

Observe os coeficientes verdes: 0,2126 vermelho, 0,7152 verde, 0,0722 azul. O verde carrega aproximadamente Setenta por cento de brilho percebido. É por isso que um verde brilhante e um azul brilhante na idêntica leveza HSL não se parecem com nada, e é a razão pela qual existem espaços de cores perceptivas.

Quais taxas de contraste eu realmente tenho que atingir?

Alguns números reais, todos calculados em vez de adivinhados:

Duas coisas caem dessa mesa.

#767676 É o cinza mais claro que passa AA no branco. não #888, não #999. Cada cor que eu vejo na natureza é uma ou duas sombras. Vale a pena memorizar.

A cor da mesma marca pode passar e falhar dependendo de onde você a colocou. Nossa laranja é inutilizável como um link em branco e excelente como um acento na marinha. Isso não é uma falha na cor; é uma restrição sobre onde a cor pode viver. Depois de enquadrar dessa maneira, a decisão de design ficou mais fácil, não mais difícil.

Como faço para construir uma paleta que não se enfrente?

Escolha uma tonalidade. Variar leveza. Esse é o método inteiro e o HSL o torna mecânico:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

Observe que a saturação cai ligeiramente na extremidade escura. Manter a saturação constante enquanto a leveza cai produz etapas que parecem cada vez mais ásperas e neon - uma pequena dessaturação na parte inferior é o que faz uma rampa parecer projetada em vez de gerada.

Em seguida, nomeie as coisas por função, não pela aparência, então um rebrand é uma mudança de linha em vez de um local de achado e substituído em quarenta arquivos:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

O modo escuro não é uma inversão

Não inverta sua paleta. Duas coisas quebram imediatamente:

1. As cores saturadas ficam mais altas em fundos escuros. Um azul vívido que se lê como "profissional" em branco lê como "vibração" em quase preto. Levante a leveza, solte um pouco a saturação.
2. Fundos pretos puros causam halation- texto brilhante ligado #000 Manchas para pessoas com astigmatismo. Use um azul cinza-escuro muito escuro (#0F172A, #111827) em vez disso. Também oferece um lugar para superfícies elevadas, o que não oferece.

esquemas de harmonia, honestamente

A regra que continuo voltando: Um primário, um sotaque, uma rampa cinza. Tudo além disso tem que justificar sua existência.

O que mais tropeça nas pessoas?

A cor sozinha nunca é suficiente

Cerca de 1 em 12 homens e 1 em 200 mulheres têm algum tipo de deficiência de visão de cores. Se o erro vermelho significa que o erro e o sucesso verde são seus somente Sinal, uma fatia significativa de seus usuários vê dois emblemas cinza idênticos. Adicione um ícone, adicione uma palavra. WCAG SC 1.4.1 é explícito sobre isso e custa um <span>.

O teste de um segundo: captura de tela da sua interface do usuário, desaturar-se e ver se ela ainda funciona. Se não, a cor está fazendo um trabalho de suporte de carga, não deve ser feito sozinho.

Os anéis de foco também precisam de contraste

Os indicadores de foco são componentes da interface do usuário e se enquadram na regra 3:1 contra adjacente cores - o que significa que um anel de foco deve contrastar tanto com o elemento que envolve quanto com a página atrás dele Um contorno azul sutil em um botão azul é uma falha comum e completamente invisível.

Design em cinza primeiro

Construa todo o layout em escala de cinza. Ele força a hierarquia a vir de tamanho, peso e espaçamento - que é onde a hierarquia deveria vem de. Adicione a cor por último, como ênfase. As interfaces construídas dessa maneira são acessíveis quase por acaso e sobrevivem ao modo escuro sem uma reescrita.

Usando o seletor de cores

1. abra o seletor de cores.
2. Arraste no espectro ou cole um valor conhecido no campo HEX, RGB ou HSL - os outros atualizam em etapas.
3. Observe o HSL. Esse é o seu formato de trabalho.
4. Gere a rampa segurando H e S e pisando em L.
5. Verifique todos os pares de texto/fundo em relação à linha 4.5:1 antes Ele entra em uma folha de estilo, não depois que um cliente envia um e-mail para você sobre isso.

Tudo é executado na sua aba Nada é carregado - você pode confirmar isso no painel Rede DevTools em cerca de dez segundos.

Perguntas frequentes

Qual é a diferença entre hexadecimal e RGB?

Nada, semanticamente - codificam os mesmos três canais sRGB, HEX escreve-os na base 16 (#4466EE), RGB em decimal (rgb(68 102 238)). O Hex é mais compacto e é a convenção CSS; RGB é mais fácil de calcular em JavaScript. Escolha por contexto, não por princípio.

Qual formato de cor devo usar no CSS?

Hex para valores estáticos que você está apenas transcrevendo. HSL sempre que precisar derivar uma cor - estados de pairar, estados desativados, uma rampa tonal, uma variante de modo escuro - porque a luminosidade é um número que você pode ajustar. HSLA ou RGBA quando você precisa de alfa. OKLCH se você & #39; estamos construindo um novo sistema de design e deseja etapas perceptivamente uniformes.

Como saber se minhas cores são acessíveis?

Calcule a taxa de contraste WCAG 2.1 AA precisa de 4.5:1 para texto normal, 3:1 para texto grande (18 pt, ou 14 pt negrito) e para componentes de UI Não julgue a olho nu - #E99537 Em branco parece bom e pontua 2,38:1. Verifique também se nenhuma informação é transmitida apenas por cores.

Qual é o cinza mais claro que posso usar para o texto em branco?

#767676, que pousa às 4h54min1s - pouco acima da linha AA de 4,5h1. #999999 é apenas 2,85:1 e falha. Se você quer AAA, #595959 Atinge exatamente 7,00:1.

Por que a leveza do HSL não corresponde ao brilho percebido?

Porque HSL é uma simples transformação matemática de RGB, não um modelo de visão humana O olho é muito mais sensível ao verde do que ao azul - a fórmula de luminância WCAG pesa verde em 0,7152 e azul em 0,0722 - então hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (Azul) Não se parecem em nada, apesar de ambos reivindicarem 50% de leveza. Oklch existe especificamente para corrigir isso.

Como faço para construir uma paleta de modo escuro?

Não inverta a luz. Construa uma segunda paleta: um fundo azul-acinzentado escuro em vez de preto puro (preto puro causa halação para leitores com astigmatismo), versões mais claras e um pouco menos saturadas de seus acentos e textos que são brancos em vez de #FFFFFF. Troque-os por propriedades personalizadas de CSS em prefers-color-scheme: dark.

Qual é a melhor cor para um botão de call-to-action?

Existe o & #39; t um. A evidência para o & quot; laranja converte best" é fina e principalmente folclore O que importa é que o CTA contrasta com tudo ao seu redor e que a mesma cor significa a mesma coisa em todos os lugares do site Se sua página é principalmente azul, um CTA laranja funciona - por causa do contraste, não o laranja.

Posso usar cores CMYK na web?

Não - CSS não tem notação CMYK, e as gamuts don' t mapeiam de forma limpa, portanto, qualquer conversão é uma aproximação Se você precisar de consistência de marca em toda a impressão e tela, defina ambos os valores no guia de marca desde o início, em vez de converter um no outro.

Como faço para converter uma cor hexagonal em RGB?

Divida o hexagonal de seis dígitos em três pares e leia cada par como um número de base 16 de 0 a 255. #4466EE torna-se rgb(68, 102, 238): 44 é 68, 66 é 102 e EE é 238. Uma abreviação de três dígitos, como #46E Expande primeiro dobrando cada dígito. O seletor de cores faz essa conversão instantaneamente, em ambas as direções.

O que é um código de cor hexadecimal?

Um código de cor hexagonal é uma representação de seis dígitos da base 16 de uma cor sRGB, usando dois dígitos cada para os canais vermelho, verde e azul após uma #. #FFFFFF é branco e #000000 é preto. Um sétimo e oitavo dígitos opcionais adicionam um canal alfa (opacidade), como #4466EE80.

Embrulhando

O trabalho em cores tem duas metades e a maioria de nós só faz a primeira Escolher uma paleta é a metade divertida e subjetiva. Verificá-lo - luminância, contraste, legibilidade daltônica, comportamento em modo escuro - é a metade disso e #39; é apenas aritmética, e é & #39; é a metade que decide se as pessoas podem realmente ler o que você construiu.

A aritmética não é difícil. é apenas algo que você tem que fazer, e não fiz, por meses, no meu próprio site, em uma cor que escolhi.

o seletor de cores Converte entre hexadecimal, RGB e HSL e oferece a taxa de contraste, gratuita e inteiramente no seu navegador. Emparelhe-o com o gerador de gradiente Para misturas que mantêm seu contraste de ponta a ponta, e veja o resto da prateleira no Guia de ferramentas de produtividade do desenvolvedor.