Neutral Color Picker
Pick a neutral color like gray, beige, taupe or slate and copy any shade of it as HEX, RGB or HSL.
Click any shade to select it, or use Copy HEX for the selected color.
How to use the Neutral Color Picker
- Pick a neutral family: gray, taupe, beige, slate or near-black, each as a full ramp.
- Click a step to select the exact tone you need, from a barely-there tint to a deep shade.
- Copy the HEX, with RGB and HSL alongside, for backgrounds, text or borders.
- Pair it with one bright accent from the Color Picker and check legibility in the Contrast Checker.
Warm and cool neutral colors
Not all neutrals are the same temperature, and mixing the two by accident is what makes a palette feel off. Warm neutrals lean toward yellow and brown; cool ones lean toward blue. Here is a quick reference:
What are neutral colors?
Neutral colors are the low-saturation tones that carry a design without fighting it: black, white, the grays between them, and muted warms like beige and taupe. Strictly, a true neutral has no saturation at all, but in practice any color desaturated enough to read as a calm background counts. They are the backbone of almost every interface and brand.
Why most of a good palette is neutral
New designers tend to reach for too much color, and neutrals are the fix. The strongest palettes are mostly neutral with just one or two saturated accents, because that contrast is what makes the accent register at all. A useful rule of thumb is to let neutrals do roughly nine tenths of the work and save bright color for the things that must be noticed.
How to build a neutral scale that works
- Pick a base gray, then build lighter and darker steps for backgrounds, cards, borders and text.
- Give the whole scale a slight warm or cool tint so it feels intentional rather than flat gray.
- Keep body text and its background well clear of the WCAG contrast minimum of 4.5 to 1.
- Generate the full ramp in one step with the Shades Generator.
No. Warm neutrals like beige and taupe, and cool ones like slate, count too, since they are low in saturation.
They keep an interface calm and readable, so the few saturated colors you add draw the eye where you want.
A warm gray has a hint of yellow or brown; a cool gray leans slightly blue. The undertone sets the whole mood of a design.
Light gray around #F5F5F7, mid gray near #9AA0A6, slate about #64748B and charcoal near #2E2E33 are all widely used.