Monochromatic color palette
Lighter and darker versions of one colour, for a simple, unified look.
Palette
One hue in five lightness steps.
Click a colour to copy it. Press Space for a new palette.
Export
:root {
--palette-1: #e3f0ff;
--palette-2: #7fbaff;
--palette-3: #1e90ff;
--palette-4: #004e94;
--palette-5: #002145;
}- 1Pick a base colour or press Space.
- 2Choose a scheme, lock what you like.
- 3Export as CSS, JSON or an image.
- Good to know
- Tints and shades makes a full 50–950 scale.
- Where are my colours and images worked on?
- In your browser, on your device. Colours you type and images you open stay with you.
- Does it work offline?
- Yes. Once this page has loaded, it keeps working without an internet connection.
Related tasks
Ready-made settings for common jobs.
Other tools
More tools for working with colour.