Conversor de cores
Perguntas frequentes
As cores têm nomes de uso comum?
A especificação CSS define cerca de 140 cores nomeadas (como crimson, teal, coral, rebeccapurple, transparent). Você pode digitar qualquer um desses nomes para obter os valores HEX, RGB e HSL correspondentes.
Como checar o contraste entre texto e fundo num site?
O contraste entre texto e fundo é um requisito de acessibilidade (WCAG). Ao escolher uma dupla de cores, confira a diferença de luminosidade — o terceiro valor (L) em HSL.
A ferramenta suporta transparência (canal alfa)?
Sim. Ao inserir uma cor com transparência (como HEX de 8 dígitos #8f5aff80, rgba(143, 90, 255, 0.5) ou hsla(260, 100%, 68%, 0.5)), a ferramenta calcula valores exatos de HEXA, RGBA e HSLA. Os campos padrão HEX, RGB e HSL exibem a cor base sem transparência.
O que significam as letras em HSL?
H é o matiz (Hue) de 0 a 360 graus. S é a saturação em porcentagem. L é a luminosidade em porcentagem: 0% dá preto, 100% dá branco.
Os formatos CMYK, RAL ou Pantone são suportados?
Não. A ferramenta é voltada para telas e estilos CSS, convertendo entre HEX, RGB e HSL. Modelos de impressão (CMYK) e catálogos de tintas (RAL, Pantone) não são suportados.
O mesmo código HEX dá a mesma cor em telas diferentes?
O código é idêntico, mas a reprodução visual depende da calibração e do perfil de cores de cada monitor.
A ferramenta monta uma paleta pronta automaticamente?
A ferramenta converte uma cor individual. Para capturar uma cor exata de uma imagem, use o conta-gotas de cores.
Converta cores entre os formatos HEX, RGB, HSL e nomes de cores CSS. A ferramenta suporta transparência (HEXA, RGBA, HSLA) e permite copiar o código instantaneamente para estilos CSS. Digite o valor no campo «Cor» e clique em «Converter».
Formas de escrever uma cor
| Formato | Exemplo | Onde é usado |
|---|---|---|
| HEX | #3A7BD5 | CSS, layout de sites |
| RGB | rgb(58, 123, 213) | CSS, programação, trabalho com transparência (RGBA) |
| HSL | hsl(214, 64%, 53%) | Escolher tons de um mesmo matiz por claridade e saturação (HSLA) |
HEX, RGB e HSL descrevem cores na tela e se convertem entre si preservando os canais de cor originais. Para cores com canal alfa (transparência), a ferramenta calcula valores exatos de HEXA, RGBA e HSLA. Os campos padrão HEX, RGB e HSL exibem a cor base sem transparência.
Como escolher uma combinação de cores
A cor digitada é um ponto de partida, não uma paleta pronta. A abordagem clássica para combinações se baseia no círculo cromático:
- Combinação monocromática: um mesmo matiz, com claridade e saturação diferentes. Em HSL, basta mudar o segundo e o terceiro valor, deixando o primeiro (o matiz) intacto.
- Combinação de contraste: cores de lados opostos do círculo, para destaques e alta visibilidade.
- Combinação análoga: cores vizinhas no círculo, para uma paleta tranquila e homogênea.
Ferramenta relacionada
Se a cor de partida não precisa ser digitada na mão, mas sim obtida de uma imagem pronta ou de uma captura de tela, use o conta-gotas de cores: ele dá o HEX, RGB e HSL assim que você clica num pixel.