Color design tools
Pick colours, convert HEX/RGB/HSL, build a palette or gradient, and check contrast. WCAG results use the standard contrast-ratio formula.
Pickers, conversions, palettes, and contrast checks.
More in this category: Color Picker · Contrast Checker
Color Picker
Pick a color visually or type one in, and copy it as HEX, RGB, or HSL for CSS, design files, or brand guidelines.
HEX / RGB / HSL Converter
Convert a color between HEX, RGB, and HSL notation in any direction, for example to turn a brand HEX code into rgb() for CSS.
Color Palette Generator
Start from one base color and get a five-color palette of darker, lighter, and neighbouring shades for a quick UI or brand mock-up.
Gradient Generator
Pick two colors and an angle to create a CSS linear gradient, preview it, and copy the CSS.
Contrast Checker
Measure contrast ratio between two colors.
WCAG Contrast Checker
Check whether a text color and background color have enough contrast to meet WCAG 2 AA or AAA, for normal and large text.