Color Attributes
Every color can be described by three independent dimensions: hue — what color it is, value — how light or dark it is, and chroma — how saturated or vivid it is.
Color Is Not Fixed
The eye reads hue, saturation, and value relative to their surroundings, not in isolation — none of these attributes are fixed. This is what drives simultaneous contrast: the same color shifts in appearance as the context around it changes.
Simultaneous Contrast: HSL Combined
Change the hue, saturation, and lightness of the backgrounds and center squares. How different can you make the center square look?
Color Challenge
You have seen how color trick your eyes. Now try matching the right square to the left by adjusting the HSL sliders. Hit reveal to turn the backgrounds gray and see how much you actually changed the values.
Warm & Cool Colors
Warm and cool is something we feel, and it lines up with the spectrum. Reds and oranges sit at the long, low-energy end; blues and violets at the short, high-energy end. The twist: in physics, blue is hotter. A blue flame burns hotter than a red one.
Value, Atmosphere & Depth
Closer objects appear darker and higher in contrast; distant ones fade lighter — atmospheric perspective. Adjust each plane below to see how value creates depth.
Contrast of Complements
True opposites don't just contrast — they vibrate. Rotate off the complement axis and watch the tension drop.