Hex (código hexadecimal de cor)

Código de seis caracteres que representa uma cor com precisão, igual em qualquer tela.

Hard

O que é

Hex, abreviação de código hexadecimal de cor, é o jeito padrão de representar cor em design digital. Ele usa seis caracteres precedidos de cerquilha, como #FFFFFF pra branco ou #000000 pra preto, e cada par desses caracteres corresponde aos valores de vermelho, verde e azul que somam a cor final.

Pra quem desenha produto, o hex é a base do design system, porque garante que a cor da marca seja a mesma no site, no app e nos materiais. O time define o azul primário como #0057FF, por exemplo, e usa esse mesmo código no guia, no protótipo e na produção. Sem isso, a marca acaba derrapando em inconsistência.

A acessibilidade também depende dessa escolha. O contraste entre frente e fundo se mede comparando os valores hex, então texto preto em fundo branco dá contraste máximo, enquanto um cinza claro sobre um cinza um pouco mais escuro pode reprovar no WCAG. As ferramentas de contraste analisam justamente esse par hex pra checar.

Em uma frase

Manda o hex exato do primário pra eu cravar igual no design system.

A pergunta que ele responde

Como eu garanto que a cor da marca fica idêntica no Figma e no código?

Quando usar

Ajuda ao definir e documentar cor de marca, token de cor ou paleta de design system.

Como não usar

O cuidado é não escolher um hex bonito sem checar o contraste, porque uma combinação que fere o WCAG deixa o texto ilegível pra parte das pessoas.

Na prática

Pense no guia da marca, com o primário cravado como hex. A pessoa de design cola o mesmo código no Figma, o dev cola no CSS, e a cor sai idêntica nos dois lugares.

Não confunda com

Vale lembrar que o hex não é o único sistema. Existem também o HSL, que trabalha com matiz, saturação e luminosidade, e os nomes de cor do CSS. O hex segue como padrão porque entrega precisão e compatibilidade praticamente universal.

D

Em inglês

Hex

Pronúncia

réx

Também chamado de

hex, código hex, hexadecimal

Origem

n/a

Fonte

Saiba mais

MDN Web Docs, referência sobre cores em hexadecimal