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.
| 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.