Gray vs Grey: Ortografía, Tonos y Códigos de Color

¿Es "gray" o "grey"? La respuesta depende enteramente del lado del Atlántico en que te encuentres — y cuál elijas en el código, según la convención que sigas, puede producir resultados diferentes. Esta es una de esas preguntas sobre color donde la ortografía sí importa en contextos técnicos, aunque ambas palabras hacen referencia al mismo fenómeno visual: el neutro acromático entre el negro y el blanco, y todas las variantes cálidas y frías que se agrupan a su alrededor.

Este artículo cubre la pregunta ortográfica, las reglas CSS, la realidad técnica de qué hace que un color sea "gris", una guía práctica para elegir entre grises cálidos y fríos, y una tabla de referencia con los principales códigos hex de gris a lo largo de todo el espectro de luminosidad.

Ortografía Americana vs Británica: Gray vs Grey

La diferencia ortográfica es uno de los ejemplos más claros de la divergencia entre el inglés americano y el británico:

Ambas ortografías son antiguas. La palabra se remonta al inglés antiguo grǣg, y tanto "gray" como "grey" aparecen en textos ingleses desde el período medieval. La divergencia en cuál forma se volvió dominante siguió el patrón general del inglés americano al estandarizar una variante mientras el inglés británico retuvo la otra.

Un recurso mnemotécnico útil: grAy es Americano, grEy es Europeo. Las vocales A y E corresponden a los continentes.

En el uso cotidiano, ninguna ortografía es incorrecta — ambas hacen referencia al mismo color. Las guías de estilo y los manuales de marca suelen especificar una ortografía para mantener la consistencia. Si escribes para una audiencia internacional sin una preferencia regional clara, "gray" tiene una ligera ventaja en contextos web porque es la ortografía preferida en la especificación CSS (más sobre eso a continuación).

Colores Nombrados en CSS: Gray Es el Estándar

Cuando se establecieron los estándares de color para HTML y CSS, se tomó una decisión sobre qué ortografía codificar. Ambas ortografías son aceptadas en CSS, pero no siempre hacen referencia al mismo color — lo que crea un riesgo técnico sutil.

La Familia de Grises en CSS

CSS incluye múltiples colores gris con nombre. Aquí está el conjunto completo, con ambas variantes ortográficas donde corresponde:

Una nota importante: para la mayoría de los compuestos (lightgray, darkgray, dimgray, slategray), existen ambas ortografías y hacen referencia a valores hex idénticos. Para el gray / grey base, ambos también corresponden a #808080. La distinción importa más para los desarrolladores que dependen de los valores predeterminados del navegador — en la práctica, CSS maneja ambas ortografías correctamente.

La regla técnica más importante: en los códigos hex y los valores RGB, la palabra "gray" vs "grey" es irrelevante — solo importan los números. #808080 es #808080 independientemente de cómo lo llames.

¿Qué Hace que el Gris Sea "Gris"? La Realidad Técnica

Un gris puro — técnicamente llamado color acromático — tiene valores iguales en los tres canales RGB. Cuando rojo, verde y azul son idénticos, el resultado es un neutro sin matiz:

En términos HSL, cualquier gris verdaderamente acromático tiene 0% de saturación y un matiz indefinido. El porcentaje de luminosidad determina cuán claro u oscuro es.

Sin embargo, la mayoría de los colores "gris" en el diseño del mundo real no son perfectamente acromáticos — llevan leves dominantes de color que los hacen "cálidos" o "fríos".

50 Tonos de Gris: Códigos Hex Clave a lo Largo del Espectro

Una referencia práctica que abarca toda la gama, desde el casi blanco hasta el casi negro:

El Gris de Accesibilidad Importante: #767676

Este gris específico tiene una importancia excepcional en el diseño web: es el gris más claro que logra una relación de contraste de 4,5:1 contra el blanco #FFFFFF, que es el mínimo WCAG AA para texto normal. Cualquier gris más claro que #767676 no cumple el WCAG AA como texto sobre fondo blanco.

