HEX e RGB: como conferir os códigos da paleta

Para conferir HEX e RGB, compare os valores dos três canais da mesma cor. Em CSS, #ff8200 e rgb(255, 130, 0) são duas formas de escrever a mesma cor sRGB sem transparência. Já #f80 expande para #ff8800: o canal verde muda de 130 para 136.

Esse detalhe pode passar despercebido quando uma equipe copia a paleta para uma página ou apresentação. O guia de branding situa a identidade no conjunto da marca. Aqui, vamos conferir a transcrição dos códigos digitais, com um cálculo resolvido e um registro para adaptar.

Comece pela referência aprovada, com contexto

Localize o arquivo ou guia que contém a paleta em uso e identifique sua versão. Anote a função da cor, o código fornecido, o formato e o contexto digital indicado. Se dois documentos discordam, encaminhe a diferença ao responsável pela identidade antes de escolher um deles por aparência.

Recomendamos dar nomes que ajudem a localizar a função, como destaque principal ou fundo de orientação. O nome não substitui o valor. O artigo sobre glossário da marca ajuda a manter termos coerentes quando a equipe registra e compartilha essas referências.

Leia os três pares do hexadecimal

A referência MDN para cores hexadecimais em CSS define a ordem vermelho, verde e azul. Na forma de seis dígitos, cada par vai de 00 a ff. A escrita aceita letras maiúsculas ou minúsculas. Neste guia, usamos seis dígitos e cores opacas.

O sistema hexadecimal tem dezesseis símbolos: 0 a 9 e a a f. As letras representam 10 a 15. Para converter um par em decimal, multiplique o primeiro valor por 16 e some o segundo. No exercício próprio C038, separamos #ff8200 em ff, 82 e 00.

C038 · Código de partida

#ff8200, em CSS sRGB, com seis dígitos e sem transparência.

R · Vermelho · Par ff

15 × 16 + 15 = 255.

G · Verde · Par 82

8 × 16 + 2 = 130.

B · Azul · Par 00

0 × 16 + 0 = 0.

Resultado equivalente

rgb(255, 130, 0). A conferência é numérica, sem medição física de cor.

Descrição da figura

O esquema próprio separa os seis dígitos de #ff8200 em três pares. R, vermelho, recebe ff: 15 vezes 16 mais 15, igual a 255. G, verde, recebe 82: 8 vezes 16 mais 2, igual a 130. B, azul, recebe 00: 0 vezes 16 mais 0, igual a 0. Os três canais formam rgb(255, 130, 0). A conferência vale para a notação CSS sRGB opaca e não mede correspondência física de monitor ou impressão. No celular, a decomposição é apresentada em texto HTML.

A conta do canal verde é 8 × 16 + 2 = 130. Nos outros canais, 15 × 16 + 15 = 255 e 0 × 16 + 0 = 0. Preservando a ordem, obtemos vermelho 255, verde 130 e azul 0. A equivalência é numérica; não depende de achar que duas amostras parecem próximas.

Compare com RGB no mesmo contexto

Na referência MDN da função rgb(), a forma absoluta com números usa os canais sRGB de 0 a 255. A sintaxe com vírgulas continua descrita pela documentação e facilita a leitura do exemplo. Não confunda o nome do modelo RGB com uma especificação completa de qualquer arquivo ou equipamento.

A tabela reúne três conversões próprias, conferidas nos dois sentidos. O exercício usa valores escolhidos para o material didático, sem representar medição de monitor, impressão ou resultado de um cliente.

Nas amostras abaixo, cada faixa é definida diretamente na página pelo código escrito ao lado. Elas ajudam a relacionar notação e apresentação neste navegador. Os rótulos permitem conferir os valores mesmo sem distinguir visualmente os tons.

Abrevie apenas quando cada par puder ser repetido

Na forma de três dígitos, cada símbolo é duplicado para formar o par. Por isso, #f80 vira #ff8800. Ele equivale a rgb(255, 136, 0), e não a rgb(255, 130, 0). O par 82 não pode ser preservado pela repetição de um único símbolo.

Para evitar essa troca no registro da equipe, recomendamos manter a forma completa de seis dígitos. Se receber quatro ou oito dígitos, confira a transparência: essas formas incluem alfa na notação CSS. Não elimine esse componente silenciosamente nem aplique a conta de uma cor opaca ao resultado composto sobre um fundo.

Registre a equivalência e confira a aplicação

Primeiro, copie o HEX completo da referência. Depois, confira cada par e registre R, G e B na mesma ordem. Volte dos números decimais aos pares hexadecimais para detectar troca de canal ou de caractere. Um conversor pode apoiar a tarefa, mas o registro precisa permitir reconhecer a referência e reproduzir a conferência.

Nome e função da cor:
Material de referência e versão:
Responsável pela referência:
Contexto ou espaço de cor informado:
HEX completo:
R:     G:     B:
Forma RGB correspondente:
Transparência: ausente, presente ou pendente de confirmação
Conferência de ida e volta:
Página, peça ou componente de aplicação:
Par de texto e fundo a conferir:
Responsável, data e pendências:

Na implementação, peça que o responsável confira a cor efetivamente aplicada ao elemento. O navegador pode mostrar uma forma RGB para uma regra escrita em HEX. Compare os canais antes de concluir que a cor foi trocada. Se houver transparência, filtros, imagem, gradiente ou outra composição, examine também essa condição.

Códigos equivalentes não garantem leitura adequada. O roteiro de contraste das cores em textos e botões examina os pares e suas aplicações. Para escolher funções e testar a comunicação, consulte também psicologia das cores no marketing.

Separe a conferência do código da reprodução física

A Adobe distingue modelos e espaços de cor e explica que dispositivos podem apresentar gamas diferentes. A equivalência demonstrada aqui pertence às notações CSS sRGB. Ela não promete que telas diferentes ou um material impresso terão aparência idêntica.

Para impressão, defina as condições com quem produz o material e confira a prova pertinente. Converter estes números para CMYK sem considerar o processo não é uma etapa coberta pelo exercício. Da mesma forma, uma fotografia de fios, papel ou tinta não valida a correspondência física da cor.

Perguntas frequentes sobre HEX e RGB

HEX e RGB são sempre cores diferentes?

Não. No recorte CSS sRGB deste artigo, #ff8200 e rgb(255, 130, 0) escrevem a mesma cor opaca. Compare os canais e o contexto da especificação.

Posso trocar #ff8200 por #f80?

Não preservando o mesmo valor. #f80 expande para #ff8800, cujo canal verde é 136. No código #ff8200, o canal verde é 130.

Maiúsculas e minúsculas mudam o HEX em CSS?

Não. #FF8200 e #ff8200 representam o mesmo valor nessa notação. Mantenha uma convenção no guia para facilitar a leitura.

Códigos equivalentes garantem a mesma impressão?

Não. O exercício confere notações digitais sRGB. Papel, tinta, processo e condições de reprodução precisam de uma conferência própria.

Se a equipe precisa transformar a identidade em orientações de uso, converse conosco sobre a organização dos materiais da marca. Podemos ajudar a delimitar referências e responsabilidades. Criação da identidade, implantação no site e produção gráfica exigem entregas combinadas.