Accessible ramp

Give it one color and get a complete 50 to 950 scale in OKLCh, with the contrast of every step against white and black already worked out.

Your color

yours

Every step with its contrast against white and black
Step	On white	On black	Safe for
50	1.09	19.23	text on black
100	1.21	17.31	text on black
200	1.43	14.72	text on black
300	1.86	11.27	text on black
400	2.77	7.59	text on black
500	4.12	5.10	text on black
600yours	5.98	3.51	text on white
700	8.20	2.56	text on white
800	10.90	1.93	text on white
900	13.68	1.54	text on white
950	17.89	1.17	text on white

Take it

:root {
  --brand-50: #f4f4ff;
  --brand-100: #e8e7ff;
  --brand-200: #d6d4ff;
  --brand-300: #bcb6ff;
  --brand-400: #9b8cff;
  --brand-500: #8261ff;
  --brand-600: #6d3bee;
  --brand-700: #5b1fd1;
  --brand-800: #4900b2;
  --brand-900: #37008b;
  --brand-950: #1d0052;
}

Why this rule exists

One brand color is not enough, and tinting it does not helpA single brand color cannot be a surface, a link and a tint at once. And the usual way of generating the missing shades is what makes them unusable.
White text on your brand color almost certainly failsMost brand colors are too light to carry white text at 4.5:1. The fix is usually dark text on the brand color, not a different brand color.

The other tools

Contrast checker

Two colors, the ratio, and the nearest color that passes.

Open

Palette matrix

Every pair in your palette, checked at once.

Open

Color blindness check

Two colors that pass contrast can still be the same color.

Open

Focus and UI check

Fifteen interface parts, and which of them the 3:1 rule exempts.

Open