Conversor de cores
Perguntas frequentes
As cores têm nomes de uso comum?
Uma parte dos tons tem: no CSS há cerca de 140 (crimson, teal, coral), no sistema RAL os nomes estão ligados a números de um leque de tintas, e na Pantone, a um catálogo de impressão. O mesmo nome significa um tom diferente em cada sistema, então para passar uma cor com precisão entre um designer, a gráfica e o layout, é mais confiável usar o código do que o nome.
Como checar o contraste entre texto e fundo num site?
O contraste entre texto e fundo não é só uma questão estética, é também um requisito de acessibilidade: cores muito próximas em claridade são difíceis de ler para pessoas com visão reduzida e em telas sob sol forte. Ao escolher um par «texto e fundo», vale checar não só o matiz, mas também a diferença de claridade – o terceiro valor em HSL.
Por que uma cor parece diferente na tela e depois de impressa?
O RGB descreve a cor como a luz que uma tela emite, misturando raios vermelho, verde e azul. O CMYK descreve a cor como tinta no papel, que, ao contrário, absorve parte do espectro. A gama de cores disponível em RGB é mais ampla do que a que dá para conseguir fisicamente misturando tintas de impressão reais – por isso alguns tons vivos de tela simplesmente não têm equivalente exato na impressão, e o conversor mostra a aproximação mais próxima possível, não uma correspondência exata. Por isso, converter uma cor de RGB para CMYK sempre fica como aproximação, e o tom final no papel ainda depende da impressora e do tipo de papel.
O que significam as letras em HSL?
H é o matiz (hue), define a própria cor num círculo de 0 a 360 graus. S é a saturação, em porcentagem. L é a claridade, em porcentagem: 0% dá preto, 100% dá branco, independente dos dois primeiros valores.
Dá para digitar o nome de uma cor em vez de um código?
Um conjunto limitado de cores nomeadas (como red, white) é aceito pelo padrão CSS, mas para um resultado preciso e previsível é mais confiável digitar um código específico: HEX ou RGB.
O mesmo código HEX dá a mesma cor em editores gráficos diferentes?
O código é idêntico, mas a aparência real depende da calibração e do perfil de cor do monitor – em telas diferentes, o mesmo HEX pode parecer um pouco mais quente ou mais frio.
A ferramenta monta uma paleta pronta automaticamente?
Não, o formulário recebe e converte uma única cor: ele não monta automaticamente uma paleta de cores nomeadas pronta nem escolhe um par de contraste. Para pegar uma cor exata de uma imagem em vez de digitar o código na mão, ajuda o conta-gotas de cores.
Digite uma cor em qualquer formato: a ferramenta converte para os demais sistemas comuns, HEX, RGB, HSL, CMYK e outros. O campo aceita o valor assim que você digita.
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 |
| CMYK | 73%, 42%, 0%, 16% | Impressão, onde se misturam tintas e não luz |
HEX, RGB e HSL descrevem a luz de uma tela e se convertem entre si sem perdas. O CMYK funciona diferente: trata de tinta no papel, então converter de RGB para CMYK é sempre aproximado; a cor exata na impressão também depende da impressora, do papel e da calibração.
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.