Color Contrast Checker
Measure contrast between two colours and see which accessibility levels pass.
Color Tools
Use tool
Color Tools
Pick, convert, combine and check colours for real interface work. 6 free tools, no sign-up, and they run in your browser.
All 6 color tools
Pick colours and convert between HEX, RGB and HSL.
Color Palette Generator
Generate complementary, triadic and analogous palettes from any colour.
Color Tools
Use tool
Color Picker
Choose any colour and copy it in HEX, RGB or HSL, with tints and shades.
Color Tools
Use tool
CSS Gradient Generator
Design linear and radial gradients with live preview and copyable CSS.
Color Tools
Use tool
HEX to RGB Converter
Turn any HEX code into RGB and HSL values, with alpha support.
Color Tools
Use tool
RGB to HEX Converter
Enter R, G and B values and get the matching HEX and HSL colour.
Color Tools
Use tool
About color tools
Colour work on the web comes down to three questions: what is this colour in the format I need, what goes with it, and can people actually read text on it. There is a tool here for each.
Picking and converting
The colour picker gives HEX, RGB, HSL and CSS-ready values for any colour, and the HEX to RGB and RGB to HEX converters handle the two directions people paste between most. All of them accept shorthand HEX and alpha values.
Building a set
The palette generator builds complementary, analogous, triadic and monochrome sets from one starting colour, with the tints and shades you need for hover states and borders. The CSS gradient generator produces linear and radial gradients with live preview and copyable CSS.
Checking it works
The contrast checker is the one to run before shipping. It gives the real contrast ratio and whether the pair passes WCAG AA and AAA for both normal and large text. Contrast is not a matter of taste: text below 4.5:1 is genuinely hard to read for a lot of people, and it is the accessibility failure found most often on real sites.
Color Tools A to Z
Every tool in this category, in alphabetical order.
Frequently asked questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text, which is 18.66px bold or 24px and above. AAA asks for 7:1 and 4.5:1. The checker reports all four verdicts at once.
What is the difference between HSL and RGB?
They describe the same colours differently. RGB mixes red, green and blue light; HSL names a hue then adjusts saturation and lightness, which makes it far easier to build a set of related shades by hand.
Can I get colours out of an image?
The palette generator works from a colour you choose. To sample one from a picture, use your operating system's colour picker or a browser extension, then paste the HEX value here.
Are these colour values safe to use in CSS?
Yes. Every value is given in a form you can paste straight into CSS, including modern notations with alpha.
Other categories
The rest of the collection, including every calculator.
Everyday Tools
Timers, counters, pickers and the small tools you reach for daily.
14 toolsText Tools
Count, clean, convert and reorder any block of text.
13 toolsDeveloper Tools
Format JSON, inspect URLs and work with timestamps.
25 toolsImage Tools
Compress and resize pictures without uploading them.
14 toolsEncoding & Conversion
Base64, URL and HTML encoding in both directions.
8 toolsUtility Tools
Passwords, QR codes and other everyday helpers.
9 toolsSEO Tools
Links, meta tags, schema markup, redirects and SERP previews.
34 toolsCode Formatters
Tidy or shrink HTML, CSS, JavaScript, XML, SQL and Markdown.
10 tools