Palette Generator
Generate harmonious palettes from a base color — live swatches with names, shade/tint ramps, and CSS / SCSS / JSON / Tailwind export.
About this ToolHow it works, benefits & use casesTap to collapse
Feed the Palette Generator a single base color and it builds a coordinated set around it using color-theory harmonies. Pick analogous, complementary, split-complementary, triadic, tetradic, or monochromatic and the swatches recompute instantly, each labelled with its exact or nearest CSS color name and rendered with the most legible overlay text. Below the harmony you also get full shade (toward black) and tint (toward white) ramps you can click to re-base the palette. Set the base from the native color picker, type any HEX/RGB/HSL value, hit Random base, or use the screen Eyedropper where supported. When you like the result, export it as CSS custom properties, SCSS variables, a JSON array, a plain HEX array, or Tailwind tokens for both v3 (config) and v4 (@theme). It all runs in your browser, free, and the palette is captured in a shareable URL.
How to Use
- 1Choose a scheme from the Harmony dropdown (Analogous, Complementary, Split-complementary, Triadic, Tetradic, or Monochromatic).
- 2Set your base color: use the swatch picker, type a HEX/RGB/HSL value in the Base color field, click "Random base", or use the Eyedropper to sample from your screen.
- 3Review the generated swatches — click any one to copy its HEX value.
- 4Click a step in the Shades or Tints ramp to make that darker/lighter variant your new base.
- 5Pick an export format (CSS variables, SCSS, JSON, HEX array, Tailwind v3, or Tailwind v4).
- 6Copy or download the generated tokens, or share the page URL to hand the palette to a teammate.
Key Benefits
- Six color-theory harmonies generated from one base color
- Every swatch is labelled with its exact or nearest CSS color name
- Shade and tint ramps you can click to re-base the whole palette
- Set the base by picker, typed value, Random, or screen Eyedropper
- Exports CSS variables, SCSS, JSON, HEX array, and Tailwind v3 + v4 tokens
- Overlay text auto-switches to black or white for legibility on each swatch
- Shareable URL captures the base and scheme; nothing is uploaded
Common Use Cases
- Spinning up a brand palette from a single primary color
- Generating ready-to-paste CSS custom properties or Tailwind color tokens
- Building shade/tint scales for a design system from one base hue
- Exploring complementary and triadic schemes for an illustration or UI
- Naming an arbitrary HEX value via the nearest CSS color label
Base color
Shades (→ black)
Tints (→ white)
Live · copy or download
:root {
--color-1: #3B82F6;
--color-2: #3BCDF6;
--color-3: #3BA7F6;
--color-4: #3B82F6;
--color-5: #3B5DF6;
--color-6: #3F3BF6;
}Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Color Scheme GeneratorBuild colour harmonies with full 50–950 ramps, a WCAG accessibility matrix, and a live UI preview — export CSS, Tailwind, SCSS, JSON or SVG
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- Tailwind Color Palette GeneratorTurn any base color into a full 50-950 Tailwind scale with live swatches and WCAG contrast, then export for Tailwind v4 (@theme), v3 config, CSS variables, SCSS, or JSON
- CSS Variables GeneratorDesign CSS custom properties as typed tokens with light & dark values, scale generators, and a live preview — export :root CSS, SCSS, Tailwind v4 @theme, or a JS token map
- Changelog GeneratorGenerate changelog from Git commit history
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
Six: analogous, complementary, split-complementary, triadic, tetradic, and monochromatic. Each is derived from your base color using standard color-wheel relationships, so analogous returns neighbouring hues, complementary returns the opposite, and monochromatic varies lightness and saturation of the same hue.
Shades progressively darken your base toward black and tints lighten it toward white, giving you a usable scale around the chosen color. Clicking any step in either ramp sets that variant as the new base, so you can quickly explore the palette from a lighter or darker anchor.