Esto significa que el CSS gray (#808080) técnicamente no pasa el WCAG AA — alcanza solo aproximadamente 3,95:1 de relación de contraste contra el blanco. A pesar de llamarse "gray" y parecer relativamente oscuro, no es suficientemente oscuro para texto de cuerpo accesible. Usa #767676 o más oscuro para cualquier texto que deba ser accesible.

Gris Frío vs Gris Cálido: La Verdadera Pregunta del Diseñador

En la práctica, la distinción más importante para los diseñadores no es "gray vs grey" — es gris cálido vs gris frío.

Los grises fríos se inclinan hacia el azul, el verde o el morado. Se sienten elegantes, modernos y clínicos. Combinan bien con otros colores fríos y crean una estética orientada a la tecnología.

Los grises cálidos se inclinan hacia el rojo, el naranja o el amarillo. Se sienten naturales, accesibles y terrosos. Combinan bien con tonos de madera, terracota y otros materiales naturales cálidos.

Los grises neutros — perfectamente acromáticos sin matiz — se sitúan entre los dos. En la práctica, los grises verdaderamente neutros se perciben de manera diferente dependiendo de los colores circundantes (un efecto de contexto conocido como contraste simultáneo).

Ejemplos de Gris Cálido vs Frío

Cómo Identificar Gris Cálido vs Frío por Código Hex

Observa los valores RGB: - Si el azul es el más alto entre los tres canales → gris frío - Si el rojo o el verde es el más alto → gris cálido - Si los tres son iguales → gris neutro

Por ejemplo: - #708090 = rgb(112, 128, 144) → azul (144) es el más alto → gris frío - #9B9B8A = rgb(155, 155, 138) → azul (138) es el más bajo → gris cálido - #808080 = rgb(128, 128, 128) → todos iguales → gris neutro

El Gris en el Diseño Web Moderno

El gris es posiblemente el color más importante en el diseño web. Aparece en: - Fondos de página — usar grises claros en lugar de blanco reduce la fatiga visual y crea jerarquía visual - Componentes de interfaz — bordes, divisores, fondos de campos de entrada y fondos de tarjetas son casi universalmente grises - Tipografía — el texto de cuerpo en la web suele ser gris oscuro en lugar de negro puro, lo que reduce la dureza - Estados deshabilitados — los elementos interactivos en gris señalan universalmente la indisponibilidad

Valores Prácticos de Gris para Sistemas de Diseño Web

La escala de grises de Tailwind CSS (de #F9FAFB a #030712) se ha convertido en una referencia ampliamente adoptada para sistemas de diseño web. Usa el generador de tonos para crear una escala de grises estilo Tailwind de 50 a 950 desde cualquier valor base de gris.

Estrategia de Grises en Modo Oscuro

El diseño en modo oscuro requiere una selección cuidadosa de grises. La tentación de usar negro puro #000000 como fondo en modo oscuro debería resistirse en la mayoría de los casos — el negro puro crea un contraste incómodamente duro con el texto blanco. En su lugar:

• Los fondos en modo oscuro funcionan mejor en el rango de #121212 a #1E1E1E — oscuro, pero no negro
• Las superficies en modo oscuro (tarjetas, diálogos) deben ser uno o dos pasos más claras que el fondo: #2C2C2C a #3A3A3A
• El texto sobre fondos oscuros funciona mejor en blancos cálidos apagados (#E8E8E8 a #F5F5F5) en lugar de blanco puro

Conversión de Tonos de Gris entre Modelos de Color

Para cualquier gris, la conversión es sencilla porque la propiedad acromática hace que CMYK y otros modelos se comporten de manera predecible:

Para grises verdaderamente acromáticos (R, G, B iguales), el valor CMYK siempre es C:0 M:0 Y:0 K:{X} donde K equivale a 100 menos el porcentaje de luminosidad. Usa el conversor de color para manejar grises cálidos y fríos con matiz no nulo, donde los valores CMYK se vuelven más complejos.

Conclusiones Clave

• Ortografía: "Gray" es inglés americano; "grey" es inglés británico. En CSS, ambas ortografías son válidas para colores nombrados; la mayoría corresponde a valores hex idénticos. El gray y grey base equivalen ambos a #808080
• Definición técnica: Un gris verdaderamente acromático tiene canales RGB iguales (R=G=B) y 0% de saturación HSL. Cualquier desequilibrio en los canales crea grises cálidos (rojo/verde más alto) o fríos (azul más alto)
• Umbral crítico de accesibilidad: #767676 es el gris más claro que pasa el WCAG AA (4,5:1) como texto sobre blanco. El CSS gray #808080 no lo pasa — alcanza solo ~3,95:1 de contraste
• Identificación cálido vs frío: Si el canal azul es el más alto → gris frío. Si rojo/verde es el más alto → gris cálido. Canales iguales → neutro
• Diseño web: Los fondos, bordes y variantes de texto en gris forman la capa estructural de casi toda interfaz web. Usa fondos en modo claro alrededor de #F5F5F5 y fondos en modo oscuro alrededor de #121212 a #1E1E1E
• Usa el generador de tonos para construir una escala completa de grises y el conversor para traducir cualquier gris a CMYK, HSL, RGB u OKLCH