Color Wheel

Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic, and other schemes to elevate your designs.

RGB
58, 228, 222
HSL
178, 76%, 56%
3AE4DE
E43A40

Color harmonies

Complementary
Active
Analogous
Split Complementary
Triadic
Tetradic
Square
Monochromatic

Drag inside the wheel to choose a base color, or type a hex value directly. Click the color swatch (or the eyedropper icon) next to the hex field to open a precise color picker. Click any swatch to copy its hex code, or hover the RGB/HSL readouts to copy those values.

Guide

Color Wheel Guidelines

Everything you need to get the most out of the color wheel tool — how it works, what each feature does, and a primer on the color theory behind it.

What is a color wheel tool?

A color wheel tool is an interactive version of the classic color wheel: instead of eyeballing relationships on a printed diagram, you pick a base color and the tool instantly calculates matching colors using established color-harmony rules. It turns color theory into something you can click through rather than memorize.

Every palette on this page is generated the same way the tool generates them — by rotating around a base hue and reading off the resulting colors.

How to use the color wheel?

1Pick a base color

Drag inside the wheel, or type a hex code directly into the input field below it.

2Choose a harmony

Select complementary, analogous, triadic, tetradic, square, split-complementary, or monochromatic from the dropdown or the grid below.

3Fine-tune lightness

Use the lightness slider to push the whole palette darker or lighter without changing the hue relationships.

4Copy or export

Click any swatch to copy its hex code, hover RGB/HSL to copy those values, or open Export for hex, RGB, HSL, image, or PDF output.

What are the color wheel features?

Interactive hue wheel
Drag anywhere on the wheel for instant hue and saturation feedback, with dots showing every color in the active harmony.
Seven harmony modes
Complementary, split-complementary, analogous, triadic, tetradic, square, and monochromatic.
Live RGB / HSL readout
See and copy exact values for the base color as you move it, no manual conversion needed.
Gradient lightness control
A lightness slider rendered as a gradient of the current hue, so you can preview every stop before picking.
One-click copying
Click any swatch, or hover a value field, to copy hex/RGB/HSL straight to your clipboard.
Multi-format export
Export a palette as hex, RGB, or HSL code lists, a PNG swatch strip, or a single-page PDF.
Complementary

Two hues sitting opposite each other on the wheel. High contrast, great for call-to-action moments against a calmer base.

Split-Complementary

A base color plus the two hues adjacent to its complement. Keeps strong contrast while feeling a bit softer than a straight complementary pair.

Analogous

Three hues that sit next to each other on the wheel. Naturally harmonious, often found in nature.

Triadic

Three hues evenly spaced around the wheel, 120° apart. Vibrant and balanced even at full saturation.

Tetradic

Four hues forming two complementary pairs. Rich and varied — usually works best when one color leads and the rest support.

Square

Four hues evenly spaced 90° apart. Similar to tetradic but perfectly symmetrical, giving equal visual weight to every color.

FAQ

A color wheel is a circular diagram that arranges hues in the order they appear in the visible spectrum, bent into a loop so that the last color connects back to the first. It's a visual map of how colors relate to one another, used to find combinations that look balanced together.