Seletor de Cores Online: HEX, RGB e HSL
Este seletor de cores deixa você escolher um tom visualmente ou digitar um valor em qualquer formato e obter na hora a conversão para HEX, RGB, HSL e OKLCH, com botão de copiar em cada um. Roda no navegador, sem enviar nada.
Como usar o seletor de cores
- Escolha a cor no seletor visual nativo ou digite um valor em qualquer um dos campos (HEX, RGB, HSL ou OKLCH).
- Os demais formatos são recalculados automaticamente.
- Clique no botão de copiar ao lado do formato que você usa.
- Confira o preview para ver a cor aplicada.
Formatos de cor
| Formato | Notação | Quando usar |
|---|---|---|
| HEX | #RRGGBB (hexadecimal) |
o mais comum em CSS, design e planilhas |
| RGB | rgb(0-255, 0-255, 0-255) |
quando precisa manipular canais ou definir opacidade com rgba() (conversor HEX para RGBA) |
| HSL | hsl(0-360°, 0-100%, 0-100%) |
ajustar matiz, saturação e luminosidade de forma intuitiva |
| OKLCH | oklch(L C H) |
CSS moderno; alterações perceptualmente uniformes |
Tabela de cores comuns
| Cor | HEX | RGB |
|---|---|---|
| Branco | #FFFFFF |
rgb(255, 255, 255) |
| Preto | #000000 |
rgb(0, 0, 0) |
| Vermelho | #FF0000 |
rgb(255, 0, 0) |
| Verde | #00FF00 |
rgb(0, 255, 0) |
| Azul | #0000FF |
rgb(0, 0, 255) |
| Azul primário (blue-600) | #2563EB |
rgb(37, 99, 235) |
| Cinza-escuro (slate-900) | #0F172A |
rgb(15, 23, 42) |
| Cinza-médio (slate-500) | #64748B |
rgb(100, 116, 139) |
| Cinza-claro (slate-200) | #E2E8F0 |
rgb(226, 232, 240) |
Contraste e acessibilidade
Ao combinar texto e fundo, verifique a razão de contraste. A WCAG 2.1 nível AA exige:
- ≥ 4,5:1 para texto normal;
- ≥ 3:1 para texto grande (a partir de ~24px, ou ~18,66px em negrito) e componentes de interface.
Escolha a cor do texto e a do fundo aqui, anote os valores e confira a razão exata em um verificador de contraste antes de fechar a paleta.
Dicas
- A cor que você procura está em uma foto ou logotipo? Use o conta-gotas para pegar cor de imagem e traga o HEX para cá.
- Para entender a matemática de cada conversão entre espaços de cor, leia o guia de conversão de cores no CSS.
- Vai combinar duas ou mais cores em um degradê? Monte a transição no gerador de gradiente CSS e veja a sintaxe de cada tipo no guia como criar gradientes CSS.
- Precisa de valores aleatórios para outros fins (tokens, exemplos)? Veja o gerador de senhas.
- Gerando identificadores ou hashes para nomes de assets? Use o gerador de hash.