Código de color y paleta
Tonos de Gris
El gris aporta los neutros estructurales de la mayoría de sistemas de interfaz. Sus valores fríos y cálidos establecen jerarquía, separan superficies y dejan que los colores de acento transmitan significado.
Formatos de color
El mismo color base en los formatos web más habituales.
Tonos
| Color | Nombre | HEX | RGB | HSL | Copiar |
|---|---|---|---|---|---|
| White Smoke | #F9FAFB | 249, 250, 251 | 210, 20%, 98% | ||
| Ghost White | #F3F4F6 | 243, 244, 246 | 220, 14%, 96% | ||
| Gainsboro | #E5E7EB | 229, 231, 235 | 220, 13%, 91% | ||
| Light Gray | #D1D5DB | 209, 213, 219 | 216, 12%, 84% | ||
| Silver | #9CA3AF | 156, 163, 175 | 218, 11%, 65% | ||
| Gray | #6B7280 | 107, 114, 128 | 220, 9%, 46% | ||
| Dim Gray | #4B5563 | 75, 85, 99 | 215, 14%, 34% | ||
| Dark Gray | #374151 | 55, 65, 81 | 217, 19%, 27% | ||
| Charcoal | #1F2937 | 31, 41, 55 | 215, 28%, 17% | ||
| Almost Black | #111827 | 17, 24, 39 | 221, 39%, 11% | ||
| Slate Light | #F8FAFC | 248, 250, 252 | 210, 40%, 98% | ||
| Slate Pale | #F1F5F9 | 241, 245, 249 | 210, 40%, 96% | ||
| Slate | #E2E8F0 | 226, 232, 240 | 214, 32%, 91% | ||
| Cool Gray | #CBD5E1 | 203, 213, 225 | 213, 27%, 84% | ||
| Steel | #94A3B8 | 148, 163, 184 | 215, 20%, 65% | ||
| Slate Gray | #64748B | 100, 116, 139 | 215, 16%, 47% | ||
| Storm | #475569 | 71, 85, 105 | 215, 19%, 35% | ||
| Gunmetal | #334155 | 51, 65, 85 | 215, 25%, 27% | ||
| Dark Slate | #1E293B | 30, 41, 59 | 217, 33%, 17% | ||
| Midnight | #0F172A | 15, 23, 42 | 222, 47%, 11% |
Palabra clave CSS: gray
En CSS puedes escribirlo con la palabra clave gray.
Contraste del texto
Estas relaciones usan la fórmula de luminancia relativa de las WCAG.
Formas de usar el Gris
Fondos y bordes de la interfaz
Jerarquía tipográfica
Composiciones monocromáticas profesionales
Colores que combinan con Gris
Armonías de la rueda de color creadas a partir de #6B7280. Haz clic en una muestra para copiarla o abre el conjunto en la rueda de color.
Complementario
Abrir en la rueda de colorTonos opuestos para el máximo contraste y acentos llenos de energía.
Triádico
Abrir en la rueda de colorTres tonos equidistantes para sistemas coloridos y equilibrados.
Complementario dividido
Abrir en la rueda de colorUn color base y los dos vecinos de su complementario: contraste con menos tensión.