Palette

Which text colour you can write on each step at 4.5:1 — WCAG 2.2 AA for body text. The middle steps almost never take either: they work as background, border and large icon, not as text.

• Aatakes white
• Aatakes black
• —neither one

It comes out as oklch() and not hex on purpose: hex is eight bits and rounding it moves the lightness enough to break the ladder. Hex values are below if you need them.

:root {
  --color1-50:   #eff6fe;
  --color1-100:  #ddebff;
  --color1-200:  #bfd9fe;
  --color1-300:  #9ac2fe;
  --color1-400:  #6ba4fd;
  --color1-500:  #3b82f6;
  --color1-600:  #2867d3;
  --color1-700:  #1b4daa;
  --color1-800:  #10347c;
  --color1-900:  #081e51;
  --color1-950:  #030f2e;

  --color2-50:   #f0f8f0;
  --color2-100:  #ddf0dd;
  --color2-200:  #bbe4be;
  --color2-300:  #8ed496;
  --color2-400:  #54bf6b;
  --color2-500:  #16a34a;
  --color2-600:  #0d843d;
  --color2-700:  #06662f;
  --color2-800:  #034720;
  --color2-900:  #012c12;
  --color2-950:  #001708;

  --color3-50:   #fff2f1;
  --color3-100:  #ffe2e0;
  --color3-200:  #fec8c3;
  --color3-300:  #fea59d;
  --color3-400:  #fd776e;
  --color3-500:  #f64943;
  --color3-600:  #dc2626;
  --color3-700:  #a61312;
  --color3-800:  #710704;
  --color3-900:  #480301;
  --color3-950:  #290200;
}