Ramp builder

One color in, an 11-step tonal scale out, derived with relative color syntax and exported as custom properties.

Each swatch shows white and black text, with both WCAG 2 contrast ratios.

  1. AaAa50L 97%
  2. AaAa100L 89%
  3. AaAa200L 81%
  4. AaAa300L 73%
  5. AaAa400L 65%
  6. AaAa500L 57%
  7. AaAa600L 49%
  8. AaAa700L 41%
  9. AaAa800L 33%
  10. AaAa900L 25%
  11. AaAa950L 17%

Custom properties

Needs JavaScript.