Color Wheel
Color Wheel (Color Circle)
A circular diagram organizing colors by hue to visualize relationships like complementary and analogous colors.
Technical Detail
The color wheel is based on the three primary models: RYB (traditional pigment), RGB (additive light), and CMYK (subtractive print). In the perceptually uniform OKLCH color space, equal numerical distances correspond to equal perceived differences — unlike HSL where a 10-degree hue shift appears dramatically different at different lightness levels. Modern CSS supports oklch() natively, enabling designers to create harmonies with mathematically consistent perceptual contrast.
Example
```css
/* HSL color system for design tokens */
:root {
--hue-primary: 225; /* blue */
--primary-50: hsl(var(--hue-primary), 100%, 97%);
--primary-500: hsl(var(--hue-primary), 84%, 60%);
--primary-900: hsl(var(--hue-primary), 84%, 15%);
}
/* Change --hue-primary to theme entire site */
```
Related Tools
C
Color Palette Generator
T
Type Scale Generator
S
Spacing Scale Generator
R
Responsive Breakpoints
A
Aspect Ratio Calculator
C
Color Shade Generator
F
Font Pairing Suggestions
C
Contrast Checker
D
Design Tokens Generator
S
Social Media Size Guide
G
Golden Ratio Calculator
A
App Icon Size Guide
C
CSS Color Converter
S
Shadow System Generator
M
Multi-Stop Gradient Generator
C
CSS Pattern Generator
Related Terms
Accessibility
Affordance
Analogous Colors
Baseline Grid
Color Blindness
Color Grading
Color Management (PDF)
Color Temperature
Complementary Colors
Contrast Ratio
Design System
Design Token
Fitts's Law
Font Weight
Gestalt Principles
Golden Ratio
Grid System
Hick's Law
HSL
Information Architecture
Material Design
Mockup
Modular Scale
Monochromatic Color
Negative Space
Prototype
Responsive Design
Rule of Thirds
Split-Complementary
Tracking
Triadic Colors
Typeface
Visual Hierarchy
Wireframe