Loading...

Color Shades

Browse hundreds of named color shades organized by family. Each shade includes its hex code so you can copy it straight into your project. From the softest baby blue to the deepest midnight navy — find the exact shade you need.

Browse by Color Family

About Color Shades

What is a color shade?

A color shade is a specific variation of a base color, created by adding black (for darker shades), white (for lighter tints), or gray (for tones). Every color has dozens of named shades — for example, blue ranges from barely-there Alice Blue (#F0F8FF) all the way to near-black Prussian Blue (#003153).

Named color shades vs. hex codes

Named shades give designers and developers a shared vocabulary. Instead of saying "a medium dark blue," you can say "Cobalt Blue (#0047AB)." CSS defines 147 named colors, but the design world recognizes hundreds more with widely accepted names.

How to use this tool

Click any color family above to browse all its named shades. On each shade page, you can type in your own hex code to find the closest named shade — useful when you have a color from a photo or brand guide and need to identify it.

Building with color shades

A good design palette typically uses 2-3 shades from the same family — a light shade for backgrounds, a mid shade for primary elements, and a dark shade for text or borders. This creates visual hierarchy while keeping the design cohesive.

Popular Shades