Como usar
- Digite uma cor — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — ou escolha uma no seletor de cores.
- Copie da lista o formato que precisar.
- Defina uma cor de fundo para ver a taxa de contraste e os resultados WCAG AA/AAA.
- Clique em uma tonalidade da escala para usá-la.
Opções explicadas
- HEX / RGB
- Cores de tela como vermelho, verde e azul de 0 a 255. #rrggbbaa e rgb(… / 50%) adicionam transparência.
- HSL / HSV
- Matiz, saturação e luminosidade (ou valor). Prático para clarear ou escurecer uma cor à mão.
- OKLCH
- Um espaço de cor perceptual do CSS Color 4. Mudar a luminosidade mantém estáveis o matiz e a intensidade percebida, o que o torna ideal para paletas e temas escuros.
- CMYK
- Uma conversão simples, só para referência. As cores reais de impressão dependem do perfil de cor da impressora, então peça os valores exatos à gráfica.
- Taxa de contraste
- A WCAG 2.2 exige 4,5:1 para texto normal e 3:1 para texto grande (18 pt, ou 14 pt em negrito) no nível AA; 7:1 e 4,5:1 no nível AAA.
Exemplo
#0f766e é rgb(15 118 110), hsl(175 77% 26%) e oklch(51.1% 0.086 186.4). Sobre um fundo branco, sua razão de contraste é de cerca de 5,5:1, o que atende ao WCAG AA para todos os tamanhos de texto.
Cores comuns em todos os formatos
Cores nomeadas do CSS e seus valores. O CMYK aqui é uma conversão matemática simples; para impressão profissional, use os valores CMYK do perfil de cor da sua gráfica.
| Nome CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Qual formato usar
HEX é a forma mais curta de escrever uma cor em CSS e em ferramentas de design: dois dígitos hexadecimais para cada um entre vermelho, verde e azul.
RGB é a mesma informação em decimal, e rgb(255 0 0 / 50%) acrescenta transparência.
HSL descreve matiz, saturação e luminosidade, o que facilita criar tons mais claros ou mais escuros da mesma cor mudando apenas o último número.
OKLCH é um formato CSS mais novo em que passos iguais de luminosidade parecem igualmente diferentes ao olho — útil para paletas de cores acessíveis.
Perguntas frequentes
Qual é uma boa taxa de contraste para texto?
Pelo menos 4,5:1 para texto corrido (WCAG AA). Preto puro sobre branco dá 21:1; o cinza comum #767676 sobre branco dá 4,54:1, passando por pouco.
Por que o valor CMYK é diferente do Photoshop?
O Photoshop converte usando um perfil de cor ICC para uma impressora e um papel específicos. Esta ferramenta usa a fórmula matemática simples, que serve para estimativas, mas não para provas de impressão.
Qual a diferença entre HSL e OKLCH?
O HSL é um simples rearranjo do RGB, então um amarelo e um azul com a mesma luminosidade parecem muito diferentes em brilho. O OKLCH foi projetado para que a mesma luminosidade pareça igualmente clara ao olho.
Já posso usar OKLCH no CSS?
Sim. oklch() funciona em todos os principais navegadores atuais.
Privacidade
Esta ferramenta funciona inteiramente no seu navegador. Seus arquivos e textos são processados no seu dispositivo e nunca são enviados aos nossos servidores.