Recurso · hexadecimal
Hex no cotidiano digital
Hexadecimal não é só exercício de conversão — é como cores, interfaces e ferramentas guardam valores no dia a dia. Aqui você lê códigos como #RRGGBB, coleta cores de uma imagem e testa o olho no jogo.
Pergunta-guia: quando você vê #FF5733, está vendo um “nome de cor” ou três bytes em hex?
hexadecimal aplicado a cores digitais
02 · notação
#RRGGBB — seis dígitos, três canais.
Em CSS e design digital, cores usam hexadecimal com prefixo #. Cada par de dígitos é um canal de 8 bits (0–255).
Estrutura
# + RR (vermelho) + GG (verde) + BB (azul)
Ex.: #FF5733 → vermelho FF, verde 57, azul 33
Por que hex e não decimal? 4 bits → 1 dígito — compacto para humanos lerem bytes binários. É o sistema posicional em base 16.
03 · decodificar
De hex a decimal — canal por canal.
Cada par hex é um byte: FF₁₆ = 255₁₀. Clique um exemplo ou edite mentalmente com a turma.
#FF5733
Vermelho (R)
FF
255 em decimal
Verde (G)
57
87 em decimal
Azul (B)
33
51 em decimal
04 · coletar
Colete cores de uma imagem.
Clique no logo da UFMA (ou carregue outra imagem) para ler o pixel e obter o #hex. Monte uma paleta — é assim que designers e desenvolvedores “capturam” cores do mundo real.
R
--
—
G
--
—
B
--
—
Paleta coletada
Nenhuma cor ainda — clique na imagem.
Cada clique lê um pixel (três bytes RGB) e escreve em hex. Cores próximas no logo podem variar um pouco — o arquivo é imagem, não um “swatch” oficial isolado.
05 · onde aparece
Hex além da aula de matemática.
O mesmo sistema numérico aparece em contextos que o cursista já usa — clique cada área.
06 · prática
Jogo: encontre a cor alvo.
A cor alvo tem um código #hex escondido na interface — você escolhe no círculo cromático. Ao confirmar, vê o % de correspondência e os dois códigos lado a lado.
Cor alvo
Passe o mouse · clique para confirmar
Nenhuma tentativa ainda
O jogo usa similaridade perceptual (espaço Lab) — o hex é exato, mas o olho julga tons próximos.
07 · fechamento
Hex é representação — e é cotidiano.
Para levar da aula
- #RRGGBB = três bytes (R, G, B) em base 16.
- Converter um canal: FF₁₆ → 15×16 + 15 = 255₁₀ (expansão posicional).
- Imagens são matrizes de pixels — cada pixel tem um hex legível.
- Hex compacta bits — ponte entre binário e interface humana.