É melhor HEX ou RGB?

Dão o mesmo resultado. O HEX é compacto para código, o RGB mais fácil de ler e ajustar, e o RGBA adiciona transparência.

O que significa #FFFFFF?

Os três canais no máximo (255, 255, 255), que é branco. #000000 são os três a zero — preto.

Como adiciono transparência?

Use rgba() com um valor alfa 0–1, ou um hex de oito dígitos (#RRGGBBAA) onde o último par define a opacidade.

HEX vs RGB: como ler e converter cores

Publicado a 17/09/2025 · 3 min de leitura · Ferramentas para programadores

Daniel Okonkwo — Programador front-end e redator de Tecnologia na Allin

Desempenho web · Formatos de ficheiro

Verificado a partir de 2 fontes

Ver perfil →

Em resumo

HEX e RGB descrevem as mesmas cores em notação diferente. O RGB lista vermelho, verde e azul como números 0–255, como rgb(255, 87, 51). O HEX escreve os mesmos valores em base 16, como #FF5733 — cada par de dígitos hex é um canal. Para converter, divida o hex em três pares e leia cada um como um número 0–255, ou escreva cada valor RGB como dois dígitos hex.

HEX e RGB são duas notações para as mesmas cores. Eis como ler cada uma, converter entre elas e adicionar transparência.

Mesma cor, duas notações

No ecrã, cada cor é uma mistura de luz vermelha, verde e azul. HEX e RGB apenas registam quanto de cada — descrevem cores idênticas, só com caligrafia diferente. O RGB lê-se e ajusta-se facilmente a olho; o HEX é compacto e cómodo de copiar-colar, por isso designers e código o usam. Converter entre eles não muda nada na cor.

Ler RGB

O RGB dá três números de 0 a 255, um por canal: rgb(255, 0, 0) é vermelho puro, rgb(0, 255, 0) verde, rgb(0, 0, 255) azul. Zero significa nada dessa luz, 255 o máximo. Misturando-os obtém-se qualquer outra cor — quantidades iguais dos três dão um cinzento, e os três a 255 dão branco.

Ler HEX

Uma cor HEX é um # seguido de seis dígitos, dois por canal, em base 16 onde os dígitos vão 0–9 e depois A–F (assim F é 15, e FF é 255). #FF5733 decompõe-se em FF vermelho, 57 verde, 33 azul — exatamente a cor de rgb(255, 87, 51). #FFFFFF é branco, #000000 preto, e uma forma curta de três dígitos como #F53 duplica cada dígito (assim #F53 = #FF5533).

Converter e adicionar alfa

Converter é só trocar a base de cada canal: 87 em base 10 é 57 em hex, e vice-versa. Para tornar uma cor translúcida, adicione um valor alfa (opacidade) — rgba(255, 87, 51, 0.5) é 50% transparente, ou um hex de oito dígitos #FF573380 faz o mesmo. Um conversor trata ambos os sentidos ao instante, poupando aritmética em base 16 à mão.

Conversor de coresConverte uma cor para HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, com o contraste.Experimentar a ferramenta →

Perguntas frequentes

É melhor HEX ou RGB?: Dão o mesmo resultado. O HEX é compacto para código, o RGB mais fácil de ler e ajustar, e o RGBA adiciona transparência.
O que significa #FFFFFF?: Os três canais no máximo (255, 255, 255), que é branco. #000000 são os três a zero — preto.
Como adiciono transparência?: Use rgba() com um valor alfa 0–1, ou um hex de oito dígitos (#RRGGBBAA) onde o último par define a opacidade.

Artigos que podem interessar-lhe

Todos os guias →

ExplicaçãoRácio de contraste: como a WCAG o calcula realmenteO rácio WCAG é (L1 + 0,05) ÷ (L2 + 0,05), e L é a luminância relativa, não o brilho. O verde carrega 71,52 % e o azul 7,22 %, razão pela qual o azul puro sobre branco passa com 8,59:1 enquanto o cinzento médio falha com 3,95:1. Eis o cálculo inteiro, corrido de ponta a ponta.ExplicaçãoGradientes, bandas e porque o meio parece turvoInterpolar em sRGB faz a média de números codificados em gama: o ponto médio de vermelho para verde é #808000 quando a resposta a meia-luz é #bcbc00 — menos 57,2 % de luz. As bandas são outro problema aritmético: 8 bits dão 256 degraus, e um gradiente escuro pode ter apenas 28. Eis ambos, calculados.ExplicaçãoOs esquemas de cor são geometria numa roda — e a roda está erradaComplementar, tríade, análogo e complementar dividido são apenas rotações: some 180°, 120°, 30° ou 150° a um matiz. A aritmética é trivial. O problema é que o círculo de matizes HSL não é percetualmente uniforme — o amarelo e o azul com a mesma luminosidade HSL diferem 12,85 vezes em luminância — por isso uma paleta gerada tem de ser verificada em contraste depois.TutorialRedimensionar uma imagem para cada rede sem a deformarMedido no próprio redimensionador: «Preencher» é um recorte centrado sem ponto de interesse, e uma foto vertical perde 38,9 % em cima para um banner do tamanho do X. E ainda as dimensões publicadas atuais, cada uma com a data em que foi verificada.ComparaçãoWebP vs JPG vs PNG: que formato de imagem usar?JPG, PNG e WebP vencem em casos diferentes. Veja quando usar cada um para o melhor equilíbrio entre qualidade, tamanho e compatibilidade.TutorialComo comprimir uma imagem sem perder qualidadeImagens mais pequenas carregam mais depressa e posicionam melhor. Eis como reduzir uma imagem com critério — formato, resolução e nível de compressão — sem perda visível.

Ferramentas relacionadas

Conversor de coresConverte uma cor para HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, com o contraste.Gerador de esquemas de corDerive esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.Conversor de imagemConverte as tuas imagens para PNG, JPG, WebP, AVIF, BMP, GIF, TIFF ou ICO, em lote e sem enviar nada.

Fontes

Detetaste um erro neste artigo?