Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Color Shades Generator
Generate a 50–900 shade scale from a base color and copy it as CSS variables.
Tool Panel
About Color Shades Generator
Builds a 50–900 shade scale from a base colour, each step being the base mixed with white or black by a fixed ratio — simple enough to verify by hand, and it never drifts in hue. Copy the whole scale as CSS variables.
- 1
Ten steps from 50 to 900, each a fixed mix of the base colour with white or black — ratios hardcoded between 0.05 and 0.95 rather than produced by hue rotation.
- 2
Because only lightness moves, the ramp never drifts in hue mid-way, and the maths can be checked by hand (step 50 is 5% base plus 95% white).
- 3
Exports CSS variables directly as `:root { --color-500: …; }`, so one copy pastes a complete ramp into a stylesheet.
- 1
Pick a base colour
Blue #3b82f6 by default; swap in a brand colour.
- 2
Read the ten steps
Step 500 is the base itself; lighter above, darker below.
- 3
Copy the CSS
Variable names are fixed as --color-50 through --color-900.
The step names match but the generation differs: Tailwind tunes each step by hand, while this derives all of them from one formula, so the darker steps come out slightly less saturated.
No, it is fixed at ten. For a finer ramp, interpolate between two generated results or extract a palette from an image instead.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools