Home / CSS & color / HEX to RGB Converter
HEX to RGB Converter
Design tools speak HEX, CSS often wants RGB, and adjusting a shade is easiest in HSL. Enter a colour in any of them and see all three, plus the contrast ratio against white and black text.
How to use it
- Use the picker, or type a HEX or RGB value.
- Read the other formats and the two contrast ratios.
- Copy the format your code needs.
Examples
- #2c6fb5 → rgb(44, 111, 181) → hsl(210, 61%, 44%).
- Three-digit shorthand works: #f5c expands to #ff55cc.
- A ratio of 4.5:1 or better meets the WCAG AA minimum for normal body text.
Questions people ask
What do the contrast numbers mean?
They compare this colour against white and against black. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text, so the higher of the two numbers tells you which text colour to place on this background.
When is HSL more useful than HEX?
Whenever you are building a palette. Keeping hue and saturation fixed and changing only lightness gives a coherent set of tints and shades, which is very hard to do by nudging hexadecimal digits.
Related tools
Updated: 2026-08-07