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.