Tailwind Palette Generator

Generate a Tailwind color scale from one color.

Processed locally in your browser

Base color

Name

#f5fff0

100

#ebffe0

200

#cfffb8

300

#b1ff8a

400

#8bff52

500

#66ff1a

600

#50f000

700

#42c700

800

#359e00

900

#297a00

950

#194d00

tailwind.config

colors: {
  brand: {
      50: '#f5fff0',
      100: '#ebffe0',
      200: '#cfffb8',
      300: '#b1ff8a',
      400: '#8bff52',
      500: '#66ff1a',
      600: '#50f000',
      700: '#42c700',
      800: '#359e00',
      900: '#297a00',
      950: '#194d00',
  },
}

Related tools

HEX ↔ RGB Converter

Convert colors between HEX, RGB and HSL.

Color Picker

Pick colors and copy HEX, RGB and HSL values.

Gradient Generator

Create CSS linear and radial gradients visually.

Contrast Checker (WCAG)

Check color contrast ratios against WCAG AA and AAA.