Endless Galaxy as a scale

Eleven steps from #000044, 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#f0f5ff97.0%0.014 ·capped1.09:119.25:10—
100#e1ebff93.8%0.029 ·capped1.20:117.50:1104.8
200#c1d6ff87.4%0.061 ·capped1.47:114.33:1228.1
300#a2c1ff81.0%0.095 ·capped1.81:111.58:1347.0
400#86abfa74.6%0.1212.28:19.22:1456.2
500#7297e468.2%0.1212.89:17.27:1556.1
600#6083ce61.8%0.1213.71:15.65:1656.7
700#4e70b955.4%0.1214.84:14.34:1737.5
800#3c5da549.0%0.1216.37:13.30:1817.0
900#16327534.0%0.12112.03:11.75:19714.3
950#00063f18.0%0.106 ·capped19.11:11.10:110513.2

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 4.8.
  • 5 steps had to give up chroma to stay inside sRGB — 50, 100, 200, 300, 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 Endless Galaxy

complement

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

analogous

the two neighbours 30° either side. #00131e (+-30°), #150035 (+30°) — chroma capped by sRGB.

split complement

the two hues either side of the opposite, 30° apart from it. #1f0a00 (+150°), #101200 (+210°) — chroma capped by sRGB.

triad

the circle divided in three. #280002 (+120°), #001601 (+240°) — chroma capped by sRGB.

tetrad

the circle divided in four. #260013 (+90°), #180f00 (+180°), #00150f (+270°) — chroma capped by sRGB.

The ramp as CSS

:root {
  --endless-galaxy-50: #f0f5ff;
  --endless-galaxy-100: #e1ebff;
  --endless-galaxy-200: #c1d6ff;
  --endless-galaxy-300: #a2c1ff;
  --endless-galaxy-400: #86abfa;
  --endless-galaxy-500: #7297e4;
  --endless-galaxy-600: #6083ce;
  --endless-galaxy-700: #4e70b9;
  --endless-galaxy-800: #3c5da5;
  --endless-galaxy-900: #163275;
  --endless-galaxy-950: #00063f;
}

Build one from your own colour · More blues