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
Processed locallyAbout 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
Support for multiple image formats for design needs
- 2
Quick network parameter parsing at a glance
- 3
Rich design tools to fuel your creativity
- 1
Enter or paste your content
Type, paste, or drop your content into the input box.
- 2
Choose processing options
Select the processing options you need, and the tool will show results in real-time.
- 3
Copy or download results
Click copy to clipboard, or download the result as a file to your device.
Generate a 50–900 shade scale from a base color and copy it as CSS variables. It belongs to the Design Tools group and runs entirely in your browser — nothing you type or paste is uploaded.
Color picker, contrast checker, gradient generator and more design tools.
Yes, the gradient generator can randomly generate beautiful gradient color schemes.
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
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools