Color Wheels
Interactive color wheel explorer with harmony rules
The Color Wheel
The color wheel is a circular diagram that organizes colors by their hue. First developed by Sir Isaac Newton in 1666, it maps the visible spectrum into a circle, showing how colors relate to each other. Click any segment below to explore its harmonies.
| Color | Name | Hue | Hex |
|---|---|---|---|
| Red | 0° | #ff0000 | |
| Orange | 30° | #ff8000 | |
| Yellow | 60° | #ffff00 | |
| Chartreuse | 90° | #80ff00 | |
| Green | 120° | #00ff00 | |
| Spring | 150° | #00ff80 | |
| Cyan | 180° | #00ffff | |
| Azure | 210° | #007fff | |
| Blue | 240° | #0000ff | |
| Violet | 270° | #7f00ff | |
| Magenta | 300° | #ff00ff | |
| Rose | 330° | #ff0080 |
Color Harmonies for 0°
Based on the selected hue (Red), here are the standard color harmony combinations:
Opposite on the wheel (180°). Maximum contrast.
Adjacent colors (±30°). Harmonious and natural.
Three colors equally spaced (120° apart). Vibrant and balanced.
Base + two adjacent to its complement (150°, 210°). Less tension than complementary.
Understanding the Color Wheel
Why 12 Segments?
The traditional color wheel divides 360° into 12 equal segments of 30° each. This gives us the 3 primary colors, 3 secondary colors, and 6 tertiary colors. While there are infinite hues, the 12-segment wheel provides a practical framework for understanding color relationships.
hslToHex() function in your code to convert any hue angle to a hex color: hslToHex(210, 1, 0.5) gives you a pure blue.How to Use Color Wheels?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.