Color guide · Light & dark neutrals

Gray Color

CSS gray is a middle gray with equal red, green and blue channels. It can organize a layout without introducing a strong hue, but middle gray is not automatically accessible text on every surface. Treat it as a measured color pair.

An equal-channel midtone for quiet structure#808080CSS keyword: gray

Gray color codes

HEX#808080
RGBrgb(128, 128, 128)
HSLhsl(0, 0%, 50.2%)
CSS keywordgray

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes gray interesting?

Gray and grey are equivalent CSS keywords for #808080. The equal channel values describe a neutral digital anchor; stone, paper and metal can have warm or cool undertones. Comparing real materials requires more than choosing a familiar neutral name.

Read the reference: CSS Color: named colors ↗

Things with gray tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #808080 match.

Illustrated placeholder · image coming later

Stone-inspired forms

A neutral stone illustration still needs pale faces and darker crevices.

Illustrated placeholder · image coming later

Printed paper

A gray printed area can reveal texture and appear different beside warmer paper.

Illustrated placeholder · image coming later

Neutral fabric

Woven surfaces create many small lightness changes rather than one continuous gray.

Ideas for using gray

01

Interfaces

Use gray for decorative separators, but check secondary text and disabled controls separately.

02

Games

Build a grayscale value study before choosing the final hues. This helps test silhouette and depth.

03

Photography layouts

A neutral surrounding area can reduce competition with photos, while captions still need a readable text color.

Watch out: #808080 on white falls below AA for ordinary text. Familiar gray captions can still be too faint.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring gray

Blueprint Paper

A navy structure with a pale sky-blue surface

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

5.32:1 · AA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare gray with another color →

Questions about gray

Can I use grey instead of gray in CSS?

Yes. Both CSS keywords resolve to #808080.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore light & dark neutrals →

#FFFFF0
Light & dark neutrals

Ivory

A near-white with a small warm shift

Explore color →
#FF69B4
Pink colors

Hot Pink

A bright pink for a deliberate focal point

Explore color →
#000080
Blue & blue-green colors

Navy

A very dark blue with a clear structural role

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide