God of Rain as a scale

Eleven steps from #4466cc, 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#f1f5ff97.0%0.014 ·capped1.09:119.25:10—
100#e2eaff93.8%0.029 ·capped1.20:117.49:1104.8
200#c3d5ff87.4%0.061 ·capped1.47:114.31:1228.1
300#a5c0ff81.0%0.095 ·capped1.82:111.55:1347.0
400#88a9ff74.6%0.130 ·capped2.29:19.18:1456.6
500#6c92fd68.2%0.1632.93:17.18:1556.7
600#597ee761.8%0.1633.77:15.57:1656.9
700#486ad155.4%0.1634.92:14.27:1747.6
800#3757bb49.0%0.1636.49:13.23:1827.1
900#14288a34.0%0.16312.33:11.70:19715.1
950#03004618.0%0.121 ·capped19.25:11.09:110513.1

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.
  • 6 steps had to give up chroma to stay inside sRGB — 50, 100, 200, 300, 400, 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 God of Rain

complement

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

analogous

the two neighbours 30° either side. #0077aa (+-30°), #7a54c0 (+30°) — chroma capped by sRGB.

split complement

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

triad

the circle divided in three. #bb3d36 (+120°), #00862e (+240°) — chroma capped by sRGB.

tetrad

the circle divided in four. #b33b70 (+90°), #8a6900 (+180°), #00816d (+270°) — chroma capped by sRGB.

The ramp as CSS

:root {
  --god-of-rain-50: #f1f5ff;
  --god-of-rain-100: #e2eaff;
  --god-of-rain-200: #c3d5ff;
  --god-of-rain-300: #a5c0ff;
  --god-of-rain-400: #88a9ff;
  --god-of-rain-500: #6c92fd;
  --god-of-rain-600: #597ee7;
  --god-of-rain-700: #486ad1;
  --god-of-rain-800: #3757bb;
  --god-of-rain-900: #14288a;
  --god-of-rain-950: #030046;
}

Build one from your own colour · More blues