Gradient Generator
Gradient Generator exists to do one job well: create css gradients. Colour values are converted and contrast is measured in the page using the same maths browsers use internally. It is used most by product teams checking a dark theme reads properly. Values are sRGB — wide-gamut P3 colours are not represented. There is no account to create, no email to hand over and no cap on how often you use it.
Key features
- Values are sRGB — wide-gamut P3 colours are not represented.
- Converts between HEX, RGB, HSL and HSV without drift.
- Works on desktop, tablet and phone — no separate app to install.
- Built to do one job properly rather than twenty jobs badly.
How to use Gradient Generator
- Set your colour: Pick with the swatch or paste a HEX, RGB or HSL value.
- Adjust and compare: Tune the value and watch the converted formats and contrast figures update.
- Copy what you need: Copy any format straight into your CSS or design file.
Frequently asked questions
- What ratio do I actually need? — 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AAA.
- Can I use these colours commercially? — Yes. Colour values are not copyrightable — use them in any project.
- Which colour spaces does Gradient Generator support? — HEX, RGB, HSL and HSV in sRGB. Wide-gamut Display-P3 values are outside its range.
- How is contrast calculated? — With the WCAG 2.1 relative-luminance formula — the same one accessibility auditors use.