Português
Como converter HEX para RGB (e vice-versa)
Este conversor de cores transforma um código HEX em RGB, HSL, HSV, CMYK e OKLCH enquanto você digita, e também funciona no sentido contrário: cole rgb(255, 99, 71) em qualquer campo e você recebe #FF6347. Todos os campos aceitam todos os formatos, então não é preciso procurar o campo certo.
Se quiser fazer na mão, um código HEX são só três números escritos em base 16. Pegue #3B82F6, separe em pares e converta cada par:
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
Ir de RGB para HEX é o caminho inverso. Divida cada canal por 16: o quociente é o primeiro dígito e o resto é o segundo. 255 dá 15 com resto 15, ou seja, FF. 99 dá 6 com resto 3, ou seja, 63. É por isso que o vermelho tomate, rgb(255, 99, 71), vira #FF6347.
Códigos de cores comuns em HEX, RGB e HSL
Vale a pena reconhecer estes de cara. Todos também são nomes de cor válidos em CSS, e a ferramenta mostra o nome mais próximo de qualquer cor que você digitar (#3B82F6 fica mais perto de dodgerblue, mas não é igual).
| Nome | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
Códigos HEX curtos, longos e com transparência
O HEX tem quatro tamanhos. Três dígitos é uma abreviação em que cada dígito é duplicado, então #F60 significa #FF6600. Seis dígitos é a forma normal. Oito dígitos acrescentam um canal alfa no final: #3B82F680 é o mesmo azul com 128 de 255, cerca de 50% de opacidade. Quatro dígitos é a versão curta disso. Os navegadores entendem os quatro há anos, mas alguns aplicativos de design e clientes de e-mail ainda só aceitam seis, então, na dúvida, cole o código de seis dígitos e ajuste a opacidade à parte.
Qual formato usar?
- HEX para tudo o que você cola numa ferramenta de design, num manual de marca ou num CMS. É curto e ninguém lê errado.
- RGB / RGBA quando você precisa de transparência em CSS mais antigo ou em código de canvas no JavaScript.
- HSL quando você quer ajustar uma cor pensando nela. Baixar o último número deixa a cor mais escura, baixar o do meio deixa mais acinzentada. Estados de hover ficam bem mais fáceis de escrever assim.
- OKLCH para novos design systems em CSS. O valor de luminosidade corresponde ao que o olho vê, então duas cores com o mesmo L parecem mesmo igualmente claras, coisa que o HSL não consegue (amarelo com 50% de luminosidade parece bem mais claro que azul com 50%).
- CMYK só como referência aproximada para impressão. Os números aqui vêm da fórmula simples, não de um perfil de impressora, então o folheto não vai sair idêntico à tela. Pergunte à gráfica qual perfil ela usa.
- HSV / HSB principalmente para bater com o seletor do Photoshop ou do Figma, que usam esse formato.
Verificador de contraste de cores: o que passa no WCAG?
O WCAG 2 compara o brilho relativo do texto e do fundo e expressa isso como uma razão de 1:1 (idênticos) a 21:1 (preto no branco). Os limites são fixos:
| Nível | Texto normal | Texto grande (24px, ou 18,66px em negrito) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Ícones, bordas de campos e contornos de foco precisam de 3:1 pelo WCAG 2.1. Veja como algumas cores reais se saem como texto sobre branco:
| Cor do texto sobre #FFFFFF | Razão | Resultado |
|---|---|---|
| #949494 | 3.03:1 | Só texto grande |
| #777777 | 4.48:1 | Reprova no AA para texto corrido, por pouco |
| #767676 | 4.54:1 | Passa no AA |
| #595959 | 7.00:1 | Passa no AAA |
| #3B82F6 | 3.68:1 | Só texto grande e botões |
| #008080 | 4.77:1 | Passa no AA |
A linha do #777777 é a pegadinha clássica. Ela parece idêntica ao #767676, e um verificador que mostra uma casa decimal vai exibir 4,5, mas a regra é "no mínimo 4,5" e 4,48 não chega lá. Esta ferramenta nunca arredonda para cima uma razão que reprova.
Quando uma cor reprova, o verificador procura o tom mais próximo com o mesmo matiz que passa. Para #3B82F6 sobre branco, ele sugere #1E6FF5 para AA (4,52:1) e #0950C5 para AAA (7,08:1). Toque em Usar para carregar a cor ou copie direto para a sua folha de estilos. Amarelos e laranjas vivos costumam precisar de um tom bem mais escuro antes de funcionar como texto sobre branco; nesses casos, deixe a cor viva para fundos e coloque texto escuro por cima.
Monte uma paleta e pegue cores de uma imagem
O painel de paleta cria uma escala de tons claros e escuros de 50 a 950 (a nomenclatura do Tailwind), além de conjuntos complementar, análogo, tríade, complementar dividido, quadrado e monocromático. Clique em qualquer amostra para copiar e depois exporte o conjunto inteiro como variáveis CSS, variáveis SCSS, JSON ou um bloco de cores do Tailwind, ou baixe uma faixa em PNG para colocar num slide ou mandar para um cliente.
Para reproduzir a cor de um logotipo ou de uma foto, carregue a imagem e toque no ponto desejado. Um único pixel num JPG pode estar alguns tons diferente do que você vê por causa do ruído de compressão, então, em fotos, mude para a média 3×3 ou 5×5. No Chrome e no Edge, o botão Pegar da tela captura uma cor de qualquer lugar da tela, inclusive de outras janelas. Nada é enviado; a imagem é lida no seu navegador.
Perguntas frequentes
Como converter HEX para RGB?
Divida os seis dígitos em três pares e converta cada par da base 16 para um número de 0 a 255. #3B82F6 vira 3B = 59, 82 = 130 e F6 = 246, então o valor RGB é rgb(59, 130, 246).
Como converter RGB para HEX?
Escreva cada canal como um número hexadecimal de dois dígitos e junte tudo depois de um #. rgb(255, 99, 71) dá FF, 63 e 47, então o código HEX é #FF6347, que é a cor CSS tomato.
Qual contraste preciso para passar no WCAG AA?
Texto normal precisa de pelo menos 4,5:1 e texto grande (24px, ou 18,66px em negrito) precisa de 3:1. O cinza #767676 sobre branco dá 4,54:1, o cinza mais claro que ainda passa para texto corrido.
O que significa um código hex de 8 dígitos?
Os dois últimos dígitos são o canal alfa (opacidade). #3B82F680 é o mesmo azul com opacidade de 128/255, cerca de 50%, o que em CSS é rgba(59, 130, 246, 0.5).
O que significa um código hex de 3 dígitos como #F60?
Cada dígito é duplicado, então #F60 é #FF6600. A forma curta só funciona quando os dois dígitos de cada par são iguais, e por isso #3B82F6 não tem versão de 3 dígitos.
O valor CMYK é preciso o bastante para impressão?
É um ponto de partida, não uma prova de impressão. A ferramenta usa a fórmula padrão, então #3B82F6 vira cmyk(76%, 47%, 0%, 4%), mas a mistura real de tinta depende do perfil de cor da impressora e do papel; peça os valores à sua gráfica.
Como pegar o código HEX de uma cor numa foto?
Carregue a imagem no painel acima e toque no ponto que quiser; a ferramenta lê aquele pixel. Em fotos, mude para a média 3×3 ou 5×5, porque um único pixel costuma ter mais ruído que a cor que você enxerga.
Qual é a diferença entre HSL e HSV?
Os dois começam com o mesmo matiz, mas no HSL a luminosidade 100% é sempre branco, enquanto no HSV o valor 100% é a versão mais brilhante da cor. Vermelho puro é hsl(0, 100%, 50%) e hsv(0, 100%, 100%).