Color Shades: Hex, RGB, and HSL Codes

What's on these pages

Each family page lists its named shades in order from lightest to darkest, with a live swatch, the color name, and three copy-ready codes: hex for CSS and design tools, RGB for anything that wants channel values, and HSL for when you need to adjust lightness or saturation by hand. Clicking any code copies it; clicking the swatch copies the hex.

Shades badged CSS are official CSS named colors — the name works directly in a stylesheet, and every browser resolves it to exactly the hex shown. The rest are conventional names whose values follow the most widely cited convention.

Picking a shade that works

Colors from the same family rarely clash, so the quickest way to build a working palette is to take a light, a mid, and a dark value from one page and use a second family only for accents. If you need a color to sit behind text, choose from the top of a list and check the contrast; if you need it to carry a heading or a button, take it from the middle rather than the extremes.

Watch the hue drift at the ends of each family. The darkest reds have shifted toward brown, the darkest yellows toward olive, and the palest pinks toward white — two shades from opposite ends of the same page can look like they come from different palettes entirely.

Why is it free?

FreeToGenerate.com keeps every tool genuinely free. These pages are static lists of color values rendered in your browser — nothing to install, no account, and no premium tier holding back half the palette. Copy as many codes as you need, as often as you need.