3 tools

Design Tools

Color conversion, gradients, and accessibility contrast checking for designers and front-end developers.

Color Contrast Checker

Check colors against WCAG AA and AAA accessibility standards.

Color Converter

Convert between HEX, RGB, and HSL with a live preview swatch.

CSS Gradient Generator

Build a linear or radial gradient visually and copy the CSS.

Design tools: colours, gradients and contrast

Designers and developers need quick answers about colour. Convert between HEX, RGB and HSL, build CSS gradients visually, and check whether text and background colours meet the WCAG accessibility contrast standards.

Good contrast is not just a rule: it affects everyone reading on a bright screen, in sunlight or with low vision. Use the contrast checker for body text, buttons, links and icons, and test hover and focus states as well.