Escolhendo cores para a web: HEX, RGB, CSS

Como funciona

A entrada de cor nativa fornece um valor sRGB como uma sequência hexadecimal de seis dígitos. Os canais são analisados ​​em decimal para o trio RGB e a propriedade personalizada CSS é escrita na sintaxe exata que uma folha de estilo espera.

• Usa a entrada de cor nativa, portanto funciona com o conta-gotas do sistema onde o navegador suporta.

Por que isso importa

Uma paleta reside no Figma, CSS, emails e às vezes em uma tela. Cada etapa de tradução é uma chance de colar o formato errado, portanto, copiar HEX, RGB e uma propriedade personalizada juntos remove uma classe de erros evitáveis.

Um exemplo trabalhado

Escolher #635BFF produz rgb(99, 91, 255) e a propriedade personalizada CSS --color: #635BFF, que pode ser colocada em uma folha de estilo e referenciada em qualquer lugar, em vez de repetir o código hexadecimal.

Erros comuns

• Escolher cor e fundo separadamente sem verificar o contraste.
• Dependendo apenas do matiz para sinalizar o estado.
• Esquecendo as variantes de foco e foco.

Dicas práticas

Escolha primeiro a escala neutra e depois o sotaque. Uma única cor de destaque mais três neutros é mais fácil de manter consistente em temas claros e escuros do que uma paleta maior.

Como usar

1. Abra a ferramenta. Tudo roda na aba do seu navegador.
2. Cole ou digite sua entrada e escolha a ação necessária.
3. Verifique o resultado e copie-o com um clique.

Abra a ferramenta

Perguntas comuns