Purple Climax as a scale

Eleven steps from #8800ff, built by moving lightness in OKLCh and keeping the hue where it is. Every step is gamut-mapped by giving up chroma, never by clipping channels — clipping is what turns a light blue purple.

StopHexOKLCh LChromaOn whiteOn blackAPCA on whiteΔE00 from the step above
50#f6f3ff97.0%0.016 ·capped1.09:119.19:10—
100#ece6ff93.8%0.034 ·capped1.21:117.38:1105.5
200#d9cdff87.4%0.070 ·capped1.49:114.11:1239.0
300#c7b2ff81.0%0.108 ·capped1.86:111.28:1357.8
400#b697ff74.6%0.149 ·capped2.37:18.87:1477.6
500#a679ff68.2%0.191 ·capped3.07:16.83:1578.0
600#9857ff61.8%0.236 ·capped4.08:15.14:1679.0
700#8b22ff55.4%0.283 ·capped5.58:13.76:1769.9
800#7700e149.0%0.267 ·capped7.33:12.87:1836.5
900#46008934.0%0.185 ·capped12.93:11.62:19713.5
950#18003618.0%0.098 ·capped19.22:11.09:110514.9

What is true of this ramp

  • 10 of the 10 adjacent pairs differ by ΔE00 2 or more. Every step here is a step a reader can see.
  • The tightest pair is 50 to100, at ΔE00 5.5.
  • 11 steps had to give up chroma to stay inside sRGB — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. A wider display would show them more vividly.
  • 4 steps clear 4.5:1 on white (700, 800, 900, 950), and 7 on black (50, 100, 200, 300, 400, 500, 600).

Harmonies from Purple Climax

complement

the hue directly opposite, at the same lightness. #6b7700 (+180°) — chroma capped by sRGB.

analogous

the two neighbours 30° either side. #2c54ff (+-30°), #b200b8 (+30°) — chroma capped by sRGB.

split complement

the two hues either side of the opposite, 30° apart from it. #8a6900 (+150°), #00862c (+210°) — chroma capped by sRGB.

triad

the circle divided in three. #a65600 (+120°), #00816d (+240°) — chroma capped by sRGB.

tetrad

the circle divided in four. #d00019 (+90°), #6b7700 (+180°), #007d89 (+270°) — chroma capped by sRGB.

The ramp as CSS

:root {
  --purple-climax-50: #f6f3ff;
  --purple-climax-100: #ece6ff;
  --purple-climax-200: #d9cdff;
  --purple-climax-300: #c7b2ff;
  --purple-climax-400: #b697ff;
  --purple-climax-500: #a679ff;
  --purple-climax-600: #9857ff;
  --purple-climax-700: #8b22ff;
  --purple-climax-800: #7700e1;
  --purple-climax-900: #460089;
  --purple-climax-950: #180036;
}

Build one from your own colour · More violets