Color Wheel
A color wheel arranges hues in a circle based on their chromatic relationship. Primary colors (red, yellow, blue) are spaced 120 degrees apart. Color harmonies use geometric relationships: complementary (180 degrees, high contrast), analogous (30 degrees, harmonious), triadic (120 degrees, vibrant), split-complementary (150+210 degrees, softer contrast). HSL model: Hue (0-360 degrees), Saturation (0-100%), Lightness (0-100%).
Interactive color wheel with harmony rules. Generate complementary, analogous, triadic, split-complementary, tetradic, and monochromatic color palettes. Export as HEX, RGB, HSL, and CSS custom properties.
Color Wheel
Complementary Palette
CSS Custom Properties
:root {
--color-1: #308ce8;
--color-2: #e88c30;
}Color Harmony Reference
| Harmony | Angle(s) | Colors | Best For |
|---|---|---|---|
| Complementary | 180 degrees | 2 | High contrast designs, calls-to-action |
| Analogous | 30 degrees apart | 3 | Harmonious, nature-inspired palettes |
| Triadic | 120 degrees apart | 3 | Vibrant, balanced designs |
| Split Complementary | 150 + 210 degrees | 3 | Softer contrast than complementary |
| Tetradic (Square) | 90 degrees apart | 4 | Rich, multi-color designs |
| Monochromatic | Same hue | 5 | Elegant, minimalist designs |
How to Use
- 1
Select a base color
Click on the color wheel, adjust the hue/saturation/lightness sliders, or enter a HEX code directly to set your starting color.
- 2
Choose a harmony rule
Select complementary, analogous, triadic, split-complementary, tetradic, or monochromatic to generate a harmonious palette.
- 3
Review the palette
See all harmony colors with their HEX, RGB, and HSL values. The color wheel shows markers at each harmony position.
- 4
Export for use
Copy the full palette details or the CSS custom properties block. Use in your design tool, CSS, or style guide.
Frequently Asked Questions
- What is a color wheel?
- A color wheel is a circular diagram that organizes colors by their chromatic relationship. Primary colors (red, yellow, blue) are spaced equally. Secondary colors (orange, green, violet) sit between primaries. Tertiary colors fill the remaining gaps. The wheel is used to identify harmonious color combinations based on geometric relationships.
- What are complementary colors?
- Complementary colors sit directly opposite each other on the color wheel (180 degrees apart). Examples: red and cyan, blue and orange, yellow and purple. They create maximum contrast and visual tension. Used together, they make each other appear more vibrant. Best for calls-to-action, logos, and high-impact designs.
- What is the difference between analogous and triadic harmonies?
- Analogous colors are adjacent on the wheel (30 degrees apart), creating a smooth, harmonious palette with low contrast. Example: blue, blue-green, green. Triadic colors are evenly spaced (120 degrees apart), creating a vibrant, balanced palette with moderate contrast. Example: red, yellow, blue. Analogous is calming; triadic is energetic.
- How do I use HSL color values?
- HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0-360 degrees: 0=red, 120=green, 240=blue). Saturation (0-100%) controls color intensity (0% is gray). Lightness (0-100%) controls brightness (0% is black, 100% is white, 50% is pure color). HSL is more intuitive than RGB for picking and adjusting colors.
- What is a monochromatic palette?
- A monochromatic palette uses a single hue with variations in saturation and lightness. It creates an elegant, cohesive look with no color clashes. Example: dark navy, medium blue, light blue, pale blue. Monochromatic schemes are safe, professional, and easy to implement. Add contrast through lightness differences rather than hue changes.
- How do I convert between HEX, RGB, and HSL?
- HEX to RGB: split the 6-digit hex into 3 pairs and convert to decimal. #3B82F6 = rgb(59, 130, 246). RGB to HSL: find min/max channels, calculate hue from the dominant channel, saturation from the range, lightness from the average. Most design tools convert automatically. Use HSL for intuitive adjustments, HEX for CSS, RGB for code.