DevLocal only

Color Palette Generator

Generate design system shade scales (50–950) with 6 algorithms, export to CSS/Tailwind/JSON tokens, SVG/Figma.

color paletteshade scaletailwind colorsdesign systemcss variables
Your data stays in your browser — nothing is uploaded.
R
G
B
0.00
11
/* CSS Variables */
:root {
  --indigo-50: #f2f2fd;
  --indigo-100: #cfcdf8;
  --indigo-200: #aba8f3;
  --indigo-300: #8882ed;
  --indigo-400: #645de8;
  --indigo-500: #4138e3;
  --indigo-550: #271ed3;
  --indigo-650: #2019ae;
  --indigo-750: #191489;
  --indigo-850: #120e64;
  --indigo-950: #0c093e;
}
Related:
💡

What is Color Palette Generator?

Color Palette Generator creates beautiful, harmonious color palettes from any base color. Choose from 6 color theory schemes: analogous, complementary, triadic, split-complementary, tetradic, and monochromatic. Export as CSS variables.

🚀

How it Helps

  • Generate professional color palettes based on proven color theory.
  • Preview colors in an interactive strip with hover-to-expand.
  • Export palettes as CSS custom properties for immediate use in projects.
📖

Usage Guide

  1. 1Pick a base color using the color picker or enter a hex code.
  2. 2Select a color scheme (analogous, complementary, triadic, etc.).
  3. 3Click any color to copy its hex value, or export all as CSS variables.

Frequently Asked Questions

Six schemes based on color theory: Analogous, Complementary, Triadic, Split-Complementary, Tetradic, and Monochromatic.
Yes, for Analogous and Monochromatic schemes you can set the count from 3 to 10.
Yes, click 'Copy as CSS Variables' to get a ready-to-use :root CSS block.