Color Reference · Tailwind & CSS · Free

Color Codes — Tailwind & CSS Named Colors

Browse official Tailwind CSS, Google Material Design, Bootstrap 5, popular brand guidelines, and standard CSS named colors. Click any swatch to view HEX, RGB, HSL, CMYK conversions, WCAG contrast ratios, and color harmonies.

Pick colours from your own image →

Tailwind CSS Color Palette

22 color families across 11 balanced shades (50 to 950).

slate

50 100 200 300 400 500 600 700 800 900 950

gray

50 100 200 300 400 500 600 700 800 900 950

zinc

50 100 200 300 400 500 600 700 800 900 950

neutral

50 100 200 300 400 500 600 700 800 900 950

stone

50 100 200 300 400 500 600 700 800 900 950

red

50 100 200 300 400 500 600 700 800 900 950

orange

50 100 200 300 400 500 600 700 800 900 950

amber

50 100 200 300 400 500 600 700 800 900 950

yellow

50 100 200 300 400 500 600 700 800 900 950

lime

50 100 200 300 400 500 600 700 800 900 950

green

50 100 200 300 400 500 600 700 800 900 950

emerald

50 100 200 300 400 500 600 700 800 900 950

teal

50 100 200 300 400 500 600 700 800 900 950

cyan

50 100 200 300 400 500 600 700 800 900 950

sky

50 100 200 300 400 500 600 700 800 900 950

blue

50 100 200 300 400 500 600 700 800 900 950

indigo

50 100 200 300 400 500 600 700 800 900 950

violet

50 100 200 300 400 500 600 700 800 900 950

purple

50 100 200 300 400 500 600 700 800 900 950

fuchsia

50 100 200 300 400 500 600 700 800 900 950

pink

50 100 200 300 400 500 600 700 800 900 950

rose

50 100 200 300 400 500 600 700 800 900 950

Brand Colors

Official primary brand colors published in public brand guidelines. Click any swatch to view details.

Twitter (legacy) Blue#1da1f2

Brand names are trademarks of their owners. Values are the colours commonly cited from each brand's guidelines or logo and may differ from current official assets.

Material Design

Official Google Material Design 2014 color palette across 19 hues and 254 shades (including accent shades A100–A700).

red

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

pink

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

purple

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

deep-purple

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

indigo

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

blue

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

light-blue

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

cyan

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

teal

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

green

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

light-green

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

lime

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

yellow

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

amber

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

orange

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

deep-orange

50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

brown

50 100 200 300 400 500 600 700 800 900

grey

50 100 200 300 400 500 600 700 800 900

blue-grey

50 100 200 300 400 500 600 700 800 900

Bootstrap 5

Official Bootstrap 5.3 Sass color palette across 11 hues and 9 balanced shades (100 to 900).

blue

100 200 300 400 500 600 700 800 900

indigo

100 200 300 400 500 600 700 800 900

purple

100 200 300 400 500 600 700 800 900

pink

100 200 300 400 500 600 700 800 900

red

100 200 300 400 500 600 700 800 900

orange

100 200 300 400 500 600 700 800 900

yellow

100 200 300 400 500 600 700 800 900

green

100 200 300 400 500 600 700 800 900

teal

100 200 300 400 500 600 700 800 900

cyan

100 200 300 400 500 600 700 800 900

gray

100 200 300 400 500 600 700 800 900

CSS Named Colors

All 148 standard color names defined in CSS Color Module Level 4.

blanchedalmond#ffebcd

cornflowerblue#6495ed

darkolivegreen#556b2f

lightgoldenrodyellow#fafad2

lightslategray#778899

lightslategrey#778899

lightsteelblue#b0c4de

mediumaquamarine#66cdaa

mediumblue#0000cd

mediumorchid#ba55d3

mediumpurple#9370db

mediumseagreen#3cb371

mediumslateblue#7b68ee

mediumspringgreen#00fa9a

mediumturquoise#48d1cc

mediumvioletred#c71585

Have an image with custom colors?

Upload or drag any photo, screenshot, or graphic to sample pixel-exact colors with a 10× zoom loupe, extract dominant palettes, and copy CSS variables.

Pick colours from your own image →