What palette types are available?

Five types: complementary (two colors opposite on the color wheel), analogous (three adjacent colors), triadic (three colors 120 degrees apart), tetradic (four colors in two complementary pairs), and monochromatic (multiple shades of the same hue).

How are palette colors calculated?

All calculations use the HSL (hue, saturation, lightness) color space. The base color is converted to HSL, and the hue is rotated by a fixed amount depending on the palette type. The rotated hue values are converted back to RGB and hex for display.

What is a complementary color palette?

A complementary palette uses two colors directly opposite each other on the color wheel, separated by 180 degrees of hue. This creates high contrast and works well for call-to-action elements and making content stand out.

Is my color data sent to a server?

All color calculations run locally in your browser. No data is sent to our servers at any point.

Color palette generator

Color palette generator is a design tool that builds harmonious color schemes from any base hex value. It offers complementary, analogous, triadic, tetradic, and monochromatic palettes, shows hex, RGB, and HSL for every swatch, and exports the whole palette as CSS custom properties. The tool runs in your browser.

Base color

#3b82f6

#f6af3c

PALETTE TYPE

Dedicated pages

Palette type and use-case specific generators.

Color palette generator

Generate color palettes from any base color. Complementary, analogous, triadic, tetradic, and monochromatic schemes. Copy hex, RGB, or CSS variables. Free, in-browser.

Complementary color generator

Find the complementary color for any hex code. Instantly generates a two-color complementary palette. Copy hex, RGB, or HSL values. Free, in-browser.

Color scheme generator

Generate color schemes from any base color. Choose complementary, analogous, triadic, tetradic, or monochromatic. Copy hex and CSS variables. Free, in-browser.

How to generate a color palette

Pick your base color using the color picker or enter a hex code.
Choose a palette type: complementary, analogous, triadic, tetradic, or monochromatic.
Click any swatch to see its RGB and HSL values.
Copy individual colors or all colors as CSS custom properties.

Common uses

Choosing a cohesive set of colors for a web design or UI project
Building a brand color system starting from a single primary color
Exploring color relationships and then converting each swatch to HEX, RGB, or HSL or checking WCAG contrast against a background

Technical specification

Algorithm or formula: Hue rotation in HSL space. Complementary = +180°, triadic = ±120°, tetradic = +90 and +180 and +270°, analogous = ±30°. Monochromatic adjusts lightness in fixed steps while holding hue and saturation.
Browser API or library: Pure JavaScript color math (hex ↔ RGB ↔ HSL). No external library.
Input limits: Six-digit hex value (with or without the leading #), or any color the visual picker emits.
Output: Swatch grid with hex, RGB, and HSL values per color, plus a one-click CSS custom-properties export.
Known limitations: HSL math operates in sRGB; perceptual uniformity (OKLCH) is not used. Palettes are mathematically derived, so designer-curated tweaks may be needed.

Frequently asked questions

What palette types are available?: Five types: complementary (two colors opposite on the color wheel), analogous (three adjacent colors), triadic (three colors 120 degrees apart), tetradic (four colors in two complementary pairs), and monochromatic (multiple shades of the same hue).
How are palette colors calculated?: All calculations use the HSL (hue, saturation, lightness) color space. The base color is converted to HSL, and the hue is rotated by a fixed amount depending on the palette type. The rotated hue values are converted back to RGB and hex for display.
What is a complementary color palette?: A complementary palette uses two colors directly opposite each other on the color wheel, separated by 180 degrees of hue. This creates high contrast and works well for call-to-action elements and making content stand out.
Is my color data sent to a server?: All color calculations run locally in your browser. No data is sent to our servers at any point.

Reviewed and tested May 25, 2026.