Convert any color and check its contrast with the Color Converter — HEX, RGB, HSL, and WCAG ratios, all in your browser.
Three views of the same color
Design tools, CSS, and inspection panels each surface colors differently. HEX is a compact hexadecimal encoding, RGB expresses the red/green/blue channels directly, and HSL describes the same color as hue, saturation, and lightness.
None of the formats is more accurate — they are conversions of the same sRGB value. Picking one is about readability: HSL is easier to reason about when you want a lighter or less saturated variant; HEX is compact; RGB maps to device channels.
How the formats map to each other
`#3b82f6` decodes to rgb(59, 130, 246). Convert those channels to HSL and you get hsl(217.2, 91.4%, 59.8%) — a mid-blue.
Conversions are lossless in practice when you round to whole channels, which is why converters show the same swatch from any input format.
- HEX: #rrggbb or #rgb shorthand; #rrggbbaa adds alpha
- RGB: rgb(r, g, b) with 0-255 channels or percentages
- HSL: hsl(h, s%, l%) with hue 0-360 degrees and saturation/lightness 0-100%
Alpha: when the fourth channel matters
Alpha stores transparency. Eight-digit HEX (#rrggbbaa), rgba(), and hsla() all carry it.
Transparency changes effective contrast: a semi-transparent foreground blends with the background behind it, so a pair that passes a contrast check at 100% opacity can fail when composited over a busy image.
Contrast: the number that protects readability
WCAG 2.x defines contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white).
The practical thresholds: at least 4.5:1 for normal text and 3:1 for large text to meet AA, and 7:1 for normal text to meet AAA.
Badges, icons, and placeholder text are often exempt from strict thresholds, but applying them anyway makes interfaces more readable for everyone.
| Target | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
A color workflow you can repeat
- Enter a color from your design tool in HEX, rgb(), or hsl() form.
- Read the equivalent values and copy the format your codebase uses.
- Set foreground and background colors in the contrast checker.
- Confirm the pair reaches the AA or AAA target for the text size you use.
- Test the final pairing on real screens, including dark mode.
FAQ
Q.Are conversions lossless?
A.In practice, yes: HEX, RGB, and HSL describe the same sRGB color, and converters round channel values to integers, which is what CSS and design tools use.
Q.Do my colors leave the browser?
A.No. Conversion and contrast math run locally on your device.
Q.When do I need AAA instead of AA?
A.AA is the common compliance target and is required for most public-facing text. AAA is a stronger standard, useful for content-heavy products or when accessibility is a product requirement. Aim for AA as the baseline and AAA where feasible.
References
This guide is based on the following specifications:
- W3C CSS Color Module Level 4: https://www.w3.org/TR/css-color-4/
- W3C WCAG 2.2 – Contrast (Minimum): https://www.w3.org/TR/WCAG22/#contrast-minimum
- IEC 61966-2-1 – sRGB color space (via ICC): https://www.color.org/srgb.xalter
Convert a color and check contrast
HEX, RGB, HSL, alpha, and WCAG ratios — entirely in your browser.
Same color, better decisions
Format conversions are the easy part. The decisions — which format your team uses, whether alpha is safe, whether a pair passes contrast — are where quality lives.
Convert and verify with the Color Converter, and check the final pair before you commit the palette.
Related Articles
CSS Minifier Guide: Shrink Stylesheets
CSS is mostly whitespace and comments by weight. A minifier removes both — and a good one knows exactly what must survive.
Certificate Decoder Guide: Read X.509 Details
Every TLS handshake starts with a certificate. Decode the fields that matter: subject, issuer, validity, public key, and fingerprints — locally.
RSA Key Pair Guide: Generate PEM Keys
Public and private keys, PEM headers, key sizes, and storage habits. Generate a pair locally and understand exactly what the files mean.
CSV to JSON Converter Guide
CSV looks simple until a field contains a comma, a newline, or a leading equals sign. Learn the RFC 4180 rules and convert data without losing anything.
Cron Expression Guide: Five Fields, Next Runs
A cron expression is five fields that look obvious until one of them is wrong. Learn the syntax, the day-of-week trap, and how to preview the next runs before you deploy.
Regex Tester Guide: Test Patterns Locally
Most regex failures are visible the moment you see the matches: wrong flags, greedy quantifiers, or a group you never intended. Test locally and read the actual matches before blaming the pattern.