Tint and shade ramp

How do I get a 50-to-900 scale out of one brand colour?

Nine steps either side of one colour, each with its contrast against the ground you will set text on. The ramp most palettes need and few generators measure.

base colour text ground

The quick brown fox jumps over the lazy dog, at the size body text is actually set.

#0d7490 Nine steps, each measured against #ffffff. A pass clears 4.5:1 for body text.

ready to paste

--brand-100: #e7f1f4;
--brand-200: #c3dce3;
--brand-300: #86bac8;
--brand-400: #4a97ac;
--brand-500: #0d7490;
--brand-600: #0a5d73;
--brand-700: #084656;
--brand-800: #052e3a;
--brand-900: #031d24;

100 #e7f1f4 1.14:1
200 #c3dce3 1.43:1
300 #86bac8 2.13:1
400 #4a97ac 3.33:1
500 #0d7490 5.35:1
600 #0a5d73 7.44:1
700 #084656 10.43:1
800 #052e3a 14.34:1
900 #031d24 17.42:1

how to use it

Paste the brand colour. It becomes the middle step of the ramp.
Set the ground you will actually set text on - white for a light theme.
Read each step's contrast to find the first one that clears 4.5:1.

what this page cannot do

A ramp built here is a ramp you still have to apply. The extension lists the colours a live page already uses, which is how you find out the ramp shipped with three near-identical 600s in it.

Tokens in the panel What design tokens is this page actually painting with?

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

no host permissions · the reading is free