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

Pick a color and get an instant palette, extract dominant colors from a photo, mix two colors, build gradients, check WCAG contrast, simulate color blindness, or browse a reference of named and Tailwind-style colors — all computed locally as you adjust each control.

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 →