Color Wheel Guide

Everything you can do with OmniColor's interactive color wheel — from finding harmony colors to understanding the color relationships that make design work.

What Is a Color Wheel?

A color wheel is a circular diagram arranging hues in a continuous spectrum. It is the foundational tool of color theory — every harmony rule (complementary, analogous, triadic, etc.) is defined by positions on the wheel.

Modern digital color wheels are built on the HSV color model, where hue is the angle around the circle (0° to 360°) and saturation and brightness are controlled separately.

The Color Wheel in HSL/HSV Space

In digital color wheels, the outer edge of the circle represents maximum saturation at full brightness. Hue is the angle:

  • 0° — Red
  • 30° — Orange
  • 60° — Yellow
  • 90° — Yellow-green
  • 120° — Green
  • 150° — Cyan-green
  • 180° — Cyan
  • 210° — Sky blue
  • 240° — Blue
  • 270° — Purple
  • 300° — Magenta
  • 330° — Pink-red

Using the Interactive Wheel

Open the Color Wheel →

Step 1: Pick a base hue

Click anywhere on the outer ring to select a hue. The markers on the wheel rotate to show that hue's harmony colors.

Step 2: Choose a harmony mode

Use the dropdown to select:

  • Complementary
  • Analogous
  • Triadic
  • Tetradic
  • Split-complementary
  • Square
  • Double-complementary

Step 3: Explore harmony colors

Below the wheel, every color in the selected harmony is displayed as a swatch with its HEX code and hue offset from the base.

Step 4: Copy any color

Click any swatch or any segment in the full hue scale to copy its HEX code to your clipboard.

Manual input

You can also type a HEX code in the input field to jump directly to that hue.

Understanding Harmony Positions

Complementary (180°)

Two colors directly opposite. Maximum contrast and visual tension. The base color and its complement form a single pair.

Analogous (±30° to ±60°)

Neighboring hues within a small arc. Creates calm, cohesive palettes. Most analogous schemes use 3-5 colors within about 60° of the base.

Triadic (120° apart)

Three colors evenly spaced. Vibrant and balanced — no single color dominates by default.

Tetradic (90° / 180° / 270°)

Four colors in two complementary pairs. Rich variety, harder to balance than triadic.

Split-Complementary (150° and 210°)

Base plus the two neighbors of its complement. Softer than complementary, easier to work with.

Square (0° / 90° / 180° / 270°)

A specific tetradic arrangement where all four colors are exactly 90° apart. Same tension as tetradic but with more regularity.

Practical Examples

Brand palette exploration

You have a brand blue (#155EEF) and need a complete palette. Open the wheel, click on the blue hue. Switch between harmony modes to see what works:

  • Analogous: Soft blues, teals and cyans for backgrounds
  • Split-complementary: Blue + red-orange + yellow-orange for accent variety
  • Complementary: Blue + orange for a strong CTA accent

Interface color planning

For a dashboard, you need distinct series colors. Use tetradic mode to see four clearly-separated hues. Test each against color blindness — some triads fail accessibility despite passing theoretical harmony rules.

Mood-based selection

Warm side of the wheel (0°–90°, 270°–360°) feels energetic. Cool side (120°–270°) feels calm. Analogous harmonies on the warm side create cozy palettes; on the cool side, they create professional palettes.

Common Mistakes

Equal visual weight

Harmony rules define hue relationships, not proportions. A triad used at 33% each looks chaotic. Use 60-30-10 proportions instead.

Ignoring saturation and lightness

Two colors at exactly 180° apart in hue can still feel unharmonious if one is highly saturated and the other muted. Hue is only one dimension.

Forgetting accessibility

Beautiful harmonies can fail WCAG contrast. Always run the final palette through a contrast checker before shipping.

Over-relying on the wheel

The wheel gives you theoretical relationships. Real design benefits from breaking the rules intentionally — the wheel is a starting point, not a constraint.

Related Tools

Frequently Asked Questions

Open the Color Wheel →