Color Palette Generator

How to use the color palette generator

1. Choose a Base color with the color swatch, or type any code in Base color code (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), a CSS name…).
2. Pick a Harmony: Complementary, Analogous, Triadic, Split complementary, Tetradic (rectangle), Square or Monochromatic.
3. Choose the Color wheel: HSL (classic) or OKLCH (perceptual). The palette updates as you change any option; Generate palette refreshes it too.
4. Copy a single color with the Copy button under its swatch, or choose a format in Export as (HEX list, CSS variables, SCSS variables, JSON array or Tailwind colors) and use Copy or Download for the whole palette.

Each swatch shows its HEX code in black or white, whichever has better contrast, and its position relative to the base color (for example +120°).

The color harmonies

Color harmonies are fixed angles on the color wheel. Starting from your base hue, the tool rotates the hue and keeps the saturation and lightness of the base.

• Complementary (0°, 180°): the opposite color. Maximum contrast, great for a call-to-action button against a main brand color.
• Analogous (−60°, −30°, 0°, +30°, +60°): neighbours on the wheel. Calm, natural combinations that work well for backgrounds and illustrations.
• Triadic (0°, 120°, 240°): three evenly spaced hues. Lively and balanced; usually one color dominates and the other two are accents.
• Split complementary (0°, 150°, 210°): the two neighbours of the complement. Strong contrast with less tension than a pure complementary pair.
• Tetradic (rectangle) (0°, 60°, 180°, 240°): two complementary pairs. Rich palettes that need one dominant color to stay coherent.
• Square (0°, 90°, 180°, 270°): four evenly spaced hues.
• Monochromatic: one hue in five lightness steps, from dark to light. Ideal for UI states, charts and subtle designs.

HSL or OKLCH wheel?

The HSL (classic) wheel is the traditional one used by most design tools and tutorials. Its drawback is that equal angles do not look equally bright: yellow at 60° looks much lighter than blue at 240° with the same HSL lightness.

The OKLCH (perceptual) wheel rotates the hue in the Oklab color model, which is designed so that lightness looks consistent. Palettes built on it have colors of similar visual weight, which helps with accessible contrast. Some rotated colors can fall outside what a screen can show; the tool then lowers their chroma slightly to keep them displayable.

Using the exported palette

CSS variables produce a :root block with --color-1, --color-2… that you can paste into a stylesheet. SCSS variables give $color-1: …; lines, JSON array gives a list of HEX strings for scripts, and Tailwind colors gives a colors object with 100, 200, 300… keys to paste into your Tailwind configuration.

Before you ship, check text contrast: a harmony guarantees pleasant hues, not readable text. Use dark or light neutrals for body copy and keep saturated palette colors for accents, buttons and graphics.