Color Families: Color Codes by Color Group

Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.

Reds 42 red color codes with HEX, RGB and HSL values

Oranges 46 orange color codes with HEX, RGB and HSL values

Yellows 50 yellow color codes with HEX, RGB and HSL values

Greens 114 green color codes with HEX, RGB and HSL values

Cyans & Teals 59 cyan color codes with HEX, RGB and HSL values

Blues 108 blue color codes with HEX, RGB and HSL values

Purples 56 purple color codes with HEX, RGB and HSL values

Pinks 79 pink color codes with HEX, RGB and HSL values

Browns 20 brown color codes with HEX, RGB and HSL values

Grays 32 gray color codes with HEX, RGB and HSL values

Whites 54 white color codes with HEX, RGB and HSL values

Blacks 35 black color codes with HEX, RGB and HSL values

Find colors by family

Each family page collects the color codes that belong to one color group: the named CSS colors, the matching shades from the Tailwind CSS and Bootstrap palettes, and the web-safe colors of that group. Every color shows its HEX and RGB value and can be copied with one click.

How colors are grouped

Colors are sorted into families by their hue, saturation and lightness (HSL). Very light colors count as whites, very dark ones as blacks, and colors with almost no saturation as grays. Dark oranges and reds become browns, and the rest are grouped by hue around the color wheel. Borderline colors such as coral or turquoise land in the family closest to their hue, so you may find them under a neighboring group.

Color combinations

Every family page also has six five-color schemes built with classic color-wheel rules: monochromatic, complementary, analogous, triadic, soft and high contrast. Open any of them in the palette generator to tweak, lock and export the colors.

More color tools

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK)

Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.

Color Palette Generator for Websites

Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.

Tints & Shades Generator (50–950 Color Scale)

Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.

Color Contrast Checker (WCAG AA & AAA)

Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.

CSS Color Names: All 148 Named Colors with HEX Codes

All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.

Popular Colors: Tailwind CSS and Bootstrap 5 Palettes

The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.

Web Safe Colors: The 216-Color Palette

The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.