HomeColor ToolsColor Wheel

Color Wheel

Advanced color theory tool with 10+ harmony modes, custom palette mixing, and instant export.

Active Color Adjust
0°
100%
50%

Select a harmony to generate a palette based on the wheel.

Click + to add intermediate colors (Custom Mode)

Explore More Tools

Color Harmonies

Create balanced color palettes.

Shades & Tints

Generate light and dark variations.

Contrast Checker

Ensure text readability & accessiblity.

Mastering the Art of Color Theory

Explore harmonies, shades, and the science behind the spectrum.

Color harmony is effectively a geometry problem. The color wheel is a 360° representation of the visible light spectrum. By drawing geometric shapes connecting different points on this wheel, we find colors that have mathematically pleasing relationships.

Our professional-grade Color Wheel provides a workspace for exploring these relationships. Whether you need a high-contrast Complementary scheme for a CTA button or a soothing Analogous palette for a background, this tool handles the math so you can focus on the art.

Why Use This Color Wheel?

9+ Harmony Engines

Go beyond basic primary colors. Supports geometric harmonies like Tetradic, Square, and Split-Complementary.

Custom Fabrication

Switch to Custom Mode to add intermediate colors, tweak individual hues, or generate 15-step tint/shade variations.

Instant Pro Workflow

Copy Hex Codes with a single click, export entire palettes to JSON, and visualize contrast ratios instantly.

Why HSL beats RGB

Computers think in RGB (Red, Green, Blue) because pixels are tiny lights. But humans think in HSL (Hue, Saturation, Lightness).

  • H
    Hue is the "Color"

    Instead of mixing red and green, just select 60° on the wheel.

  • S
    Saturation is the "Punch"

    Control how vivid or muted the color is without changing identity.

  • L
    Lightness is the "Weight"

    Add white (Tint) or black (Shade) to create depth and hierarchy.

Advanced Harmony Guide

Complementary (180°)Maximum Contrast. Call-to-Actions.
Analogous (±30°)Natural & Serene. Low contrast.
Triadic (120°)Balanced Energy. Vibrant but stable.
Tetradic (90°)Double Complementary. Complex.

Pro Tips for Design Systems

  • ✓Don't use raw colors. Professional palettes rely on Tints (adding white) and Shades (adding black). Use our tool's "Tint" button to generate variations.
  • ✓Check Contrast Early. If a background color becomes too dark (Lightness < 60%), our tool automatically switches text to white. Ensure your implementation does the same.
  • ✓Use Split-Complementary for safer contrast. It offers the punch of complementary colors without the harsh vibration of direct opposites.

Who is This Tool For?

UI Designers

Create scalable color systems with precise tint/shade control.

Digital Artists

Find perfect harmonies for illustrations and character designs.

Brand Managers

Ensure brand consistency across different media and applications.

Frequently Asked Questions

How do I create a custom palette manually?
Switch any harmony mode to 'Custom', or simply click the '+' button between any color strips. This disconnects the automatic harmony rules and lets you edit each color independently, add new steps, or remove existing ones.
What is the 'Square' harmony mode?
A Square harmony is a specific version of the Tetradic scheme where the four colors are spaced evenly (90° apart) around the wheel. It creates a palette with two complementary pairs that are perpendicular to each other, offering a very balanced but colorful look.
Can I save or export my palette?
Yes! Use the 'Copy JSON' or 'Export Palette' buttons in the top right corner. The JSON format is perfect for developers to paste into configuration files, while the list export is great for sharing with team members.
Why do some text colors change to white?
Our tool includes an automatic contrast engine. If a background color becomes too dark (Lightness < 60%), the text and icons automatically switch to white to ensure readability and WCAG accessibility compliance.
What is the difference between Tetradic and Square?
Both use 4 colors. 'Square' requires them to be exactly 90° apart. 'Tetradic' (Rectangular) uses two complementary pairs that might be closer together (e.g., 60° and 120°). Square is more balanced; Tetradic allows for a dominant hue with accents.
How do I use the Shade Picker?
Click the small circle icon (Tint/Contrast) on any color strip. A modal will open showing 15 variations of that color from light to dark. Click any shade to replace your current selection.
What is the 'Compound' harmony?
Compound harmonies mixed complementary and analogous colors. It typically takes a base color, finds its complement, and then chooses colors adjacent to that complement. It offers the visual tension of contrast with the smooth transition of analogous colors.
Is this tool free to use for commercial projects?
Absolutely. The generated palettes, hex codes, and JSON data are yours to use freely in any personal or commercial project with no attribution required.