El gris es un color neutro y ahumado creado al mezclar negro y blanco, lo que le da una cualidad equilibrada. Es acromático, lo que significa que técnicamente no tiene color, por lo que no aparece en el círculo cromático. Aunque el gris puede transmitir formalidad y sofisticación, su neutralidad también puede evocar sentimientos de tristeza o monotonía en ciertos contextos.
El gris se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #898989
- Valor RGB: 53.7% rojo, 53.7% verde y 53.7% azul
Las consideraciones de accesibilidad juegan un papel crucial en la elección de colores en el diseño de UX y UI. Figma ofrece plugins en la Comunidad para asegurarte de que tus diseños cumplan con las Web Content Accessibility Guidelines.
Aquí hay algunas formas de usar el gris en tus diseños:
- Crea una estética minimalista. El gris puede crear un aspecto limpio y moderno, perfecto para interfaces que priorizan la simplicidad y el enfoque en el contenido.
- Establece el ambiente. El gris puede crear una sensación de sofisticación y seriedad o evocar sentimientos de tristeza.
- Úsalo como base. Este tono neutro y equilibrado es una excelente opción para elementos como fondos y texto, proporcionando una apariencia limpia y discreta que apoya varios estilos de diseño y paletas de colores.
Ten en cuenta que el color y su significado pueden variar según la cultura y el contexto. Si diseñas para una audiencia internacional, investiga cómo se perciben los colores en cada país.
Para variaciones dentro del mismo espectro ahumado que el gris, considera:
- Gris frío (#CBCBCB) es una versión más clara del gris, añadiendo un toque de ligereza.
- Plata (#C4C4C4) es un tono de gris más brillante que añade un poco de elegancia.
- Peltre (#909EAE) es un tono grisáceo con un sutil matiz azul.
- Pizarra (#6D8196) es un gris más profundo y frío con un toque de azul.
El gris es un color neutro, lo que le permite combinar bien con casi cualquier color del espectro. Aquí hay algunas ideas para inspirar tu creatividad:
- Gris azulado (#6A89A7) complementa la frescura del gris mientras añade vitalidad, perfecto para estéticas limpias y modernas.
- Siena quemada (#ED7B58) añade un toque cálido y terroso que complementa la neutralidad del gris.
- Metal de arma (#353E43) proporciona profundidad y dimensión, creando una sensación sofisticada y profesional.
- Rojo carmesí (#B22222) ofrece una explosión de energía sin abrumar la calma del gris.
Otros colores a considerar incluyen blanco roto para un efecto elegante, aqua para un contraste brillante, y verdes sutiles para complementar la neutralidad del gris, como musgo sobre una piedra.
Aunque el gris es neutro, puede chocar con colores extremadamente saturados como:
- Verde neón (#2CFF05) interrumpe la neutralidad del gris, creando un contraste intenso.
- Índigo (#560591) es un color profundo, creando discordia en lugar de complementar la frescura neutral del gris.
- Rosa (#FF1D8D) choca con la frescura del gris, resultando en una tensión visual.
- Amarillo (#FFFF00) domina el gris de tono medio, produciendo un contraste fuerte.
El gris simboliza neutralidad y equilibrio, transmitiendo imparcialidad y sofisticación. Se utiliza comúnmente en entornos profesionales para establecer autoridad y confianza.
En la psicología del color, el gris representa imparcialidad y a menudo se asocia con el sistema judicial, la equidad y la búsqueda de la verdad. Los grises más claros evocan calma y seguridad, mientras que los tonos más oscuros pueden traer sentimientos de melancolía y pesimismo debido a su falta de vitalidad.
En el diseño de interfaces, el gris puede mejorar la legibilidad y transmitir profesionalismo. Sin embargo, el uso excesivo del gris puede hacer que los diseños sean poco inspiradores o deprimentes. Los tonos más claros funcionan bien para fondos, mientras que los más oscuros pueden añadir seriedad. Usa grises oscuros con moderación para evitar crear una experiencia de usuario aburrida.
La palabra “gris” se origina en las lenguas germánicas, específicamente del inglés antiguo “græg,” que significa “amanecer” o “hacerse claro.” El primer uso registrado de “gris” en inglés data de alrededor del año 700 d.C.
El gris ha sido un elemento básico en la moda, desde las simples túnicas de los campesinos hasta los elegantes vestidos de la nobleza. Los artistas lo han utilizado para sombrear y representar la naturaleza, mientras que los arquitectos han incorporado piedras y ladrillos grises en edificios a lo largo de diferentes épocas. Incluso en la joyería, las perlas y las gemas aparecen en varios tonos de gris.
Hoy en día, el gris refleja eficiencia moderna e innovación mientras transmite profesionalismo, sofisticación y lujo. Los grises más claros continúan siendo populares por su estética minimalista, mientras que los tonos más oscuros pueden evocar una sensación de vida urbana.
Variantes de color
Sombras
Tintes
Tonos
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Escala de grises
Borde afilado
Importancia del gris
Verificador de contraste
Contraste 3,5
- Texto grande
#898989
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Desaprobado | Desaprobado | |
Aprobado | Desaprobado | |
Aprobado | Desaprobado |
Contraste 6
- Texto grande
#898989
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Aprobado | Desaprobado | |
Aprobado | Aprobado | |
Aprobado | Aprobado |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #898989, también conocido como Gris, tiene valores RGB de R:137, G:137, B:137 y valores CMYK de C:0, M:0, Y:0, K:46.
| VALUE | CSS | |
|---|---|---|
| HEX | #898989 | #898989 |
| RGB DECIMAL | 137, 137, 137 | RGB(137,137,137) |
| RGB PERCENTAGE | 53.7, 53.7, 53.7 | RGB(53.7%,53.7%,53.7%) |
| CMYK | 0, 0, 0, 46 | |
| HSL | HSL(0.0, 0.0%, 53.7%) | HSL(0.0, 0.0%, 53.7%) |
| HSV (OR HSB) | 0.0°, 0.0, 53.7 | |
| WEB SAFE | #153153153 | #153153153 |
| BINARY | 10001001, 10001001, 10001001 | |
| iOS - SwiftUI | Color(red: 0.537, green: 0.537, blue: 0.537) | |
| iOS - UIKit | UIColor(red: 0.537, green: 0.537, blue: 0.537, alpha: 1) | |
| Android - Compose | Color(0xFF898989) |
