About colour shade ramp generator
A shade ramp is a set of lighter and darker versions of one colour, such as the 50 to 900 scales used in modern design systems. They give you consistent options for backgrounds, borders, text and hover states.
How the scale is used
Light steps (50 to 200) suit backgrounds and subtle fills. The middle (400 to 600) is the main brand range for buttons and links. Dark steps (700 to 900) suit text and pressed states.
Copy as CSS variables
Export the ramp as custom properties such as --brand-500, then reference them throughout a stylesheet. Changing a single value updates every place the colour is used.
Check contrast
A shade that looks right may not be readable as text. Test pairs with the WCAG Contrast Checker; text normally needs at least 4.5:1.
