Gray vs Grey: Grafia, Tons e Códigos de Cor

É "gray" ou "grey"? A resposta depende inteiramente de qual lado do Atlântico você está — e qual você escolher no código, dependendo da convenção que você seguir, pode produzir resultados diferentes. Esta é uma dessas perguntas sobre cores em que a grafia realmente importa em contextos técnicos, embora ambas as palavras se refiram ao mesmo fenômeno visual: o neutro acromático entre o preto e o branco, e todas as variantes próximas ao neutro, quentes e frias, que se agrupam ao redor dele.

Este artigo cobre a questão da grafia, as regras do CSS, a realidade técnica do que torna uma cor "cinza", um guia prático para escolher entre cinzas quentes e frios, e uma tabela de referência dos principais códigos hex de cinza em todo o espectro de luminosidade.

Grafia Americana vs Britânica: Gray vs Grey

A diferença de grafia é um dos exemplos mais claros de divergência entre o inglês americano e o britânico:

Ambas as grafias são antigas. A palavra remonta ao inglês antigo grǣg, e tanto "gray" quanto "grey" aparecem em textos em inglês datados do período medieval. A divergência sobre qual grafia se tornou dominante seguiu o padrão geral do inglês americano padronizando em torno de uma variante, enquanto o inglês britânico reteve outra.

Um mnemônico útil: grAy é Americano, grEy é Europeu. As vogais A e E correspondem aos continentes.

No uso cotidiano, nenhuma grafia está incorreta — ambas se referem à mesma cor. Guias de estilo e diretrizes de marca geralmente especificam uma grafia para consistência. Se você escreve para um público internacional sem preferência regional clara, "gray" tem uma ligeira vantagem em contextos web porque é a grafia preferida da especificação CSS (mais sobre isso abaixo).

Cores Nomeadas no CSS: Gray É o Padrão

Quando os padrões de cores HTML e CSS foram estabelecidos, foi tomada uma decisão sobre qual grafia codificar. Ambas as grafias são aceitas no CSS, mas nem sempre se referem à mesma cor — o que cria um risco técnico sutil.

A Família CSS de Cinzas

O CSS inclui múltiplas cores cinza nomeadas. Veja o conjunto completo, com ambas as variantes de grafia onde aplicável:

Uma nota importante: para a maioria dos compostos (lightgray, darkgray, dimgray, slategray), ambas as grafias existem e se referem a valores hex idênticos. Para o gray / grey base, ambos também mapeiam para #808080. A distinção importa mais para desenvolvedores que dependem dos padrões do navegador — na prática, o CSS lida corretamente com ambas as grafias.

A regra técnica mais importante: em códigos hex e valores RGB, a palavra "gray" vs "grey" é irrelevante — apenas os números importam. #808080 é #808080 independentemente de como você o chama.

O que Torna o Cinza "Cinza"? A Realidade Técnica

Um cinza puro — tecnicamente chamado de cor acromática — tem valores iguais nos três canais RGB. Quando vermelho, verde e azul são idênticos, o resultado é um neutro sem tonalidade:

Em termos HSL, qualquer cinza verdadeiramente acromático tem saturação de 0% e tonalidade indefinida. A porcentagem de luminosidade determina quão claro ou escuro ele é.

A maioria das cores "cinza" no design do mundo real, no entanto, não é perfeitamente acromática — elas carregam leves tendências de cor que as tornam "quentes" ou "frias".

50 Tons de Cinza: Códigos Hex Principais em Todo o Espectro

Uma referência prática abrangendo todo o intervalo do quase-branco ao quase-preto:

O Cinza de Acessibilidade Importante: #767676

Este cinza específico tem importância desproporcional no web design: é o cinza mais claro que alcança uma taxa de contraste de 4,5:1 em relação ao branco #FFFFFF, que é o mínimo WCAG AA para texto normal. Qualquer cinza mais claro que #767676 não passa no WCAG AA como texto em fundo branco.

