HomeDevColor Wheel Chart
Color tools

Color Wheel Chart

Use this free CalculatorX tool for fast local results with clear formulas, worked examples, and privacy-first browser calculation. Fast and free.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Pick a base color

Click or drag on the wheel. Distance from the center sets saturation; use the lightness slider to brighten or darken.

2

Choose a harmony

Select complementary, analogous, triadic, split-complementary, tetradic, square, or monochromatic.

3

Copy the palette

Copy HEX from each swatch into CSS custom properties or design tokens.

Color formulas

Core relationships used by this color tool.

ComplementaryH and H + 180°
AnalogousH − 40°, H, H + 40°
TriadicH, H + 120°, H + 240°
Split-complementaryH, H + 150°, H + 210°
iHue angles are on the HSL wheel. Saturation and lightness stay with the base color except in monochromatic mode, which varies lightness.

Example colors

Common picks with formula and result.

ϟ

Complementary blue

High-contrast accent pair

H = 210° → +180°
#2F80ED · #ED9B2F
ϟ

Analogous teal family

Neighboring hues

H = 180° ± 40°
Cyan–teal–blue-green set
ϟ

Triadic primaries

Even spacing

0° / 120° / 240°
Red · Green · Blue accents
ϟ

Monochromatic navy

One hue, many values

H fixed, L ± steps
Shade → base → tint stack

Color wheel specification

Version 1.0.0

Definition
A color wheel arranges hues in a circle so you can see relationships between colors. Designers use it to build harmonious palettes—complementary, analogous, triadic, and related schemes—from a base color.
What it calculates
A harmony palette from a base HSL color—HEX and RGB for each swatch, with markers on the wheel.
Inputs
  • Hue and saturation from the circular wheel
  • Lightness from the slider (about 5–95%)
  • Harmony mode from the dropdown
  • Optional base HEX to jump to a known color
Outputs
  • Palette swatches with HEX and RGB
  • Wheel markers for each harmony color
  • Copyable HEX strings for CSS
Formula
Palette hues = wrap(H + offset) for the selected harmony; monochromatic varies L

Primary / secondary / tertiary (RYB tradition): red, yellow, and blue as primaries; orange, green, and purple as secondaries; six tertiary mixes (e.g. red-orange, blue-green). On screens we usually pick in RGB/HSL, but the same wheel geometry still guides harmonious sets.

Building a scheme: let one color dominate, use others for accents, and check contrast for text. Pair this wheel with the HTML color picker when you need a single precise HEX.

:root {
  --color-1: #2F80ED;
  --color-2: #ED9B2F;
  --color-3: #F5F5F5;
}

.hero {
  background: var(--color-1);
  color: #fff;
}

.cta {
  background: var(--color-2);
  color: #111;
}
Harmony cheat sheet
HarmonyColorsBest for
Complementary2 (opposites)Strong accents, CTAs
Analogous3 (neighbors)Calm UI, soft gradients
Triadic3 (120° apart)Bold, balanced brands
Split-complementary3Contrast with less tension
Tetradic4 (two pairs)Rich multi-color systems
Square4 (90° apart)Even four-color palettes
Monochromatic1 hue, many LMinimal, layered surfaces
i Start with one base HEX, then adjust lightness so text and backgrounds keep readable contrast.
Assumptions
  • Colors are opaque sRGB for web use.
  • Harmony offsets are geometric on the HSL hue circle.
  • Non-mono modes keep the base saturation and lightness.
Units
  • Hue: degrees 0–360
  • Saturation / lightness: percent
  • HEX: #RRGGBB
Boundary conditions
  • Invalid HEX is ignored until a valid 3- or 6-digit code is entered.
  • Lightness is limited to keep swatches visible (not pure black/white extremes).
  • Hue wraps modulo 360°.
Example
H=210°, S=75%, L=50%, complementary → #2F80ED and #ED9B2F
Validation cases
  • complementary, H=0° → Red + cyan-green opposite (~180°)
  • triadic, H=0° → Three hues at 0°, 120°, 240°
  • analogous, H=180° → Neighbors near cyan
  • monochromatic → Same H/S, stepped L values
Sources
  • Classical color-wheel harmony geometry (complementary, analogous, triadic, …)
  • HSL as used in CSS Color Module
Calculation version
1.0.0
◎ HTML color picker › ▦ Color scheme › RGB RGB color codes › # HTML color codes › ⇄ HEX to RGB ›

Frequently asked questions

Key distinctions behind the tool.

What is a color wheel?

A circular diagram of hues that shows how colors relate. It dates back to Newton’s Opticks and is still the standard way to explore primary, secondary, tertiary colors and harmonies.

What are complementary colors?

Colors opposite on the wheel (about 180° apart), such as blue and orange. They create strong contrast and work well as accents against neutrals.

What is the difference between tetradic and square?

Both use four hues. Square spaces them evenly (90°). Tetradic (rectangular) uses two complementary pairs 60° apart—more flexible, often needing one dominant color.

How do shades, tints, and tones differ?

Shade = mix with black (darker). Tint = mix with white (lighter). Tone = mix with gray (less intense). Monochromatic mode on this wheel mainly varies lightness.

Does the wheel upload my palette?

No. Selection and harmony math run locally in your browser.