Como usar: Conversor de códigos de cores
- Clique em Escolher cor para selecionar uma cor ou cole um valor HEX, RGB ou HSL no campo Código da cor.
- Os valores em HEX, RGB, HSL, HSV e CMYK aparecem na tabela. Use o botão Copiar para levar qualquer um deles para a área de transferência.
- Na seção de contraste, veja se o texto branco ou o preto fica mais legível sobre essa cor.
- Na paleta abaixo, clique em um tom mais claro ou mais escuro da mesma cor para selecioná-lo na hora.
Como converter HEX para RGB
O código HEX #RRGGBB representa os valores de vermelho, verde e azul, cada um com dois dígitos hexadecimais (00 a FF, ou seja, 0 a 255 em decimal). Basta separar os dígitos de dois em dois e converter cada par para decimal para obter o RGB.
#FF8800 → FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0)
Para fazer o caminho inverso, de RGB para HEX, converta cada valor em dois dígitos hexadecimais e junte tudo. Como 37 → 25, 99 → 63 e 235 → EB, a cor rgb(37, 99, 235) corresponde a #2563EB. O HEX abreviado de 3 dígitos (#F80) equivale a repetir cada dígito: #FF8800. Se quiser entender melhor o cálculo em hexadecimal, use o conversor de bases numéricas.
Qual a diferença entre HSL, HSV e CMYK?
| Formato | Composição | Onde é mais usado |
|---|---|---|
| RGB / HEX | Intensidade das três cores primárias da luz (0 a 255) | Web e design de telas |
| HSL | Matiz (0 a 360°), saturação e luminosidade | CSS, quando você quer ajustar só a claridade |
| HSV (HSB) | Matiz, saturação e valor (brilho) | Seletores de cor de programas gráficos como Photoshop e GIMP |
| CMYK | Proporção das quatro tintas (ciano, magenta, amarelo e preto) | Material impresso |
Os valores CMYK são aproximações calculadas a partir do RGB por fórmula. A cor impressa de verdade depende do papel e do perfil de cor da impressora. Por isso, em impressos importantes (cartões de visita, embalagens, banners), confirme o padrão de cor com a gráfica.
Contraste mínimo de 4,5:1 e como escolher a cor do texto
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1) recomendam contraste de pelo menos 4,5:1 (nível AA) entre texto comum e fundo. Para texto grande (cerca de 24px ou mais, ou 18,66px ou mais em negrito), o mínimo é 3:1. Com 7:1 ou mais, a combinação atende ao nível AAA, que é mais rigoroso.
O contraste é calculado a partir da luminância relativa L das duas cores: (L da mais clara + 0,05) ÷ (L da mais escura + 0,05). O máximo possível é 21:1, entre branco e preto. Ao definir a cor de botões ou banners, escolha a cor de texto marcada como AA no resultado acima. Assim, a maioria das pessoas consegue ler com conforto.
Essas diretrizes são a base da acessibilidade digital em muitos países. No Brasil, servem de referência para o eMAG e a Lei Brasileira de Inclusão. Em Portugal e no resto da União Europeia, são a base da norma EN 301 549.
Como usar códigos de cor no CSS
Os valores convertidos podem ser colados direto no CSS. Os três formatos abaixo representam a mesma cor:
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
Para uma cor semitransparente, coloque a opacidade depois de uma barra, como em rgb(37 99 235 / 50%). Outra opção é acrescentar mais dois dígitos ao HEX, como em #2563EB80 (80 equivale a cerca de 50% de opacidade).