Isso significa que o CSS gray (#808080) tecnicamente falha no WCAG AA — ele alcança apenas aproximadamente 3,95:1 de taxa de contraste em relação ao branco. Apesar de ser chamado de "cinza" e parecer relativamente escuro, não é escuro o suficiente para texto de corpo acessível. Use #767676 ou mais escuro para qualquer texto que deva ser acessível.

Cinza Frio vs Cinza Quente: A Questão Real do Designer

Na prática, a distinção mais importante para designers não é "gray vs grey" — é cinza quente vs cinza frio.

Cinzas frios tendem ao azul, verde ou roxo. Parecem elegantes, modernos e clínicos. Combinam bem com outras cores frias e criam uma estética voltada para tecnologia.

Cinzas quentes tendem ao vermelho, laranja ou amarelo. Parecem naturais, acolhedores e terrosos. Combinam bem com tons de madeira, terracota e outros materiais naturais quentes.

Cinzas neutros — perfeitamente acromáticos sem tonalidade — ficam entre os dois. Na prática, cinzas verdadeiramente neutros são percebidos de forma diferente dependendo das cores ao redor (um efeito de contexto conhecido como contraste simultâneo).

Exemplos de Cinza Quente vs Frio

Como Identificar Cinza Quente vs Frio pelo Código Hex

Observe os valores RGB: - Se o azul for mais alto entre os três canais → cinza frio - Se o vermelho ou verde for mais alto → cinza quente - Se os três são iguais → cinza neutro

Por exemplo: - #708090 = rgb(112, 128, 144) → azul (144) é o mais alto → cinza frio - #9B9B8A = rgb(155, 155, 138) → azul (138) é o mais baixo → cinza quente - #808080 = rgb(128, 128, 128) → todos iguais → cinza neutro

Cinza no Web Design Moderno

O cinza é sem dúvida a cor mais importante no web design. Ele aparece em: - Fundos de página — usar cinzas claros em vez de branco reduz o cansaço visual e cria hierarquia visual - Componentes de UI — bordas, divisores, fundos de campos de entrada e fundos de cards são quase universalmente cinzas - Tipografia — o texto de corpo na web é frequentemente cinza escuro em vez de preto puro, o que reduz a dureza - Estados desabilitados — elementos interativos acinzentados sinalizam universalmente indisponibilidade

Valores Práticos de Cinza para Sistemas de Design Web

A escala de cinza do Tailwind CSS (#F9FAFB a #030712) tornou-se uma referência amplamente adotada para sistemas de design web. Use o gerador de tons para criar uma escala de cinza estilo Tailwind de 50–950 a partir de qualquer valor de cinza base.

Estratégia de Cinza para Modo Escuro

O design em modo escuro requer seleção cuidadosa de cinza. A tentação de usar preto puro #000000 como fundo em modo escuro deve ser resistida na maioria dos casos — o preto puro cria um contraste desconfortavelmente intenso com o texto branco. Em vez disso:

• Fundos em modo escuro funcionam melhor no intervalo de #121212 a #1E1E1E — escuros, mas não pretos
• Superfícies em modo escuro (cards, diálogos) devem ser um ou dois tons mais claros que o fundo: #2C2C2C a #3A3A3A
• Texto em fundos escuros funciona melhor em brancos-não-puros quentes (#E8E8E8 a #F5F5F5) em vez de branco puro

Convertendo Tons de Cinza Entre Modelos de Cor

Para qualquer cinza, a conversão é direta porque a propriedade acromática faz com que o CMYK e outros modelos se comportem de maneira previsível:

Para cinzas verdadeiramente acromáticos (R, G, B iguais), o valor CMYK é sempre C:0 M:0 Y:0 K:{X}, onde K é igual a 100 menos a porcentagem de luminosidade. Use o conversor de cores para lidar com cinzas quentes e frios com tonalidade não-zero, onde os valores CMYK se tornam mais complexos.

Principais Conclusões

• Grafia: "Gray" é inglês americano; "grey" é inglês britânico. No CSS, ambas as grafias são válidas para cores nomeadas; a maioria mapeia para valores hex idênticos. O gray e o grey base ambos equivalem a #808080
• Definição técnica: Um cinza acromático verdadeiro tem canais RGB iguais (R=G=B) e saturação HSL de 0%. Qualquer desequilíbrio nos canais cria cinzas quentes (vermelho/verde mais alto) ou frios (azul mais alto)
• Limiar crítico de acessibilidade: #767676 é o cinza mais claro que passa no WCAG AA (4,5:1) como texto no branco. O CSS gray #808080 falha — ele alcança apenas ~3,95:1 de contraste
• Identificação quente vs frio: Se o canal azul for o mais alto → cinza frio. Se o vermelho/verde for o mais alto → cinza quente. Canais iguais → neutro
• Web design: Fundos cinzas, bordas e variantes de texto formam a camada estrutural de quase toda UI web. Use fundos em modo claro por volta de #F5F5F5 e fundos em modo escuro por volta de #121212 a #1E1E1E
• Use o gerador de tons para construir uma escala completa de cinza e o conversor para traduzir qualquer cinza em CMYK, HSL, RGB ou OKLCH