What palette types are available?

Five types: complementary (two colors opposite on the color wheel), analogous (five colors 30 degrees apart), 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. Our servers are not involved 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 the hex value of every swatch and the RGB and HSL values of the one you select, and exports the whole palette as CSS custom properties. The tool runs in your browser.

Base color

#3b82f6

#f6af3b

PALETTE TYPE

Dedicated pages

Palette type and use-case specific generators.

Hex color palette generator

Generate color palettes from any base color: complementary, analogous, triadic, tetradic, or monochromatic. Copy hex values or CSS variables. Free, in-browser.

Complementary color generator

Find the complementary color for any hex code as a two-color palette. Copy hex values; RGB and HSL are shown for the selected swatch. 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° and ±60°. 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: 3 or 6 digit hex value (with or without the leading #), or any color the visual picker emits.
Output: Swatch grid with a hex value and copy button per color, RGB and HSL values for the selected swatch, 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 (five colors 30 degrees apart), 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. Our servers are not involved at any point.

Related tools

Background reading: Complete guide to color tools
Step by step: Build a color system for a design project

Reviewed and tested September 30, 2026.