Gray HEX Code
The HEX code for gray is #808080. Gray is created when red, green, and blue values are equal, producing a neutral tone. Gray is essential in UI design for backgrounds, borders, text, and creating visual hierarchy without distraction.
Gray Color Values
| Format | Value |
|---|---|
| HEX | #808080 |
| RGB | rgb(128, 128, 128) |
| HSL | hsl(0, 0%, 50%) |
| CMYK | C:0 M:0 Y:0 K:50 |
Gray Scale Variations
| Shade | HEX | RGB | Description |
|---|---|---|---|
| White Smoke | #F5F5F5 | 245 | Very light |
| Gainsboro | #DCDCDC | 220 | Light gray |
| Light Gray | #D3D3D3 | 211 | Soft gray |
| Silver | #C0C0C0 | 192 | Medium light |
| Dark Gray | #A9A9A9 | 169 | Medium dark |
| Gray | #808080 | 128 | True middle |
| Dim Gray | #696969 | 105 | Dark |
| Charcoal | #36454F | - | Very dark |
Gray in UI Design
Gray is the workhorse of interface design:
``css
:root {
/* Text grays */
--text-primary: #1F2937;
--text-secondary: #6B7280;
--text-muted: #9CA3AF;
/* Background grays */
--bg-light: #F9FAFB;
--bg-muted: #F3F4F6;
/* Border grays */
--border-light: #E5E7EB;
--border-default: #D1D5DB;
}
`
Tailwind Gray Scale
| Level | HEX | Use Case |
|---|---|---|
| 50 | #F9FAFB | Subtle backgrounds |
| 100 | #F3F4F6 | Page backgrounds |
| 200 | #E5E7EB | Borders, dividers |
| 300 | #D1D5DB | Disabled text |
| 400 | #9CA3AF | Placeholder text |
| 500 | #6B7280 | Secondary text |
| 600 | #4B5563 | Icons |
| 700 | #374151 | Primary text |
| 800 | #1F2937 | Headings |
| 900 | #111827 | Near black |
Warm vs Cool Grays
| Type | Undertone | HEX Example | Use |
|---|---|---|---|
| Warm Gray | Red/yellow | #78716C | Cozy, natural |
| Cool Gray | Blue | #6B7280 | Modern, tech |
| True Gray | None | #808080 | Neutral |
Gray Spelling: Gray vs Grey
Both spellings are correct:
Gray: American English- Grey: British English
In CSS, use "gray" for keywords (e.g., gray, darkgray).Gray Accessibility
Text Color Background Contrast WCAG #6B7280 #FFFFFF 5.0:1 AA #4B5563 #FFFFFF 7.5:1 AAA #9CA3AF #FFFFFF 3.0:1 AA Large
Use darker grays (#4B5563 or darker) for body text on white backgrounds.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
Step Colour Contrast on white Safe for 50 #F5F9FF 1.06:1 backgrounds and fills 100 #EBF3FE 1.12:1 backgrounds and fills 200 #CEE0FD 1.34:1 backgrounds and fills 300 #B1CDFB 1.62:1 backgrounds and fills 400 #76A8F9 2.40:1 backgrounds and fills 500 #3B82F6 3.68:1 large text, borders 600 #326FD1 4.85:1 body text on white 700 #295BAC 6.59:1 body text on white 800 #204887 8.98:1 body text on white 900 #183462 12.31:1 body text on white
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.