white
CSS keyword
On white 1:1 · Fail
On black 21:1 · AAA
Gray & neutral Colors
Names, HEX, RGB & Contrast
32 named gray & neutral colors, grouped by lightness. Click any value to copy it.
Light
19 colors
snow
CSS keyword
On white 1.03:1 · Fail
On black 20.31:1 · AAA
ghostwhite
CSS keyword
On white 1.06:1 · Fail
On black 19.86:1 · AAA
mintcream
CSS keyword
On white 1.02:1 · Fail
On black 20.57:1 · AAA
aliceblue
CSS keyword
On white 1.07:1 · Fail
On black 19.58:1 · AAA
azure
CSS keyword
On white 1.03:1 · Fail
On black 20.45:1 · AAA
floralwhite
CSS keyword
On white 1.04:1 · Fail
On black 20.18:1 · AAA
honeydew
CSS keyword
On white 1.04:1 · Fail
On black 20.27:1 · AAA
ivory
CSS keyword
On white 1.01:1 · Fail
On black 20.81:1 · AAA
lavenderblush
CSS keyword
On white 1.1:1 · Fail
On black 19.03:1 · AAA
seashell
CSS keyword
On white 1.07:1 · Fail
On black 19.55:1 · AAA
whitesmoke
CSS keyword
On white 1.09:1 · Fail
On black 19.26:1 · AAA
gainsboro
CSS keyword
On white 1.37:1 · Fail
On black 15.31:1 · AAA
lightgray
CSS keyword
On white 1.5:1 · Fail
On black 14.03:1 · AAA
lightgrey
CSS keyword
On white 1.5:1 · Fail
On black 14.03:1 · AAA
silver
CSS keyword
On white 1.82:1 · Fail
On black 11.54:1 · AAA
pale grey
On white 1.02:1 · Fail
On black 20.66:1 · AAA
very light pink
On white 1.08:1 · Fail
On black 19.47:1 · AAA
light grey
On white 1.39:1 · Fail
On black 15.13:1 · AAA
Mid-tone
7 colors
darkgray
CSS keyword
On white 2.35:1 · Fail
On black 8.94:1 · AAA
darkgrey
CSS keyword
On white 2.35:1 · Fail
On black 8.94:1 · AAA
gray
CSS keyword
On white 3.95:1 · AA Large
On black 5.32:1 · AA
grey
CSS keyword
On white 3.95:1 · AA Large
On black 5.32:1 · AA
dimgray
CSS keyword
On white 5.49:1 · AA
On black 3.83:1 · AA Large
dimgrey
CSS keyword
On white 5.49:1 · AA
On black 3.83:1 · AA Large
medium grey
On white 4.04:1 · AA Large
On black 5.2:1 · AA
Dark
6 colors
black
CSS keyword
On white 21:1 · AAA
On black 1:1 · Fail
charcoal grey
On white 10.36:1 · AAA
On black 2.03:1 · Fail
dark grey
On white 11.94:1 · AAA
On black 1.76:1 · Fail
charcoal
On white 11.89:1 · AAA
On black 1.77:1 · Fail
very dark brown
On white 19.79:1 · AAA
On black 1.06:1 · Fail
almost black
On white 19.58:1 · AAA
On black 1.07:1 · Fail
Copy the whole palette
Every gray & neutral color on this page, ready to paste into your project.
CSS
:root {
--white: #ffffff;
--snow: #fffafa;
--ghostwhite: #f8f8ff;
--mintcream: #f5fffa;
--aliceblue: #f0f8ff;
--azure: #f0ffff;
--floralwhite: #fffaf0;
--honeydew: #f0fff0;
--ivory: #fffff0;
--lavenderblush: #fff0f5;
--seashell: #fff5ee;
--whitesmoke: #f5f5f5;
--gainsboro: #dcdcdc;
--lightgray: #d3d3d3;
--lightgrey: #d3d3d3;
--silver: #c0c0c0;
--darkgray: #a9a9a9;
--darkgrey: #a9a9a9;
--gray: #808080;
--grey: #808080;
--dimgray: #696969;
--dimgrey: #696969;
--black: #000000;
--pale-grey: #fdfdfe;
--very-light-pink: #fff4f2;
--light-grey: #d8dcd6;
--medium-grey: #7d7f7c;
--charcoal-grey: #3c4142;
--dark-grey: #363737;
--charcoal: #343837;
--very-dark-brown: #1d0200;
--almost-black: #070d0d;
} SCSS
$white: #ffffff; $snow: #fffafa; $ghostwhite: #f8f8ff; $mintcream: #f5fffa; $aliceblue: #f0f8ff; $azure: #f0ffff; $floralwhite: #fffaf0; $honeydew: #f0fff0; $ivory: #fffff0; $lavenderblush: #fff0f5; $seashell: #fff5ee; $whitesmoke: #f5f5f5; $gainsboro: #dcdcdc; $lightgray: #d3d3d3; $lightgrey: #d3d3d3; $silver: #c0c0c0; $darkgray: #a9a9a9; $darkgrey: #a9a9a9; $gray: #808080; $grey: #808080; $dimgray: #696969; $dimgrey: #696969; $black: #000000; $pale-grey: #fdfdfe; $very-light-pink: #fff4f2; $light-grey: #d8dcd6; $medium-grey: #7d7f7c; $charcoal-grey: #3c4142; $dark-grey: #363737; $charcoal: #343837; $very-dark-brown: #1d0200; $almost-black: #070d0d;
Tailwind
theme: {
extend: {
colors: {
"white": "#ffffff",
"snow": "#fffafa",
"ghostwhite": "#f8f8ff",
"mintcream": "#f5fffa",
"aliceblue": "#f0f8ff",
"azure": "#f0ffff",
"floralwhite": "#fffaf0",
"honeydew": "#f0fff0",
"ivory": "#fffff0",
"lavenderblush": "#fff0f5",
"seashell": "#fff5ee",
"whitesmoke": "#f5f5f5",
"gainsboro": "#dcdcdc",
"lightgray": "#d3d3d3",
"lightgrey": "#d3d3d3",
"silver": "#c0c0c0",
"darkgray": "#a9a9a9",
"darkgrey": "#a9a9a9",
"gray": "#808080",
"grey": "#808080",
"dimgray": "#696969",
"dimgrey": "#696969",
"black": "#000000",
"pale-grey": "#fdfdfe",
"very-light-pink": "#fff4f2",
"light-grey": "#d8dcd6",
"medium-grey": "#7d7f7c",
"charcoal-grey": "#3c4142",
"dark-grey": "#363737",
"charcoal": "#343837",
"very-dark-brown": "#1d0200",
"almost-black": "#070d0d",
}
}
} Browse other color families
Copied
Gray & neutral color names
This family collects everything with saturation under 8%, plus the extremes of lightness — the greys, whites, blacks and near-neutrals. They carry no meaningful hue, which is exactly why interfaces are mostly built from them.
Using these colors
Neutrals do the structural work: backgrounds, borders, dividers, secondary text and disabled states. A palette with a well-chosen grey ramp looks more considered than one with more accent colours. Warm greys suit palettes built around orange and brown; cool greys suit blue and teal. Mixing the two in one interface is a common and visible mistake.
Contrast and accessibility
Greys are where most contrast failures happen, because designers reach for a mid grey to make secondary text look quieter. Anything lighter than roughly #767676 fails AA as body text on white. Use the ratios above rather than eyeballing it — muted text is the single most common accessibility bug in production interfaces.