Seletor de cores
Encontre o código exato de qualquer cor, em todos os formatos.
Verificar contraste
- AA
- AA grande
- AAA
- AA
- AA grande
- AAA
Funciona no navegador. Nada do que você digita é enviado a lugar nenhum.
- 5 formatos de cor
- Verificação de contraste WCAG
- Suporte a opacidade
Como escolher uma cor
- Arraste no quadrado para ajustar saturação e brilho, depois mova o controle de matiz.
- Ou digite um código em qualquer formato: HEX, RGB, HSL, HSV ou CMYK.
- Copie o código que você precisa e confira o contraste abaixo.
Formatos de cor comparados
Cada linha abaixo descreve o mesmo laranja. Só a notação muda.
| Formato | Exemplo | Usado em |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, ferramentas de design |
| RGB | rgb(240, 138, 60) | CSS, editores de imagem |
| HSL | hsl(24, 84%, 59%) | CSS, mais fácil de ajustar a olho |
| HSV/HSB | hsv(24, 75%, 94%) | Seletores de apps de pintura e design |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Design de impressão e mistura de tinta |
Use HEX ou RGB para a web, HSL quando quiser ajustar o brilho ou a saturação de uma cor sem mudar a matiz, e CMYK como ponto de partida para impressão.
Níveis de contraste do WCAG
A verificação de contraste abaixo compara sua cor com branco sólido e preto sólido e avalia as duas nos níveis do WCAG 2.
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Texto grande significa cerca de 24 px, ou 19 px em negrito. A maioria dos sites só precisa passar no AA. O AAA é um padrão mais rígido, usado principalmente em sites de governo e acessibilidade.
Dicas para escolher cores acessíveis
- Mantenha a matiz fixa e diminua a luminosidade no HSL para obter um tom mais escuro da mesma cor para hover e estados ativos.
- Uma cor que passa no AA sobre branco pode falhar sobre um fundo colorido, então confira o contraste contra o fundo real da página, não só branco ou preto.
- O conta-gotas só funciona no Chrome e no Edge no computador. Firefox e Safari ainda não adicionaram a API EyeDropper.
- Peça uma prova impressa na gráfica antes de confiar em um valor CMYK para uma tiragem grande. Os mesmos números podem parecer diferentes em papel couché e sem revestimento.
Perguntas frequentes sobre Seletor de cores
Como pego o código de uma cor que está na minha tela?
No Chrome e no Edge no computador, clique em Pegar da tela e depois clique em qualquer ponto da tela. Outros navegadores ainda não oferecem isso, então tire um print e abra em um seletor de cor de imagem.
Qual é a diferença entre HEX, RGB e HSL?
Todos descrevem a mesma cor de formas diferentes. HEX e RGB dão as quantidades de vermelho, verde e azul (o HEX escreve isso em base 16), enquanto o HSL dá matiz, saturação e luminosidade, mais fácil de ajustar na mão.
Qual taxa de contraste um texto legível precisa ter?
O nível AA do WCAG pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande, o que significa cerca de 24 px, ou 19 px em negrito. O nível AAA sobe o texto normal para 7:1.
Os valores de CMYK são exatos?
São uma conversão matemática direta do RGB. As cores reais de impressão dependem da tinta, do papel e do perfil da impressora, então use como ponto de partida e confira uma prova impressa.
O que o controle de opacidade muda?
Ele define a transparência de 0 (invisível) a 100 (sólido). Abaixo de 100, o código HEX ganha dois dígitos a mais e o RGB vira rgba(). O contraste é calculado como a cor aparece em cada fundo.
Para que serve o HSV que o RGB não faz?
O HSV separa a matiz de uma cor de quanto ela parece brilhante e saturada, por isso os seletores de tinta e editores de foto dão um controle para matiz e outro para brilho, em vez de misturar vermelho, verde e azul a olho.
Consigo pegar uma cor Pantone aqui?
Não. O Pantone é um sistema de cores licenciado, ligado a tintas específicas, e não uma simples conversão matemática de RGB ou CMYK. Use o valor CMYK como ponto de partida e confirme a cor exata com a sua gráfica.