Skip to content
🛠️
Whiz Tools

Color Palette Generator - Create Harmonious Color Schemes

A tool that generates complementary, analogous, triadic, and monochromatic color palettes from a chosen primary color using HSL hue and lightness formulas.

Simple Color Palette Generator

Select harmony type

Generated Palette

Select a color and harmony type to generate a palette

About Color Harmonies

Color harmonies are combinations of colors that are pleasing to the eye. They create a sense of order and balance in design.

Harmony Types

  • Complementary: Colors opposite each other on the color wheel, creating high contrast and vibrant looks.
  • Analogous: Colors adjacent to each other on the color wheel, creating a serene and comfortable design.
  • Triadic: Three colors evenly spaced around the color wheel, offering strong visual contrast while maintaining harmony.
  • Monochromatic: Different shades, tones and tints of a single color, creating a cohesive look with subtle variations.
Loading calculator...
📚

Documentation

What is a color palette generator?

A color palette generator is a tool that builds a set of matching colors from one starting color, called the primary color. This color palette generator takes a primary color and a harmony type, then calculates the rest of the palette using color theory rules. The four harmony types it supports are complementary, analogous, triadic, and monochromatic.

How the tool builds a palette

The tool converts the primary color from hex code (like #3B82F6) into the HSL color model. HSL describes a color with three numbers:

  • Hue: the position of the color on a 360-degree color wheel (0° is red, 120° is green, 240° is blue).
  • Saturation: how intense the color is, from 0% (gray) to 100% (pure color).
  • Lightness: how close the color is to black or white, from 0% (black) to 100% (white).

Each harmony type shifts the hue, the lightness, or both, then converts the result back to a hex code.

How to calculate complementary colors

The formula:

1new_hue = (original_hue + 180) mod 360
2

Saturation and lightness stay the same.

Worked example: Pure blue, #0000FF, has hue 240°, saturation 100%, and lightness 50%. Adding 180° gives hue 60°. Converting hue 60° back to hex, at the same saturation and lightness, produces #FFFF00, a yellow. So this tool pairs blue with yellow, not with orange.

This can be confusing because art classes often teach a different color wheel, the RYB (red-yellow-blue) pigment wheel, where blue's opposite is orange. This tool works on the RGB-based HSL wheel used by screens, so its complementary pairs differ from the paint-mixing wheel.

How to calculate analogous colors

Analogous colors sit near the primary color on the wheel. The tool generates two hues 30° away and two hues 60° away from the primary hue, all at the same saturation and lightness.

1hue ± 30°  and  hue ± 60°
2

Worked example: Blue, #0000FF (hue 240°), produces hue 270° (#8000FF), hue 210° (#0080FF), hue 300° (#FF00FF), and hue 180° (#00FFFF). Together with the primary color, the palette holds five colors.

How to calculate triadic colors

Triadic colors sit 120° apart on the wheel, forming an evenly spaced trio with the primary color.

1hue + 120°  and  hue + 240°
2

Worked example: Red, #FF0000 (hue 0°), produces hue 120° (#00FF00, green) and hue 240° (#0000FF, blue). The three-color set is red, green, and blue, the same three hues used as primaries on digital screens.

How to calculate monochromatic colors

Monochromatic colors keep the same hue and saturation and only change lightness. The tool shifts lightness by 15 and 30 percentage points in each direction, capped between 5% and 95%.

1lightness ± 15  and  lightness ± 30
2

Worked example: Blue, #0000FF (lightness 50%), produces lightness 65% (#4D4DFF), lightness 35% (#0000B3), lightness 80% (#9999FF), and lightness 20% (#000066).

Using the tool

  1. Pick a primary color with the color picker, or type a hex code such as #3B82F6.
  2. Choose a harmony type: complementary, analogous, triadic, or monochromatic.
  3. Read the generated palette. Each swatch shows its hex code.
  4. Click a swatch to copy its hex code, or use "Copy All Colors" to copy the whole palette at once.

Checking contrast for accessibility

Each color swatch shows two small badges: one for contrast against white, one for contrast against black. The tool calculates a contrast ratio using the WCAG (Web Content Accessibility Guidelines) formula:

1contrast ratio = (L1 + 0.05) / (L2 + 0.05)
2

L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. Luminance comes from the color's red, green, and blue values. A badge reads "AA" when the ratio is 4.5 or higher, which is the WCAG minimum for normal-size text. Black text on white background scores a ratio of 21, the highest possible value.

Frequently asked questions

What is a color palette generator? It is a tool that produces a set of colors that work together, starting from one primary color and a chosen harmony rule.

Why does this tool pair blue with yellow instead of orange for complementary colors? The tool rotates hue by 180° on the HSL wheel, which is based on how screens mix red, green, and blue light. The red-yellow-blue paint wheel taught in art class produces different complementary pairs, because it mixes pigments rather than light.

How many colors does each harmony type produce? Complementary makes 2 colors total (including the primary). Triadic makes 3. Analogous makes 5. Monochromatic makes 5.

What color model does the tool use internally? HSL (hue, saturation, lightness). It converts the input hex code to HSL, does the math, then converts the result back to hex.

Does the tool check whether colors are accessible? Yes. Each swatch shows whether it has enough contrast against white and against black to pass the WCAG AA standard for normal text, which requires a ratio of at least 4.5.

Can I use more than one harmony type for a project? Yes. Many designs combine harmony types, for example an analogous set for the main colors and one complementary color for a button or highlight.

Color formats

The tool displays colors as hex codes, six-digit codes preceded by a # sign (for example #FF0000 for red). Hex codes map directly to red, green, and blue values from 0 to 255 each. HSL is an alternative way of describing the same colors using hue, saturation, and lightness instead of red, green, and blue amounts.