Conversor de cor
HEX, RGB, HSL e CMYK — mais a razão de contraste que decide a legibilidade.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
Cole ou digite acima para ver o resultado aqui.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Exemplo
Verde, amarelo e azul da bandeira em HEX, RGB, HSL e CMYK, com o contraste de cada um
Um designer monta a página da festa de 7 de Setembro da escola com os tons de verde, amarelo e azul mais usados para a bandeira do Brasil em telas. Ele cola os três, um por linha — #009c3b, #ffdf00 e #002776 — para saber em qual deles um texto branco ou preto dá para ler.
- Cada par do HEX é um número em base 16: 00, 9c e 3b viram 0, 156 e 59, ou seja, rgb(0, 156, 59).
- O HSL dá o matiz em graus no círculo das cores: o verde fica em 143°, o amarelo em 52° e o azul em 220°, os três com saturação de 100 %.
- A última linha de cada cor traz as razões de contraste WCAG sobre branco e sobre preto: 4,5:1 é o mínimo para texto corrido, 3:1 para texto grande ou em negrito.
| Cor | HEX | RGB | HSL | CMYK | Sobre branco | Sobre preto |
|---|---|---|---|---|---|---|
| Verde | #009c3b | rgb(0, 156, 59) | hsl(143, 100%, 31%) | 100%, 0%, 62%, 39% | 3,61:1 | 5,82:1 |
| Amarelo | #ffdf00 | rgb(255, 223, 0) | hsl(52, 100%, 50%) | 0%, 13%, 100%, 0% | 1,33:1 | 15,81:1 |
| Azul | #002776 | rgb(0, 39, 118) | hsl(220, 100%, 23%) | 100%, 67%, 0%, 54% | 13,53:1 | 1,55:1 |
Texto branco no azul (13,53:1) e preto no amarelo (15,81:1) passam com folga. No verde, o branco dá 3,61:1: serve para títulos grandes ou em negrito, não para texto corrido, em que o preto (5,82:1) passa dos 4,5:1. Amarelo sobre fundo branco (1,33:1) praticamente some.
Como funciona
- Cole uma cor: #3b5bdb, #fff, rgb(59 91 219), rgba(59, 91, 219, 0.5) ou hsl(228, 69%, 55%).
- Uma cor por linha para converter uma paleta inteira de uma vez.
- Leia as notações de volta e as duas razões de contraste embaixo.
- Copie o que precisar.
Perguntas frequentes
- Que notações ele lê?
- Hexadecimal de três, quatro, seis e oito dígitos, rgb() e rgba(), hsl() e hsla(), com valores separados por vírgula ou espaço e um alfa depois de uma barra. Cores nomeadas não são lidas.
- Como converter HEX para RGB de cabeça?
- Separe o HEX em três pares e converta cada um da base 16: #009c3b vira 00, 9c e 3b, ou seja, 0, 156 (9 × 16 + 12) e 59 (3 × 16 + 11). O HEX curto repete cada dígito: #fff é #ffffff, rgb(255, 255, 255).
- Para que servem os dois números de contraste?
- São as razões de contraste WCAG da sua cor contra branco e contra preto, que é o que decide se um texto por cima se lê. Os limites que vale guardar: 4,5:1 para texto corrido, 3:1 para texto grande ou em negrito, e 21:1 é preto sobre branco.
- E uma cor com transparência?
- rgba(0, 156, 59, 0.5) vira o HEX de oito dígitos #009c3b80, em que os dois últimos são a opacidade (80 em base 16 = 128 de 255). As razões de contraste levam a transparência em conta: “sobre branco” e o CMYK (marcado “sobre branco”) usam a cor por cima de um fundo branco, e “sobre preto”, por cima de um fundo preto.
- O CMYK é exato?
- Não, e nenhum navegador consegue ser. CMYK de verdade depende da máquina, da tinta e do papel, que é o que um perfil de cor descreve. Os números aqui são a conversão aritmética direta: boa para ter uma ideia, errada como instrução de gráfica.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você digitar fica no seu computador.