b2KIT

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

How to Use Color Palette Generator

  1. 1

    Pick a base color

    Choose a starting color or enter a hex code to begin.

  2. 2

    Select a harmony

    Choose complementary, analogous, triadic, or another color scheme.

  3. 3

    Copy color values

    Click any swatch to copy its hex, RGB, or HSL value.

Tested tool guide Design and color tools Checked July 30, 2026

What Color Palette Generator does, with a checked example

Starting from one sRGB HEX color, this generator converts it to HSL and creates complementary, triadic, split-complementary, analogous, monochromatic, and square arrangements. Hue rotations provide consistent geometric relationships while lightness changes create monochromatic steps.

Worked example

A concrete input and expected output from the current implementation.

Input

Base #FF0000

Expected output

Complementary pair #FF0000 and #00FFFF

Red has a hue near 0 degrees. Rotating hue by 180 degrees while keeping saturation and lightness produces cyan.

How the result is produced

1

Hue rotations define each scheme

Complementary adds 180 degrees, triadic adds 120 and 240, and square adds 90, 180, and 270. Values wrap around the 360-degree hue circle.

2

Monochromatic steps change lightness

The same hue and saturation are kept while lightness moves darker and lighter within bounded values. This preserves family resemblance without guaranteeing contrast.

Good uses

  • Create a starting palette from an existing brand color.
  • Compare analogous and complementary directions quickly.
  • Copy a set of color tokens into a design draft.

Limits and checks

  • HSL spacing is not perceptually uniform.
  • Generated colors still require contrast and color-vision testing.
  • A coherent product palette also needs semantic roles and state coverage.

Common questions

Is a complementary pair automatically readable?

No. Hue relationship and luminance contrast are different. Test any foreground/background pair with the contrast calculator.

Why can equally spaced hues look uneven?

Human vision is more sensitive to some colors than others, while HSL treats numerical hue steps uniformly.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.

Box Shadow CSS Generator

Design box shadows visually with multiple layers and copy the CSS code.