Conversor de códigos de cor
Converta entre HEX, RGB, HSL, HSV e CMYK e verifique o contraste do texto
Carregando a ferramenta…
Digite uma cor em qualquer um dos formatos HEX, RGB, HSL, HSV, CMYK, OKLCH ou nome CSS, e os outros formatos se atualizam na hora. Use-o para levar uma cor de um design para o CSS ou para conferir se um texto tem contraste suficiente com o fundo.
Como usar
- Escolha uma cor com “Escolher uma cor” ou digite um valor em um campo, como HEX ou RGB. Os outros campos acompanham; copie qualquer um deles com o botão ao lado.
- Ajuste a “Opacidade” para acrescentar transparência; o HEX passa a ter 8 dígitos e o RGB vira rgba.
- Selecione uma amostra em “Mais clara e mais escura” ou em “Harmonias de cores” para passar para essa cor.
- No “Verificador de contraste”, defina a “Cor do texto” e a “Cor de fundo” e veja a “Taxa de contraste” e os resultados AA e AAA.
Como funciona
- O HEX escreve os valores de vermelho, verde e azul (de 0 a 255) com dois dígitos hexadecimais cada. Por exemplo, rgb(255, 99, 71) é #FF6347.
- Taxa de contraste = (luminância relativa da cor mais clara + 0,05) ÷ (luminância relativa da cor mais escura + 0,05), avaliada pelos critérios de sucesso 1.4.3 e 1.4.6 da WCAG 2.2. A taxa é arredondada para baixo.
- O CMYK usa uma fórmula simples sem perfil de impressão, então a cor impressa de verdade será diferente. As cores recentes e a última cor ficam salvas neste dispositivo.
Perguntas frequentes
- Como converter HEX para RGB?
- Divida o código em pares e converta cada par de hexadecimal para decimal. #3B82F6 dá 3B = 59, 82 = 130 e F6 = 246, ou seja, rgb(59, 130, 246). Digite o código no campo HEX para ver na hora.
- Qual taxa de contraste o texto precisa ter?
- A WCAG AA exige 4,5:1 para texto normal e 3:1 para texto grande; a AAA exige 7:1 e 4,5:1. Texto grande tem pelo menos 24px, ou 18,66px em negrito.
- O que é um código HEX de 3 dígitos?
- Uma forma abreviada do código de 6 dígitos em que cada dígito é duplicado. #F80 é a mesma cor que #FF8800.
- Ele mostra o nome de uma cor?
- Se a cor corresponder a um dos 148 nomes de cores do CSS, esse nome é mostrado; caso contrário, aparecem o nome CSS mais próximo e o valor HEX dele.