Hue shifts of colors

I wrote earlier about the HSB color model. In the HSB model, hue means roughly what color you have on a color wheel. Lately, I have learned how different colors behave across shades.

Light to dark shades

At different brightness levels, sometimes a color’s hue needs to be tuned to make it feel the same. Often, hues shift up to ~10% between light and dark shades. The chart above shows how hues change as colors get darker. It uses the Tailwind CSS color palette.

The table below sums up how many degrees each hue shifts.

red
+0.0°
orange
-20.3°
amber
-27.1°
yellow
-28.5°
lime
+11.0°
green
+6.4°
emerald
+13.9°
teal
+12.5°
cyan
+13.8°
sky
+0.0°
blue
+12.5°
indigo
+17.9°
violet
+11.2°
purple
+3.5°
fuchsia
+7.7°
pink
+8.9°
rose
-12.6°

Absolute hue values

This second chart shows the actual hue values of each color. Red is the only basic color whose hue stays constant across its shades.

AI workflow

I designed the chart with Figma and recharts. Then I moved the design to Cursor. With an agent (Cline), I prompted visual fine-tuning and split the code into frontend components.