How to use the pastel generator
- Enter the Bold colour you want to soften.
- Drag Softness from 0% (stronger pastel) to 100% (very pale).
- Read the Pastel HEX, its OKLCH value and its Contrast with dark text #1f2937.
- Compare the original and pastel swatches.
- Pick extra colours from the Matching pastel set for tags, charts or backgrounds.
What it does and when to use it
Pastels are the quiet colours of an interface: tag and badge backgrounds, chart fills behind labels, calendar events, alert backgrounds, illustration fills. Making them by hand often goes wrong. Lowering saturation in HSL tends to give muddy greys, and different hues come out at different brightness. This generator works in OKLCH, so the pastel keeps your hue, and every colour in the matching set looks equally light.
Use it to create a soft background for a brand colour, or a family of category colours for labels. If you need several steps between your colour and white, the tints and shades generator gives an even ramp. For complete themes, the UI colour scheme builder creates surfaces and text colours, and the contrast grid checks a whole set of pastels against your text colours.
How it works
From the Softness value s (0 to 1) the tool sets two limits:
- target lightness L = 0.80 + 0.15 × s
- maximum chroma C = 0.11 − 0.08 × s
Your colour is converted to OKLCH. Its lightness is raised to the target if it is lower, its chroma is cut to the maximum if it is higher, and the hue is kept. The result is gamut-mapped to sRGB. The matching set uses the target lightness and the maximum chroma (never below 0.04) at seven hue offsets.
Worked examples
These are the generator’s own results for rose #e11d48.
| Softness | Pastel | Contrast with #1f2937 |
|---|---|---|
| 0% | #fca0a3 | 7.51:1 |
| 60% | #ffcbcc | 10.25:1 |
| 100% | #ffe7e7 | 12.46:1 |
At 60% the pastel is oklch(88.77% 0.0592 17.49), and the matching set is #ffcbcc, #f9d3b1, #dedeaf, #b4e9d3, #b0e4fb, #d8d5ff and #f4cced: pink, peach, cream, mint, sky, lavender and lilac.
Limits and tips
- Pastels are too light for text on white. Use them as backgrounds with dark text on top.
- Very pale pastels can be hard to tell apart for people with colour-vision deficiency; add labels or icons.
- The colours are calculated in your browser.
Frequently asked questions
What makes a colour pastel?
What does the Softness slider change?
Why do pastels work well behind text?
How is the matching set made?
What happens with a colour that is already pale?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.