Everyday neutralsQuiet structure
Gray and White Color Combination
A mid grey against white creates structure without shouting: dividers, surfaces and secondary text all sit comfortably between the two.
Hex codes #808080 and #FFFFFF — a quiet structure pair with a 3.95:1 contrast ratio between the two colors.
Values for this combination
- RGB
- rgb(128, 128, 128)
- HSL
- hsl(0, 0%, 50%)
- Hex
- #808080
- RGB
- rgb(255, 255, 255)
- HSL
- hsl(0, 0%, 100%)
- Hex
- #FFFFFF
Contrast between Gray and White
Contrast ratio 3.95:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.
White text on a Gray surface, at 3.95:1.
Gray text on a White surface, at 3.95:1.
Where this pair works
- Dashboard surfaces
- Documentation
- Minimal websites
Give Gray (#808080) roughly 60% of the surface, White (#FFFFFF) about 30%, and leave the last 10% for the neutral below. That split is what keeps a two-color combination from turning into a fight.
A five-color set from this pair
Gray and White as a working palette: a pale tint of the lighter color for backgrounds, both colors as they are, a deep shade of the darker color for text and a neutral for everything in between.
- Pale tint#efebebbackgrounds and large surfaces · closest to Isabelline
- Primary#808080the dominant color · closest to Gray
- Secondary#FFFFFFthe accent color · closest to White
- Deep shade#292323text, borders and icons · closest to RaisinBlack
- Neutral#f6f4f4dividers and quiet surfaces · closest to WhiteSmoke
Explore Gray and White on their own
Gray
More color combinations
Black and White
#000000 · #FFFFFFMaximum clarityOpen combinationNavy and White
#000080 · #FFFFFFCorporate and calmOpen combinationNavy and Gray
#000080 · #808080Layered neutralsOpen combinationWhite and Gold
#FFFFFF · #FFD700Festive eleganceOpen combinationTeal and Gray
#008080 · #808080Modern technicalOpen combinationDenim and White
#1560BD · #FFFFFFEveryday denimOpen combinationGray and White are a quiet structure pair: a mid grey against white creates structure without shouting: dividers, surfaces and secondary text all sit comfortably between the two.
Frequently asked questions
Yes — this pair is used for dashboard surfaces, documentation, minimal websites. The two colors measure 3.95:1 against each other, which is enough for large text and graphics, but not for body text.
Good to know
- Every value on this page is calculated from #808080 and #FFFFFF — nothing is hardcoded.
- Build a longer palette out of Gray or White in the palette generator, or test your own text pair in the contrast checker.
Put this combination to work
Turn Gray and White into a full palette, a gradient or a set of shades — or check the pair against WCAG.
