Converta um código HEX em valores RGB
Introduza o código e os valores RGB aparecem enquanto escreve: #3B82F6 corresponde a rgb(59, 130, 246). O conversor lê códigos de três, quatro, seis e oito caracteres, por isso apanha também a opacidade escrita em #3B82F680. O seletor por baixo dos campos devolve os canais entre 0 e 255 ou entre 0 e 1.
Como se converte HEX para RGB?
Leia o código aos pares de caracteres e converta cada par de hexadecimal para decimal. O primeiro par é o canal vermelho, o segundo o verde e o terceiro o azul, e cada valor cabe entre 0 e 255. O código #3B82F6 separa-se em 3B, 82 e F6, o que dá rgb(59, 130, 246).
A fórmula: R, G e B são os pares consecutivos de caracteres do código lidos como números hexadecimais.
Um par calcula-se de cabeça, porque envolve apenas uma multiplicação e uma soma. Multiplique o primeiro carácter por dezasseis e some o segundo, sabendo que A vale 10, B vale 11 e F vale 15. Para o par 3B fica 3 × 16 + 11, ou seja, 59.
Alguns códigos aparecem com muito mais frequência do que os outros. O preto #000000 é rgb(0, 0, 0), o branco #FFFFFF é rgb(255, 255, 255) e o cinzento #808080 é rgb(128, 128, 128), exatamente metade de cada canal.
No sentido inverso o cálculo assenta no mesmo número, com uma diferença: divide o canal por dezasseis e escreve o resto como segundo carácter do par. Essa conta é feita pelo conversor RGB para HEX.
O que é um código HEX e o que é RGB?
O RGB descreve uma cor com três números, um para o canal vermelho, outro para o verde e outro para o azul, todos entre 0 e 255. O ecrã compõe a cor a partir de luz, por isso números mais altos dão um ponto mais claro e os três valores máximos dão branco[1].
O código HEX descreve a mesma cor de forma mais curta. O valor de um canal cabe exatamente em dois caracteres na base dezasseis, por isso a cor inteira ocupa seis caracteres depois do cardinal.
No trabalho do dia a dia as duas notações aparecem em sítios diferentes. O código HEX é o que lhe dá o Figma, o painel de cores do sistema de gestão de conteúdos e o manual de marca, porque é curto e fácil de passar adiante. Os valores RGB surgem onde a cor entra em contas: no contraste segundo as WCAG, na notação com transparência e nos motores 3D.
A especificação CSS Color Level 4 admite quatro comprimentos de código: três, quatro, seis ou oito caracteres[2]. A versão de três é uma abreviatura em que o navegador duplica cada carácter, por isso #123 significa o mesmo que #112233. As versões de quatro e oito acrescentam a opacidade no fim, em que 00 é transparência total e FF é opacidade total.
Ambas as formas descrevem a cor no espaço sRGB. A norma foi proposta em 1996 pela Hewlett-Packard e pela Microsoft, e o W3C adotou-a para HTML e CSS com a designação IEC 61966-2-1[3]. É por isso que o mesmo código dá a mesma cor em qualquer ecrã conforme.
Códigos HEX das cores nomeadas do CSS e os seus valores RGB
| Nome no CSS | Código HEX | Valores RGB |
|---|---|---|
| black | #000000 | 0, 0, 0 |
| white | #FFFFFF | 255, 255, 255 |
| red | #FF0000 | 255, 0, 0 |
| lime | #00FF00 | 0, 255, 0 |
| blue | #0000FF | 0, 0, 255 |
| yellow | #FFFF00 | 255, 255, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| fuchsia | #FF00FF | 255, 0, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| maroon | #800000 | 128, 0, 0 |
| olive | #808000 | 128, 128, 0 |
| green | #008000 | 0, 128, 0 |
| purple | #800080 | 128, 0, 128 |
| teal | #008080 | 0, 128, 128 |
| navy | #000080 | 0, 0, 128 |
| orange | #FFA500 | 255, 165, 0 |
| pink | #FFC0CB | 255, 192, 203 |
No CSS a palavra green designa a cor com metade do brilho no canal verde, ao passo que os 255 completos nesse canal têm o nome lime.
Códigos HEX de interface: valores RGB e notação 0–1
| Código HEX | Valores RGB | Notação 0–1 |
|---|---|---|
| #FAFAFA | 250, 250, 250 | 0.9804, 0.9804, 0.9804 |
| #F5F5F5 | 245, 245, 245 | 0.9608, 0.9608, 0.9608 |
| #333333 | 51, 51, 51 | 0.2, 0.2, 0.2 |
| #1A1A1A | 26, 26, 26 | 0.102, 0.102, 0.102 |
| #3B82F6 | 59, 130, 246 | 0.2314, 0.5098, 0.9647 |
| #EF4444 | 239, 68, 68 | 0.9373, 0.2667, 0.2667 |
| #EE3333 | 238, 51, 51 | 0.9333, 0.2, 0.2 |
| #22C55E | 34, 197, 94 | 0.1333, 0.7725, 0.3686 |
A notação fracionária nasce da divisão de cada canal por 255, por isso 128 dá 0.502 e 255 dá exatamente 1.
Que caracteres se acrescentam ao código HEX para a opacidade?
| Opacidade | Caracteres no código | Valor do canal | Opacidade exata |
|---|---|---|---|
| 100% | FF | 255 | 100% |
| 90% | E6 | 230 | 90,20% |
| 80% | CC | 204 | 80% |
| 75% | BF | 191 | 74,90% |
| 70% | B3 | 179 | 70,20% |
| 60% | 99 | 153 | 60% |
| 50% | 80 | 128 | 50,20% |
| 40% | 66 | 102 | 40% |
| 30% | 4D | 77 | 30,20% |
| 25% | 40 | 64 | 25,10% |
| 20% | 33 | 51 | 20% |
| 10% | 1A | 26 | 10,20% |
| 5% | 0D | 13 | 5,10% |
| 0% | 00 | 0 | 0% |
O canal de opacidade tem 256 níveis, tantos quantos cada canal de cor. Caem em percentagens redondas os valores de vinte em vinte, ou seja, 0, 20, 40, 60, 80 e 100. Os restantes pares ficam a duas décimas de ponto percentual do valor da primeira coluna e no ecrã não se distinguem dele.
Onde encontrar o código HEX no programa em que trabalha?
Cada um destes programas mostra o código do elemento selecionado, mas em sítios diferentes.
Figma
Selecione a camada e clique na amostra quadrada da secção Fill, no painel da direita. Abre-se o seletor de cor e, por baixo dos cursores de tom e de opacidade, há uma lista que alterna a notação entre Hex, RGB, HSB, HSL e CSS. Por predefinição o Figma mostra Hex.Photoshop
Faça duplo clique no quadrado de cor no fundo da barra de ferramentas. Na janela Seletor de cores o código está no campo assinalado com um cardinal, por baixo dos valores R, G e B.Canva
Selecione o elemento e clique na cor na barra superior. Por baixo das cores do documento, prima Adicionar uma nova cor: o campo com o cardinal é onde escreve ou lê o código de seis caracteres.Navegador
Clique no elemento com o botão direito e escolha Inspecionar. No painel de estilos, cada propriedade de cor tem uma pequena amostra, e clicar nela com a tecla Shift premida alterna a notação entre HEX, RGB e HSL.
Como converter HEX para RGB no Excel?
Ponha o código na célula A1 e escreva nas três células seguintes as fórmulas =HEXADEC(SEG.TEXTO(A1;2;2)), =HEXADEC(SEG.TEXTO(A1;4;2)) e =HEXADEC(SEG.TEXTO(A1;6;2)). Para o código #3B82F6 devolvem 59, 130 e 246.
A primeira destas funções lê um número hexadecimal[4] e a segunda recorta do código pares consecutivos de caracteres. A SEG.TEXTO pede a célula, a posição do primeiro carácter e quantos caracteres deve tirar, e como o código começa por um cardinal, os canais ficam nas posições 2, 4 e 6.
Copiando estas três células para baixo converte a coluna inteira de códigos. A versão portuguesa do Excel mantém os nomes HEXADEC e DECAHEX para as conversões entre bases e chama SEG.TEXTO à função que recorta texto.
Fontes
- RGB — Wikipédia
- CSS Color Module Level 4 — notação hexadecimal — W3C
- sRGB — Wikipédia
- HEXADEC — função do Excel — Microsoft Support
Todos os valores das tabelas foram calculados a partir das definições das unidades e verificados aritmeticamente antes da publicação. Os dados históricos e os nomes das unidades locais assentam nas fontes indicadas acima.
Última revisão do conteúdo: · escrito e verificado pela equipa Arteon
Perguntas frequentes sobre a conversão de HEX para RGB
#FFF e #FFFFFF são a mesma cor?
Sim. A notação de três caracteres duplica cada carácter, por isso #FFF expande para #FFFFFF e #38F para #3388FF[2]. Ambos dão exatamente os mesmos três números em RGB.
Que código HEX têm o branco e o preto?
O branco é #FFFFFF, ou seja, rgb(255, 255, 255), e o preto é #000000, ou seja, rgb(0, 0, 0). Na forma abreviada ficam #FFF e #000.
O que significa o cardinal antes do código?
O cardinal abre a notação hexadecimal e diz ao navegador que os caracteres seguintes são um código de cor. Por si só não tem valor nenhum, por isso o conversor aceita o código com ou sem ele.
Quantas cores se podem descrever com um código HEX?
Cada um dos três canais tem 256 níveis, o que dá 16 777 216 combinações[3]. O código de oito caracteres acrescenta a isso 256 níveis de opacidade.
Como se escreve a transparência num código HEX?
Acrescente dois caracteres de opacidade no fim: #3B82F680 é o mesmo azul com metade da opacidade. O conversor lê esse código e devolve o resultado na notação rgba(59, 130, 246, 0.5). Os pares para os valores redondos estão na tabela de opacidade desta página.
Qual é a diferença entre a notação 0–255 e a notação 0–1?
É a mesma cor em duas escalas. O CSS, o Figma e os programas de desenho contam o canal em bytes, de 0 a 255, enquanto o Unity, o three.js, o OpenGL e o matplotlib contam em frações, de 0 a 1. O seletor Notação dos canais RGB por baixo dos campos devolve o resultado na escala de que precisa.
Posso usar um código HEX num trabalho para impressão?
A máquina de impressão trabalha com quatro tintas, por isso o ficheiro de impressão descreve a cor em valores CMYK. Introduza os três números obtidos aqui no conversor RGB para CMYK e obtém as proporções de ciano, magenta, amarelo e preto.
Como verifico se a cor tem contraste suficiente?
As WCAG calculam o contraste a partir dos valores dos canais, por isso o trabalho começa por converter o código para RGB. O número final, com os limiares para texto, é dado pelo verificador de contraste de cores.
Ajude-nos a melhorar as nossas ferramentas
Tem uma ideia, encontrou um erro ou quer sugerir uma nova ferramenta? Escreva-nos – respondemos em 24 horas.