Conversor de cor e verificador de contraste
Conversor HEX ↔ RGB ↔ HSL com verificador de contraste WCAG AA/AAA.
Carregando a ferramenta…
E agora?
Perguntas frequentes
Quais formatos ele converte entre?
HEX, RGB e HSL, em qualquer direção. Também relata a luminância relativa e taxa de contraste do par, então você pode avaliar legibilidade sem se mover para outra ferramenta.
Quando HSL é mais útil que HEX?
Sempre que você está ajustando em vez de especificando. HSL separa matiz de saturação e claridade, então tornar uma cor 10% mais clara é um número em vez de três não relacionados. HEX é compacto e universalmente compreendido; HSL é o que você quer enquanto projeta uma escala.
Converter HEX para HSL e voltar sempre retorna o mesmo valor?
Nem sempre. Componentes HSL são arredondados para números inteiros aqui, e o cubo sRGB não mapeia limpavelmente no cilindro HSL, então uma viagem de ida e volta pode cair um dígito distante. A diferença é imperceptível, mas significa que você deveria manter um formato canônico em seus tokens em vez de converter de um lado para o outro.
Por que a ferramenta mostra luminância também?
Porque claridade em HSL e brilho percebido não são a mesma coisa. Duas cores em L: 50% podem se parecer muito diferentes, já que a claridade HSL ignora quanto mais sensível o olho é ao verde do que ao azul. Luminância relativa aplica essa ponderação, e é por isso que ela — não a claridade HSL — é o que os padrões de acessibilidade usam.
Como a taxa de contraste é calculada?
(mais claro + 0,05) / (mais escuro + 0,05) nas luminâncias relativas, a definição WCAG. Se você está verificando uma cor de texto contra um fundo especificamente, o verificador de contraste relata os níveis de aprovação/reprovação ao lado.
Isso funciona com alfa ou hex de 8 dígitos?
Não — funciona com cores opacas. Uma cor com transparência não tem aparência fixa até ser composta sobre algo, então seu contraste depende do que está por trás.
E quanto a CMYK ou Pantone?
Não suportado, e o motivo importa: esses são sistemas de impressão ligados a tintas e mídia física. Converter uma cor de tela para CMYK de forma significativa precisa de um perfil de cor e uma imprensa alvo, que é um problema diferente da aritmética entre formatos de tela.
Minha entrada é enviada em algum lugar?
Não. Toda conversão acontece em seu navegador.
Mais ferramentas de Design
- Gerador de paleta de coresGere paletas harmonizadas: análoga, complementar, triádica, monocromática.
- Verificador de Contraste WCAGVerifique o contraste de cores conforme WCAG 2.2 AA/AAA — prévia ao vivo, razão exata e cor acessível sugerida automaticamente.
- Gerador de gradientes CSSCrie gradientes lineares, radiais e cônicos com quantas paradas de cor precisar. Copie o CSS com cor de reserva ou o valor arbitrário do Tailwind.
- Gerador de box-shadow CSSEmpilhe quantas camadas de sombra precisar e veja-as em fundo claro e escuro ao mesmo tempo. Copie o CSS ou o valor arbitrário do Tailwind.
- Gerador de clip-path CSSArraste os vértices de um polígono ou defina círculo, elipse ou inset, e copie a declaração clip-path. Doze formas prontas.
- Quadro branco onlineDesenhe diagramas e wireframes no navegador. Salvo apenas neste navegador, sem conta.