How it works
Hex and RGB are the same numbers
A hex colour is just RGB in base 16. #4CC2A5 is 4C = 76 red, C2 = 194 green, A5 = 165 blue. Each pair covers 0–255, giving 16,777,216 combinations.
Three-digit shorthand doubles each digit: #4CA means #44CCAA. An eight-digit hex adds alpha as a fourth pair, where FF is fully opaque.
When HSL is the better format
HSL describes a colour as hue (0–360° around the colour wheel), saturation and lightness. It is far easier to reason about for design work: to make a colour darker you lower the lightness, and to build a palette you hold hue and saturation steady while varying lightness.
Doing the same in hex means guessing at three values simultaneously. CSS accepts both, so use HSL where you are deriving colours and hex where you are quoting a fixed brand value.
Reading the contrast ratio
Contrast ratios run from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 sets these thresholds:
- 4.5:1 — the AA minimum for normal body text.
- 3:1 — AA for large text (18pt, or 14pt bold) and for non-text elements such as input borders and focus indicators.
- 7:1 — AAA for normal text.
The figures here compare your colour against pure white and pure black, which tells you which of the two to use for text on it. For any other pairing, compute the ratio for that specific pair — a colour with 4.6:1 against white may fail badly against your actual background.
What people use it for
- Translating a brand hex colour into the
rgb()orrgba()a stylesheet needs. - Checking whether text will be readable on a background colour before committing to it.
- Deriving a palette by converting to HSL and varying lightness.
- Matching a colour from a design tool that reports RGB when you need hex.
- Adding transparency by converting to
rgba()with an alpha value.
Nothing is uploaded. This tool runs entirely in JavaScript in your browser. Your input is never sent to a server, never logged and never stored, and no account is required. Once the page has loaded you can go offline and it still works — open your browser's network tab and watch if you'd like to confirm it.
Frequently asked questions
What does the contrast ratio tell me?
How distinguishable two colours are, from 1:1 to 21:1. WCAG AA requires 4.5:1 for normal text, 3:1 for large text and non-text elements like borders and focus rings, and AAA requires 7:1. The figures here are against pure white and pure black.
Is a colour that passes against white accessible?
Only against white. Contrast is a property of a pair of colours, so you must check your actual foreground and background together. A colour at 4.6:1 against white can fail badly against your real background.
What does three-digit hex mean?
Each digit is doubled, so #4CA expands to #44CCAA. It is shorthand only and cannot express every colour.
What is the eighth hex digit for?
Alpha, in eight-digit hex: the last pair is opacity, where FF is fully opaque and 00 fully transparent. Supported in all current browsers.
Should I use hex or HSL in CSS?
Both are valid. HSL is easier to reason about when deriving colours — darken by lowering lightness, build a palette by holding hue steady. Hex is fine for quoting a fixed brand value.
Tools that run where your code is
This page does its work in your browser because sending your data to a server to process it is a bad default. Catalase applies the same idea to AI coding: a free, open-source code editor that runs language models on your own machine through Ollama, with no account and no telemetry. Cloud models are there when you choose one, not by default.
Related tools
- Case converter — Convert between naming conventions.
- HTML formatter — Indent and minify markup.
- Random string generator — Secure random strings.