ilovekit

Color Palette Reference

9 tools

Browse a full Tailwind-style color palette.

Runs in your browser — your files and text stay on your device

Browse eight Tailwind CSS color families (slate, red, orange, yellow, green, blue, purple and pink), each with shades from 50 to 900. Click a shade to copy its hex value into your project. It's a reference you can use whether or not your project uses Tailwind.

Picker & PaletteShade ScalePalette from ImageColor MixerGradient GeneratorContrast CheckerColor BlindnessNamed ColorsPalette Reference

How to use this tool

  1. 1Pick a color family.
  2. 2Browse its full 50-900 shade scale.
  3. 3Click any swatch to copy its hex code.

Frequently asked questions

Where do these values come from?

These are Tailwind CSS's default open-source color palette values (MIT licensed), reproduced here as a quick lookup reference.

Can I use these outside of Tailwind?

Yes — they're just hex values, usable in any CSS, design tool, or codebase regardless of whether you use Tailwind.

Guides

All guides →