Neutral colors
37 neutral colors, sorted light to dark. The lightest is White at 100 percent lightness, the darkest is Black at 0 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| White | #FFFFFF | hsl(0, 0%, 100%) | oklch(100.00% 0.0000 0.00) | 1.00:1 | 19.14:1 |
| Snow | #FFFAFA | hsl(0, 100%, 99%) | oklch(98.89% 0.0053 17.25) | 1.03:1 | 18.50:1 |
| Ghost White | #F8F8FF | hsl(240, 100%, 99%) | oklch(98.11% 0.0093 286.23) | 1.06:1 | 18.10:1 |
| Fog | #F7F7FB | hsl(240, 33%, 98%) | oklch(97.73% 0.0053 286.30) | 1.07:1 | 17.91:1 |
| Off White | #FAF9F6 | hsl(45, 29%, 97%) | oklch(98.20% 0.0041 91.45) | 1.05:1 | 18.18:1 |
| White Smoke | #F5F5F5 | hsl(0, 0%, 96%) | oklch(97.02% 0.0000 0.00) | 1.09:1 | 17.55:1 |
| Old Lace | #FDF5E6 | hsl(39, 85%, 95%) | oklch(97.23% 0.0216 83.26) | 1.08:1 | 17.66:1 |
| Linen | #FAF0E6 | hsl(30, 67%, 94%) | oklch(96.02% 0.0171 67.62) | 1.12:1 | 17.01:1 |
| Gainsboro Light | #EEEEEE | hsl(0, 0%, 93%) | oklch(94.91% 0.0000 0.00) | 1.16:1 | 16.49:1 |
| Cornsilk | #FFF8DC | hsl(48, 100%, 93%) | oklch(97.73% 0.0373 95.44) | 1.07:1 | 17.96:1 |
| Cloud | #E9E9EE | hsl(240, 13%, 92%) | oklch(93.55% 0.0067 286.27) | 1.21:1 | 15.81:1 |
| Beige | #F5F5DC | hsl(60, 56%, 91%) | oklch(96.36% 0.0328 107.00) | 1.11:1 | 17.29:1 |
| Antique White | #FAEBD7 | hsl(34, 78%, 91%) | oklch(94.67% 0.0311 75.22) | 1.17:1 | 16.34:1 |
| Cream | #FFFDD0 | hsl(57, 100%, 91%) | oklch(98.44% 0.0580 105.31) | 1.04:1 | 18.42:1 |
| Platinum | #E5E4E2 | hsl(40, 5%, 89%) | oklch(91.91% 0.0029 84.56) | 1.27:1 | 15.06:1 |
| Eggshell | #F0EAD6 | hsl(46, 46%, 89%) | oklch(93.64% 0.0273 93.11) | 1.20:1 | 15.90:1 |
| Gainsboro | #DCDCDC | hsl(0, 0%, 86%) | oklch(89.45% 0.0000 0.00) | 1.37:1 | 13.95:1 |
| Light Gray | #D3D3D3 | hsl(0, 0%, 83%) | oklch(86.69% 0.0000 0.00) | 1.50:1 | 12.78:1 |
| Silver | #C0C0C0 | hsl(0, 0%, 75%) | oklch(80.78% 0.0000 0.00) | 1.82:1 | 10.52:1 |
| Ash Gray | #B2BEB5 | hsl(135, 8%, 72%) | oklch(78.96% 0.0182 153.48) | 1.92:1 | 9.96:1 |
| Dark Gray | #A9A9A9 | hsl(0, 0%, 66%) | oklch(73.48% 0.0000 0.00) | 2.35:1 | 8.14:1 |
| Stone Gray | #928E85 | hsl(42, 6%, 55%) | oklch(64.75% 0.0140 86.86) | 3.27:1 | 5.86:1 |
| Light Slate Gray | #778899 | hsl(210, 14%, 53%) | oklch(61.90% 0.0325 248.35) | 3.64:1 | 5.25:1 |
| Gray | #808080 | hsl(0, 0%, 50%) | oklch(59.99% 0.0000 0.00) | 3.95:1 | 4.85:1 |
| Slate Gray | #708090 | hsl(210, 13%, 50%) | oklch(59.25% 0.0309 248.35) | 4.05:1 | 4.72:1 |
| Xanadu | #738678 | hsl(136, 8%, 49%) | oklch(60.06% 0.0305 153.47) | 3.88:1 | 4.93:1 |
| Shadow | #8A795D | hsl(37, 19%, 45%) | oklch(58.43% 0.0456 80.02) | 4.22:1 | 4.53:1 |
| Dim Gray | #696969 | hsl(0, 0%, 41%) | oklch(52.08% 0.0000 0.00) | 5.49:1 | 3.49:1 |
| Graphite | #5B5B66 | hsl(240, 6%, 38%) | oklch(47.51% 0.0176 285.71) | 6.70:1 | 2.86:1 |
| Outer Space | #414A4C | hsl(191, 8%, 28%) | oklch(40.18% 0.0121 212.58) | 9.10:1 | 2.10:1 |
| Charcoal | #36454F | hsl(204, 19%, 26%) | oklch(38.14% 0.0258 237.54) | 9.90:1 | 1.93:1 |
| Dark Slate Gray | #2F4F4F | hsl(180, 25%, 25%) | oklch(40.30% 0.0377 195.76) | 8.93:1 | 2.14:1 |
| Black Olive | #3B3C36 | hsl(70, 5%, 22%) | oklch(35.31% 0.0102 114.60) | 11.14:1 | 1.72:1 |
| Jet | #343434 | hsl(0, 0%, 20%) | oklch(32.50% 0.0000 0.00) | 12.45:1 | 1.54:1 |
| Eerie Black | #1B1B1B | hsl(0, 0%, 11%) | oklch(22.21% 0.0000 0.00) | 17.22:1 | 1.11:1 |
| Ink Black | #0F0F12 | hsl(240, 9%, 6%) | oklch(16.98% 0.0062 285.72) | 19.14:1 | 1.00:1 |
| Black | #000000 | hsl(0, 0%, 0%) | oklch(0.00% 0.0000 0.00) | 21.00:1 | 1.10:1 |
Where neutral sits on the wheel
In HSL terms this family covers any hue at very low saturation. Neutrals are defined by what they lack. Most of the colors here are under 12 percent saturation, which is low enough that the hue is only visible when two neutrals sit next to each other.
Working with neutral in an interface
A neutral ramp carries the structure of an interface: text, borders, dividers, surfaces. Giving every neutral a slight tint of your brand hue makes a design feel coherent, and the tint stays invisible until it is compared with a true grey.
In this set, 10 of 37 neutral colors clear WCAG AA for normal text on a white background, and 27 of 37 clear it as text on ink black. The most saturated is Cream at an OKLCH chroma of 0.058, the most muted is White at 0.000. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Mixing warm and cool neutrals in one interface is the most common cause of a design that looks subtly wrong without anyone being able to say why. Pick one direction and keep it.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.