Shade scales in HSL

Build each color as a 50-900 ramp in HSL, and stop short of pure black.

From refactoring-ui, section 4, Color.

One base, two ramps

Pick a base color, then compare the 700-900 rows.

Lightness onlyBad

    Payment received

    $4,210.00 from Northwind

    View
    hsl(h s L)
    HSL methodGood

      Payment received

      $4,210.00 from Northwind

      View
      hsl(h→ s→ L)
      function shade(base, t, lighter) {
  const target = lighter ? 60 : nearest(base.h, [0, 240]);
  return {
    h: rotateToward(base.h, target, 15 * t),
    s: lighter ? base.s * (1 - 0.3 * t) : base.s + (100 - base.s) * 0.3 * t,
    l: lighter ? base.l + (97 - base.l) * t : base.l - (base.l - 9) * t,
  };
}

      Swap brand, keep the system

      Change the brand hue, then turn on dark roles.

      Hand-picked hexesBad

      Payouts

      Active

      Weekly transfer to the account ending 4821.

      Next: Friday
      color: #1e3a8a
      Roles on a rampGood

      Payouts

      Active

      Weekly transfer to the account ending 4821.

      Next: Friday
      color: var(--brand-900)

      #000000 vs #111827

      Drag the size, then switch to the dark surface.

      Pure blackBad

      Quarterly revenue

      Up 12% on last quarter · Details

      #000000 on #ffffff
      Gray-900Good

      Quarterly revenue

      Up 12% on last quarter · Details

      #111827 on #ffffff
      h1, h2 { color: #111827; }
.dark  { background: #111827; color: #f9fafb; }

      Why it matters, pros and cons

      Why it matters

      A fixed ramp turns every color choice into picking a step. Shifting hue and saturation keeps tints clean and shades rich.

      Pros

      • Roles map to steps across every hue.
      • A rebrand regenerates one ramp.
      • Dark mode reuses the same steps.

      Cons

      • HSL lightness is not perceptual; hand-tune or use OKLCH.
      • Rotation amounts are taste; treat output as a draft.
      • A two-color landing page needs fewer steps.