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 |