Color Palette Generator
hsl(239, 84%, 67%)
7 colors · Monochromatic
:root {
  --palette-1: #d9dafc;
  --palette-2: #a1a3f7;
  --palette-3: #696bf2;
  --palette-4: #6366f1;
  --palette-5: #2c2fed;
  --palette-6: #1114c5;
  --palette-7: #04078f;
}

Color Palette Generator — Harmony-Based Color Schemes

Share

About this tool

Free Color Palette & Harmony Generator

Color Palette Generator creates production-ready color schemes from any base color using eight mathematically precise harmony algorithms — monochromatic, analogous, complementary, split-complementary, triadic, tetradic, shades, and tints. Color harmony is the science of selecting colors that feel intentionally related rather than randomly chosen: the harmony type determines the mathematical relationship between colors on the HSL (Hue-Saturation-Lightness) color wheel. This tool performs all color math in HSL space — which closely mirrors how human vision perceives color relationships — rather than the less perceptually accurate RGB or hex space. Pick any base color using the interactive color picker or by typing a hex code, then select a harmony type to instantly generate a complete palette. Every swatch in the palette is click-to-copy for fast workflow. The export panel outputs your palette in five formats: CSS custom properties for a :root variable block, a Tailwind CSS config colors object with numeric shades, a plain hex list, HSL values, and SCSS variables — covering every common implementation format for design tokens in web projects. The entire tool runs in your browser with no server requests.

Features

  • 8 harmony algorithms: monochromatic, analogous, complementary, split-complementary, triadic, tetradic, shades, tints
  • Live color picker with hex input — type any valid hex code directly
  • HSL values displayed for each swatch — see hue, saturation, and lightness at a glance
  • Click any swatch to copy its hex value to clipboard with visual confirmation
  • Export as CSS custom properties (:root variable block)
  • Export as Tailwind config colors object with numeric shades (100–900)
  • Export as plain hex list, HSL value list, or SCSS variable declarations
  • All color math computed in HSL space for perceptually accurate harmony
  • Base color highlighted with a ring in the palette for easy identification
  • 100% browser-based — no server requests, works offline after page load

How to Use

Click the color picker or type a hex value directly into the input field next to it to set your base color — the # prefix is optional. Then select one of the eight harmony types from the dropdown: Monochromatic generates a single-hue scale at varying lightness levels; Analogous picks three to five adjacent hues for a natural flowing palette; Complementary adds the opposite hue for high-contrast accent potential; Split-Complementary adds the two hues flanking the complement for a softer high-contrast option; Triadic picks three evenly spaced hues for vibrant variety; Tetradic (Rectangle) picks four hues forming a rectangle on the wheel; Shades generates progressively darker variants of your base color; Tints generates progressively lighter variants. The palette generates instantly when you change either the base color or the harmony type — no button press needed. Hover over any color swatch to see its hex code and HSL values in a tooltip. Click any swatch to copy its hex value to your clipboard — a checkmark icon confirms the copy. Scroll down to the export panel and click the tab for your target format: CSS Vars outputs a :root { } block, Tailwind outputs a theme.extend.colors object, Hex outputs a plain list of hex codes, HSL outputs HSL function values, and SCSS outputs Sass variable declarations. Click Copy All to copy the complete export block in that format.

Common Use Cases

