Tailwind Color Palette

Size

Width

Height

Space new variant

Presets

Scale

Base color

Sits exactly on step 500.

Name in code

Used for CSS variables and Tailwind, for example brand.

Advanced

Lightest step (50)

Darkest step (950)

Reduce saturation at the ends

Hue shift

Display

Labels

Show contrast

Shows the WCAG contrast ratio of the label on each color, AA from 4.5:1, AAA from 7:1.

Shortcuts pause while you type in a field.