About the HEX / RGB / HSL Converter
This converter parses almost any CSS colour notation — 3, 4, 6 or 8-digit hex, rgb()/rgba(), hsl()/hsla(), and a large set of CSS named colours — and immediately shows every equivalent format alongside a live swatch. It also calculates relative luminance and WCAG contrast ratios against pure white and pure black so you can judge text legibility at a glance.
How to use it
- 01Type or paste a colour value in any supported format into the input field.
- 02Review the large preview swatch to confirm the colour looks right.
- 03Copy whichever format you need — hex, hex with alpha, rgb, rgba, hsl or hsla.
- 04Check the contrast panel to see whether the colour passes WCAG AA or AAA against white and black backgrounds.
Features
- Accepts 3/4/6/8-digit hex, rgb()/rgba(), hsl()/hsla() and CSS named colours.
- Outputs hex, hex+alpha, rgb, rgba, hsl and hsla simultaneously.
- Per-format copy buttons for fast reuse in code.
- Relative luminance calculation using the WCAG formula.
- Contrast ratio and pass/fail labels (AAA, AA, AA large text, Fail) against white and black.
Practical examples
Design handoff
A designer shares 'steelblue' from a mockup; paste it in to get the exact hex and rgb values for a stylesheet.
Accessibility check
Verify that a brand colour used as body text on a white background reaches at least AA contrast before shipping.
Limitations
- The named-colour list covers roughly 148 standard CSS colour keywords, matching the CSS Color Module Level 4 keyword set; unusual vendor-specific names are not recognised.
- HSL/RGB rounding may shift a value by ±1 unit when converting between colour spaces due to floating-point rounding.
Privacy
All parsing and colour math run locally in your browser using plain JavaScript; nothing is uploaded or logged.
Read the full privacy policy for how the site as a whole handles data.
Frequently asked questions
Does it support alpha transparency?
Yes — 4/8-digit hex, rgba() and hsla() are all parsed and produced, including an alpha-aware hex output.
What does the WCAG label mean?
It shows whether the colour's contrast ratio against the given background meets WCAG 2.1 AA (4.5:1), AA for large text (3:1), or AAA (7:1).
Can I paste a colour name like 'tomato'?
Yes, common CSS named colours are recognised and converted to their hex equivalent automatically.
Why did my HSL round differently than expected?
RGB-to-HSL conversion involves floating point math; values are rounded to the nearest integer for readability.