Seletor de cores HEX: HEX, RGB, HSL, OKLCH, tons claros e escuros | We.Inc
Seletor de cores HEX grátis: escolha ou cole uma cor e receba os valores HEX, RGB, HSL e OKLCH, tons claros e escuros e a pontuação de contraste com branco e preto.
Seletor de cores HEX
Escolha uma cor ou cole qualquer valor HEX, RGB ou HSL para obter todos os formatos de que você precisa para design e código: HEX, RGB, HSL e OKLCH. Veja uma escala de tons claros e escuros e confira se um texto fica legível sobre ela, em branco e em preto.
Use o seletor de cores ou digite um valor como #4F98FB, rgb(79, 152, 251) ou hsl(215, 95%, 65%).
Copie qualquer formato com um clique. O OKLCH é o formato moderno de CSS que mantém a luminosidade consistente entre matizes.
Clique em qualquer tom claro ou escuro para torná-lo a cor atual.
Leia as taxas de contraste para decidir se o texto branco ou preto combina com essa cor.
Em botões, busque um contraste de pelo menos 4,5:1 entre o texto e a cor do botão.
Monte uma paleta a partir de uma cor da marca: um tom claro para fundos, a própria cor para botões e um tom escuro para estados de hover e texto.
As telas variam. Confira a cor da sua marca no celular e no notebook.
Perguntas frequentes
O que é um código de cor hex?
Um código de seis dígitos para uma cor na tela, escrito como # seguido de três pares de dígitos hexadecimais para vermelho, verde e azul. #FF0000 é vermelho puro; #000000 é preto; #FFFFFF é branco.
Qual é a diferença entre HEX, RGB e HSL?
Eles descrevem as mesmas cores de formas diferentes. HEX e RGB dão as quantidades de vermelho, verde e azul. HSL dá o matiz (o ângulo em um círculo cromático), a saturação e a luminosidade, o que é mais fácil de ajustar à mão.
O que é OKLCH e devo usar?
OKLCH é um formato de cor CSS mais novo, baseado em como as pessoas percebem as cores. Duas cores com o mesmo valor L parecem igualmente claras, o que facilita criar paletas consistentes. Todos os principais navegadores atuais são compatíveis.
Como o contraste é calculado?
Com a fórmula do WCAG 2: a luminância relativa da cor mais clara mais 0,05, dividida pela da cor mais escura mais 0,05. Para uma verificação completa entre duas cores, use o verificador de contraste de cores da We.Inc.
Como escolher uma cor de marca que funcione em um site
Uma cor de marca precisa cumprir várias funções: destacar-se nos botões, continuar legível atrás de texto branco e não cansar os olhos em uma página inteira. Azuis, verdes e vermelhos profundos de tom médio costumam dar conta das três. Cores muito claras (amarelo, rosa pastel) ficam bonitas em um logo, mas dão botões ruins, porque nem texto branco nem preto fica bem legível sobre elas sem ajustes.
O painel de contraste mostra isso na hora. Se o texto branco ficar abaixo de 4,5:1, use texto preto ou escolha um tom mais escuro da escala para os botões.
Tons claros, tons escuros e uma paleta simples
Tons claros misturam a sua cor com branco; tons escuros misturam com preto. Uma paleta prática de site precisa de poucos: um tom bem claro para fundos de seção, a cor principal para botões e links e um tom mais escuro para estados de hover. Acrescente cinzas neutros para texto e bordas e você tem um conjunto completo e consistente.
Para conferir um par específico de texto e fundo (por exemplo, texto cinza sobre um fundo colorido claro), use o verificador de contraste de cores, que avalia tanto o WCAG AA quanto o AAA.