About Color Palette Generator

The Color Palette Generator derives harmonious color sets from any seed hex color using color theory relationships — complementary, analogous, triadic, split-complementary, and tetradic. It also generates tints-and-shades scales and Tailwind-style 50–950 numeric scales so you can build a complete design system token set from a single brand color.

Generated palettes can be exported instantly as CSS custom properties, a Tailwind config object, Sass variables, or plain JSON — all computed in-browser using perceptually uniform color spaces for smooth, professional-looking scales.

Common Use Cases

Deriving a full brand color scale from a single primary hex code for a new project
Finding accent and secondary colors that are harmonically related to your primary brand color
Generating Tailwind CSS token configs (50–950 scale) without manual HSL tweaking
Exporting palette data as JSON for use in design tokens or a Figma plugin

How to Use

Pick a seed color using the color picker or type a hex code directly into the input field
Choose a view mode: Harmonies for color theory relationships, Tints & Shades for a light-to-dark scale, or Tailwind Scale for a 50–950 numeric ramp
Click any swatch to copy its hex value to your clipboard
Use the Export panel to copy the palette as CSS variables, Tailwind config, Sass, or JSON

Frequently Asked Questions

What is a complementary color and why does it work well as an accent?

A complementary color sits directly opposite your seed color on the color wheel (180° apart in HSL). Because they have maximum hue contrast, pairing them creates vibrant, eye-catching combinations ideal for call-to-action buttons, highlights, or accent elements — while remaining visually balanced because they share the same lightness and saturation.

What color space does the scale generation use?

The tints, shades, and Tailwind scales are interpolated in the Oklab/Oklch perceptually uniform color space via the chroma.js library. This avoids the muddy mid-tones you get from simple RGB or HSL interpolation, producing scales where each step looks equally spaced in perceived brightness — similar to how Tailwind's official palette was designed.

How do I use the CSS variables export in my project?

Click CSS Vars in the Export panel and then Copy. Paste the output block into your root stylesheet — it defines variables like --color-50 through --color-950. Reference them anywhere in your CSS with var(--color-500). This pattern is compatible with any CSS framework including plain CSS, SCSS, and CSS Modules.