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
⌘⇧CCopy output
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
- 1Pick a base color using the color picker or enter a hex code.
- 2Select a color scheme (analogous, complementary, triadic, etc.).
- 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.
