Color Shade Generator
Generate lighter and darker shades from a base color.
About This Tool
Generate a shade scale from a single base color for buttons, backgrounds, borders, charts, and UI states.
The output is intentionally simple so it is easy to copy into CSS variables or design tokens.
Shade 50
#F4F7FE
Shade 100
#E5ECFD
Shade 200
#C2D3F9
Shade 300
#96B4F5
Shade 400
#628FF1
Shade 500
#2563EB
Shade 600
#2157CF
Shade 700
#1B49AE
Shade 800
#153988
Shade 900
#102A63
Shade 950
#0A1A3D
How to Use
- 1
Enter the values you need or paste your text into the input area.
- 2
Adjust any options, units, or settings for your exact use case.
- 3
Review the result and copy it into your document, workflow, or next task.
Features
Instant Results
Outputs update directly in the browser as you enter values.
Browser-Based Processing
Your inputs are handled locally and are not uploaded for calculation.
Simple Inputs
Clear fields and readable outputs keep repeat tasks fast.
Free to Use
Use the tool immediately with no sign-up or installation.
Common use cases
- ›Build a small color scale for a product UI.
- ›Create background, border, hover, and active shades.
- ›Quickly test whether a base color can support a full interface palette.