Gray color meaning: symbolism, psychology and how to use it
#808080
oklch(0.6 0 0)
What gray symbolizes
Gray sits between black and white and carries the meanings of the in-between: neutrality, balance, calm, practicality and restraint. It is the colour of business suits, concrete, steel and fog. It can be read as sophisticated and timeless, or as dull, indecisive and lifeless: "gray mood", "gray area", the "gray man in a gray suit". Its most famous quality is that it asks for no attention.
That quietness is what makes gray indispensable. Almost every interface, brand and room is built on neutrals that let a few other colours speak. A design with a well-made grey scale looks calm and organised even before any accent colour is added, and a design with a poor one looks messy whatever the accent is.
Gray color psychology: what the research says
Gray has hardly been studied in its own right, and most claims in the colour-psychology literature are secondary: grey is described as neutral, serious and professional, often with a connotation of low energy or sadness. These are better thought of as common associations. A low-saturation palette tends to be read as calm or formal, and a large block of mid grey with no accent can be read as flat. What the design around it does decides the outcome.
One good perceptual fact is that grey is not fixed: it takes on the colour of its surroundings. The same mid grey looks warmer next to blue and cooler next to orange, a simultaneous contrast effect studied since the nineteenth century. This is why designers tint their greys on purpose, and why a grey that looked neutral in isolation can seem tinted in context.
There is also an accessibility angle. Light grey text on a white background is one of the most common causes of poor readability on the web, partly because grey feels subtle and refined. Subtle should never go below the contrast thresholds, and that is something to measure, not eyeball.
Cultural meanings of gray
- Western countries. Business and formality (the grey suit), neutrality, ageing (grey hair) and gloom (grey skies, "gray mood"). "Gray area" means ambiguity.
- France and Europe. The phrase "éminence grise" (grey eminence) describes a powerful figure working behind the scenes.
- Japan. Subtle greys are a prized part of the traditional palette: the Edo-period saying about "forty-eight browns and hundred greys" celebrates the large number of nuanced dark neutrals developed in that period.
- Motorsport. Silver is the traditional colour of German racing cars, nicknamed the "Silver Arrows", and silver-grey remains a signature of Mercedes-Benz racing.
- Technology. Grey, silver and "space gray" are the default finishes for laptops, phones and devices, standing for neutrality and precision.
Gray in branding and marketing
Gray is the colour of understatement. It is used by brands that want to look professional, modern and calm without making a loud statement: technology, finance, architecture, consulting and industrial products. Apple's metallic and space-gray finishes are a familiar example of grey as a premium neutral.
As a lead colour, gray often needs help. A gray-only logo can feel generic, so many brands add a single accent, a distinctive typeface or a texture. As a supporting colour, gray is ideal: for text, backgrounds, dividers and secondary information.
Its tone matters. Charcoal and slate are serious and dependable, silver is cool and technological, warm greys such as greige and stone are softer and more residential, while pale grey is clean and minimal. The "cold corporate grey" of older websites is an example of what to avoid unless you really want that look.
Gray in UI and web design
Gray carries the majority of UI: text hierarchy, borders, dividers, surfaces, disabled states and placeholders. A good grey scale has even lightness steps from near white to near black, which is exactly what OKLCH is good at, since equal L steps look equal. Generate the ramp with a constant small chroma and a single hue so every step is part of the same family.
Contrast needs particular care with grey. CSS gray (#808080) has a WCAG ratio of about 3.9:1 on white, which fails the 4.5:1 AA requirement for normal text, although it passes the 3:1 required for non-text UI components such as borders and icons. For secondary text on white, use a darker grey with OKLCH lightness of about 0.5 or lower. Disabled controls are exempt from the contrast requirements, but should still be recognisable.
Pure greys can look lifeless next to saturated colours. A small amount of chroma, around 0.005 to 0.02 at your brand hue, makes the neutrals harmonise with the rest. In dark mode, use greys of low chroma with stepped lightness for surface elevation instead of shadows. Keep text greys light enough, since dark mode makes mid-grey text on dark grey surfaces fail easily.
Gray hex code and color values
- HEX
- #808080
- RGB
- rgb(128 128 128)
- HSL
- hsl(0 0% 50%)
- OKLCH
- oklch(0.6 0 0)
This is the standard CSS value for gray. See the full set of conversions, tints, shades and harmonies on its #808080 color page.
CSS custom property
:root {
--color-gray: #808080; /* fallback */
}
@supports (color: oklch(0 0 0)) {
:root {
--color-gray: oklch(0.6 0 0);
}
}Shades and tones of gray
Light greys (silver, gainsboro, platinum, cloud) are airy, clean and unobtrusive. Mid greys (stone, ash, slate) are balanced and practical, and the most challenging for contrast. Dark greys (charcoal, graphite, gunmetal) are serious, strong and modern, and they slide into black without a clear border.
Undertone is the big variable. Blue-grey (slate, steel) is cool and technical; green-grey (sage-grey, moss-grey) is organic and calm; warm grey (taupe, greige, stone) is gentle and domestic; neutral grey is the most graphic. The gray family in this site's colour data is the largest by far, because it includes every colour with very low chroma, including many pale tinted whites and near-blacks.
Popular named shades, light to dark
- FFFFFF
White
- FFFFF0
Ivory
- F5FFFA
Mint Cream
- F0FFFF
Vapour
- FFFAF0
Floral White
- F0FFF0
Honeydew
- F8F8FF
Ghost White
- E0FFFF
Light Cyan
- FFF5EE
Seashell
- F0F8FF
Alice Blue
- FDF5E6
Old Lace
- F5F5F5
White Smoke
- F5F5DC
Holy White
- FAF0E6
Linen
- FAEBD7
Milk Tooth
- FFE4E1
Misty Rose
- E6E6FA
Cyber Lavender
- DCDCDC
Gainsboro
- D3D3D3
Pinball
- C0C0C0
Silver
- 808080
Grey
- 708090
Chain Gang Grey
- 696969
Dim Grey
- 000000
Black
The colour library has 9,677 named colours in the gray (neutral) family. Browse all gray colors.
Contrast and accessibility
Gray (#808080) has a WCAG contrast ratio of 3.94:1 against white and 5.31:1 against black. Normal-size text needs 4.5:1 for level AA and 3:1 is enough for large text and UI components.
Test any other combination in the contrast checker.
Gray color palettes
Colors that go with gray
Gray has no hue of its own, so what matters when pairing is the tint and the lightness. Gray with a single saturated colour is the standard way to make that colour pop: blue, teal, orange, red and pink all gain from a grey surround. Gray with white and black forms the classic neutral triad.
Cool greys pair naturally with blue, purple and teal. Warm greys pair with brown, orange, coral and gold. Gray with yellow is a familiar modern combination, both cheerful and controlled. Gray with pastel colours is soft and contemporary, and gray with deep greens or navy is conservative and professional. To avoid a flat result, vary the lightness between neighbouring greys visibly, and use at least one colour that contains real chroma.
Frequently asked questions
- What does the color gray symbolize?
- Gray is associated with neutrality, balance, practicality and restraint, and also with dullness, ageing and indecision. It is the colour of business suits, concrete and technology finishes.
- What is the hex code for gray?
- CSS gray is #808080: rgb(128 128 128), hsl(0 0% 50%) and oklch(0.6 0 0). It is a mid grey with about 3.9:1 contrast against white, so it is better for borders than body text.
- Is gray a good color for a logo?
- Yes for professional, technical or minimalist brands, especially with one accent colour. On its own it can look generic.
- What colors go with gray?
- Nearly everything. Blue, teal, orange, yellow and pink stand out on grey, and white and black complete a neutral palette.
- What is the difference between gray and grey?
- They are spelling variants of the same word, with gray more common in American English and grey in British English. CSS accepts both spellings.