Color Palette Studio

100% in your browser · data never leaves your device

Pick a base color to get HEX / RGB / HSL values, a 10-step shade palette, WCAG contrast checks against white and black, and one-click export to CSS variables or Tailwind config. Everything runs locally in your browser.

The quick brown fox jumps over the lazy dog.

How to use

  1. Pick a base color with the picker or type a HEX value.
  2. Review HEX / RGB / HSL values and the 10-step shade palette.
  3. Check WCAG contrast against white and black.
  4. Export to CSS variables or a Tailwind config.

Where it applies

  • Building a consistent UI palette from one brand color.
  • Checking accessibility contrast before shipping a design.
  • Dropping tokens straight into a CSS or Tailwind project.