Hue contrast
Separation made by changing the kind of color while keeping brightness similar, like a red and blue that become the same gray.
See it
What it is
Hue contrast is the separation you see when colors differ in hue while staying close in lightness. Red beside blue can feel strongly divided even when both collapse to nearly the same gray. Johannes Itten called this contrast of hue and treated it as one of his seven color contrasts, with distinct, high-chroma hues producing the clearest effect.
Reach for it when categories need to feel different without making one look more important: chart series, tags, game pieces, or blocks in an illustration. Holding lightness roughly steady lets hue carry identity while value carries hierarchy elsewhere.
Gotcha: hue contrast is fragile for text, tiny marks, and color-vision differences. Two hues can look far apart on the wheel yet have almost no usable edge once desaturated. Never make hue the only signal for status; add labels, shapes, patterns, or a measured lightness difference when recognition matters.
Ask AI for it
Create a hue-contrast study with three equal CSS swatches using oklch(): keep lightness at 65% and chroma at 0.16, then set hue angles to 30, 150, and 270 degrees. Use the hues to distinguish categories without changing their size or visual rank. Add a second row with CSS filter: grayscale(1) to expose their similar lightness, then add a text label and a distinct marker shape to every category so hue is not the only identifying cue.