◉
Brand Identity
Generate a complete brand color system from a single primary brand hex code. Use the Shades harmony to produce a 9-stop scale from light 100 to dark 900, then export as a Tailwind config object to use your brand colors as first-class utility classes throughout your product. The monochromatic harmony gives you a coordinated set of tones for backgrounds, borders, and text without introducing a conflicting second hue.
▦
UI Design
Create the full color vocabulary for a UI component library — primary, secondary, success, warning, error, and neutral scales — all anchored to a single brand hue. Export each harmony as CSS custom properties and wire them to semantic token names like --color-primary-500 or --color-surface-100 that components reference by role rather than raw value.
✦
Tailwind Projects
Export any generated palette directly to a Tailwind config colors block with numeric shades matching Tailwind's built-in naming convention. Paste the object into theme.extend.colors and immediately start using classes like bg-brand-200, text-brand-700, or ring-brand-500 across your templates without any additional configuration or setup.
◑
CSS Theming
Generate separate light and dark theme palettes by running the Tints harmony for your light theme (pastel backgrounds and mid-tone text) and the Shades harmony for your dark theme (dark backgrounds and light text), both anchored to the same base hue. Export as CSS custom properties and assign them under :root and [data-theme="dark"] selectors for a token-driven theming system.
⚡
Rapid Prototyping
Explore multiple color directions quickly by switching between harmony types on the same base color — the palette regenerates instantly. This lets you compare a complementary scheme against a triadic one, or see how an analogous palette feels compared to a split-complementary, without opening a design tool. Find a direction you like, copy the hex values, and move directly into implementation.
{}
Design Systems
Build a fully exportable color token set for a design system by generating harmonies for each semantic role — brand, neutral, success, warning, error — and exporting all as SCSS variables or JS objects. The consistent naming structure and numeric scale (100–900) aligns with Tailwind, Material Design, and most major design system conventions, making the tokens immediately usable in design tool integrations.

Frequently Asked Questions

Color harmony refers to the aesthetically pleasing arrangement of colors based on their mathematical relationships on the color wheel. Harmonious color combinations feel visually balanced and intentional, while non-harmonious combinations feel random or jarring. The main harmony types are: complementary (colors 180° apart — maximum contrast), analogous (colors adjacent on the wheel — natural and cohesive), triadic (three evenly spaced colors — vibrant but balanced), tetradic (four colors in a rectangle — complex and rich), and monochromatic (one hue at different lightness levels — elegant and subtle).

A monochromatic palette uses a single base hue at multiple levels of lightness and saturation, generating a range of tones from near-white to near-black that all share the same underlying color. Because every swatch has the same hue, the palette is inherently cohesive — nothing clashes. It is ideal for minimal, sophisticated designs where a single brand color needs to work across backgrounds, text, borders, buttons, and hover states without introducing a second hue.

Shades are created by adding black to a base color — mathematically, by reducing the lightness value in HSL while keeping the hue constant. They produce darker, richer versions of the color. Tints are created by adding white — increasing lightness and slightly reducing saturation — producing lighter, more pastel versions. Both maintain the original hue. In this tool, the Shades harmony generates a set of progressively darker variants, and the Tints harmony generates progressively lighter ones, both calibrated for use as a full design system color scale from 100 (lightest) to 900 (darkest).

Switch to the Tailwind export tab to get a ready-to-paste tailwind.config.js colors object. The output adds your generated palette as a custom brand color with numeric shades (100 through 900) — the same naming convention Tailwind uses for its built-in colors. Paste it into the theme.extend.colors section of your config file and you can immediately use classes like bg-brand-500, text-brand-200, or border-brand-700 throughout your project.

Select the CSS Vars tab in the export panel and click Copy All. The output is a :root block with CSS custom properties named --palette-1 through --palette-N (one per swatch in your generated palette), each set to the hex value of that color. Paste this block into your stylesheet's :root rule and reference the variables with var(--palette-1) anywhere in your CSS. This pattern is the standard approach for design token management in CSS-based design systems.

A complementary color scheme uses the base color paired with the color directly opposite it on the HSL color wheel — 180° away in hue. Complementary pairs produce the maximum possible contrast: red and cyan, blue and orange, yellow and purple. They create vibrant, high-energy designs but can be visually aggressive if both colors are used at full saturation. The most common application is using one color as the primary brand color and the other as an accent or call-to-action color on a neutral background.

A split-complementary palette uses the base color plus the two colors immediately adjacent to its complement — approximately 150° and 210° away in hue. For example, if your base is blue, the split-complementary colors are orange-red and orange-yellow rather than pure orange. This scheme provides strong visual contrast similar to complementary but is noticeably softer and easier to balance in UI design because the two accent colors are close in hue rather than forming a single jarring complement.

Yes. Type any valid 6-digit hex color code directly into the input box next to the color picker — with or without the # prefix. The palette regenerates instantly using your entered color as the new base. You can also click the color picker to visually select a color. The HSL values of your current base color are shown beneath the picker so you can understand exactly where it sits in hue-saturation-lightness space and predict how the harmony algorithm will generate related colors from it.