El color gris simboliza el equilibrio, la neutralidad y la sofisticación. Situado entre el blanco y el negro, es uno de los colores más versátiles del diseño.
El gris es un neutro situado entre el blanco y el negro. Simboliza equilibrio, neutralidad y sofisticación, y es clave para estructura, tipografía y superficies en UI.
En diseño web, branding e interfaces digitales se utiliza para aportar elegancia, mejorar la legibilidad y crear composiciones limpias que permiten destacar el contenido principal sin distraer al usuario.
El gris suele asociarse con conceptos como:
Su significado puede variar según el contexto, aunque normalmente transmite serenidad, objetividad y sofisticación.
Desde la psicología del color, el gris transmite calma, estabilidad y racionalidad. Al no ser un color dominante, ayuda a reducir el ruido visual y favorece la concentración, motivo por el que es uno de los colores más utilizados en interfaces digitales y productos tecnológicos.
Las emociones que suele transmitir son:
Cuando se utiliza en exceso puede transmitir frialdad, por lo que suele combinarse con colores más vivos para aportar dinamismo.
El gris está presente en prácticamente cualquier disciplina relacionada con el diseño. Es habitual encontrarlo en:
Su neutralidad lo convierte en un excelente color de apoyo para prácticamente cualquier proyecto.
Entre los colores HTML y CSS más conocidos destacan:
| Nombre | Muestra | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gainsboro | |||||
| LightGray | |||||
| Silver | |||||
| DarkGray | |||||
| Gray | |||||
| DimGray | |||||
| SlateGray | |||||
| LightSlateGray | |||||
| DarkSlateGray |
Desde los grises más claros hasta los tonos antracita, cada variante aporta una personalidad diferente a la interfaz.
Colores HTMLNo todos los grises se perciben igual. Su temperatura cromática cambia por completo el ambiente de una interfaz y es una de las claves que más se buscan al trabajar con paletas neutrales.
Tienen un ligero matiz marrón, rojo o amarillo y crean ambientes más acogedores. Encajan bien en branding artesanal, e-commerce de producto físico e interfaces con tono humano.
Contienen matices azules o verdes y transmiten una sensación más tecnológica y minimalista. Son habituales en software, dashboards y productos digitales.
Son muy utilizados en sistemas de diseño como Material Design, Tailwind CSS o Bootstrap. Escalas como gray, slate, zinc o cool gray ayudan a construir tipografía, bordes y superficies consistentes.
Muchos diseñadores buscan términos como gray color palette, neutral gray, slate gray o cool gray. Entender estas diferencias ayuda a elegir la escala correcta y a posicionar mejor el gris en UI.
El gris combina prácticamente con cualquier color gracias a su neutralidad. Algunas combinaciones muy utilizadas son:
#FFFFFF#111111#2563EB#16A34A#FFA500#FFD700#EF4444#7C3AED#EC4899#DAA520Estas combinaciones permiten crear interfaces elegantes, modernas y fáciles de leer.
El gris no tiene un color complementario, ya que pertenece al grupo de los colores acromáticos junto al blanco y el negro. Su principal ventaja es que puede utilizarse para equilibrar prácticamente cualquier combinación cromática sin alterar la armonía del diseño.
El gris funciona como color neutro dentro de cualquier armonía cromática. Las armonías de esta página usan la misma lógica que el Círculo cromático y el Generador de paletas de Matizly.
Suaviza la transición entre colores cercanos y reduce la saturación visual.
Las variaciones se generan con las mismas funciones del estudio Matizly. En grises, las más útiles son escalas de luminosidad y matices cálidos o fríos:
Grises claros
Estas escalas permiten construir tipografía secundaria, bordes, estados disabled y superficies de forma consistente.
Las paletas con gris transmiten elegancia, profesionalidad y minimalismo. Algunas combinaciones populares son:
3 colores
3 colores
3 colores
3 colores
3 colores
3 colores
Estas combinaciones son habituales en diseño web, aplicaciones móviles y branding corporativo.
Paletas de coloresEl gris desempeña un papel muy importante en la accesibilidad de las interfaces.
Los grises claros pueden resultar difíciles de leer sobre fondos blancos, mientras que los grises oscuros suelen ofrecer un excelente contraste sin llegar a la dureza visual del negro puro.
Comprobar siempre la relación de contraste siguiendo las recomendaciones WCAG ayuda a crear experiencias más accesibles.
Texto gris oscuro / fondo blanco
10.31:1AA ✓
Texto blanco / fondo gris oscuro
10.31:1AA ✓
Texto gris medio / fondo blanco
4.83:1AA ✓
Texto blanco / fondo slate
7.58:1AA ✓
El gris permite crear degradados elegantes y discretos. Algunas combinaciones habituales son:
#6B7280 → #FFFFFF#6B7280 → #111111#6B7280 → #2563EB#6B7280 → #C0C0C0#6B7280 → #16A34A#6B7280 → #7C3AEDEstos degradados aparecen con frecuencia en dashboards, aplicaciones móviles, productos tecnológicos e interfaces minimalistas.
Generador de degradadosEl gris es uno de los colores más importantes dentro del diseño de interfaces. Su capacidad para organizar visualmente la información hace que sea imprescindible en prácticamente cualquier sistema de diseño moderno.
El gris simboliza equilibrio, neutralidad, profesionalidad y estabilidad. Es un color que transmite serenidad y sofisticación.
El gris combina muy bien con blanco, negro, azul, verde, naranja, amarillo, rojo, morado y dorado.
El gris no tiene un color complementario porque forma parte de los colores acromáticos junto al blanco y el negro.
Es muy utilizado en diseño web, interfaces de usuario, aplicaciones móviles, branding corporativo, tecnología, arquitectura y diseño industrial.
Los grises cálidos tienen un ligero matiz marrón, rojo o amarillo y resultan más acogedores. Los grises fríos contienen matices azules o verdes y se perciben más tecnológicos y minimalistas. Los grises neutros son la base de muchos sistemas de diseño.
Elige cualquier color y copia Hex, RGB, HSL u OKLCH con sombras, matices y armonías.
Probar ahoraExplora paletas listas para usar y guarda tus favoritas en este dispositivo.
Probar ahoraExplora armonías en un círculo interactivo y crea paletas equilibradas desde un color base.
Probar ahora