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 RGBrgb(128, 128, 128) HSLhsl(0, 0%, 50%) CMYKC:0 M:0 Y:0 K:50
Gray Scale Variations
ShadeHEXRGBDescription White Smoke#F5F5F5245Very light Gainsboro#DCDCDC220Light gray Light Gray#D3D3D3211Soft gray Silver#C0C0C0192Medium light Dark Gray#A9A9A9169Medium dark Gray#808080128True middle Dim Gray#696969105Dark | 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#F9FAFBSubtle backgrounds
100#F3F4F6Page backgrounds
200#E5E7EBBorders, dividers
300#D1D5DBDisabled text
400#9CA3AFPlaceholder text
500#6B7280Secondary text
600#4B5563Icons
700#374151Primary text
800#1F2937Headings
900#111827Near black
Warm vs Cool Grays
TypeUndertoneHEX ExampleUse
Warm GrayRed/yellow#78716CCozy, natural
Cool GrayBlue#6B7280Modern, 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#FFFFFF5.0:1AA #4B5563#FFFFFF7.5:1AAA | #9CA3AF | #FFFFFF | 3.0:1 | AA Large |
Use darker grays (#4B5563 or darker) for body text on white backgrounds.