Design & Colour
Colour Shade Generator
Enter a hex colour to see a ladder of lighter and darker shades as colour blocks.
Build a shade ladder from one colour
A shade ladder from one brand colour is a fast way to draft UI tokens: lighter steps mix toward white (tints) and darker steps mix toward black (shades). Enter a HEX colour — hexadecimal notation such as #2A6F97 packing red, green and blue (RGB) channels into six digits — choose how many steps each way, and optionally lower opacity so swatches show eight-digit HEX with alpha (#RRGGBBAA). The mix happens in simple RGB space, which is easy to copy into CSS but not as perceptually even as OKLCH or carefully tuned HSL ramps for large design systems. When contrast on text matters, verify pairs with the accessible colour pair tool.
Worked example
Base #2A6F97 with 4 steps each way builds four progressively lighter mixes toward white and four darker mixes toward black; at 100% opacity labels stay six-digit HEX.
Limits and assumptions
RGB linear mixes are not perceptually uniform. Not a full design-token engine with WCAG automation built in.
Frequently asked questions
What are HEX and RGB?
HEX (hexadecimal) codes like #2A6F97 encode RGB (red, green, blue) channel values 0–255 as six hex digits. Both describe the same screen colour.
What does the opacity slider do?
It applies alpha to every swatch. Below 100%, labels use 8-digit HEX (#RRGGBBAA) so transparency is explicit.
Why not use HSL or OKLCH?
Those spaces can look smoother for large ramps. This tool stays on a simple RGB mix for quick, copy-paste HEX values.
Can I paste 3-digit HEX?
Yes — values like #2A6 expand to #22AA66 before mixing.