HEX to RGB converter
Convert between HEX, RGB, HSL and HSB, generate shades and tints, and check contrast against WCAG.
Runs entirely in your browser. Nothing is sent anywhere.
Click any swatch to copy its HEX code.
How to use the colour converter
- Enter a colour any way you like: use the picker, type a HEX code, or paste an RGB or HSL string. Every other field updates immediately.
- Read the conversions. HEX for CSS and design tools, RGB for anything needing numeric channels, HSL for adjusting lightness predictably, HSB because Photoshop and Figma use it.
- Use the shades and tints row to build a colour scale from a single brand colour. Click any swatch to copy its HEX code.
- Set a second colour in the contrast section to check readability. You get the ratio and a plain verdict against the WCAG AA and AAA thresholds.
What you can use it for
Building a palette from one brand colour is the most valuable thing here. Most brands hand you a single hex code, and you need eight: a dark version for text, light ones for backgrounds and hover states, a mid tone for borders. The shades and tints row generates a consistent scale in one step instead of eyeballing each one.
Contrast checking is not optional if anyone with imperfect eyesight uses your site. WCAG AA requires 4.5:1 for normal text and 3:1 for large text, and a great many brand colours fail against white — a light blue that looks fine to a designer on a calibrated monitor can be genuinely unreadable on a phone in sunlight.
Converting between formats is the daily friction this removes. A design file gives you HSB, CSS wants HEX, a chart library wants an RGB array, and an email template wants a six-digit hex with no hash. Doing that conversion by hand is a waste of a minute you will spend several times a day.
HSL is worth learning specifically because it makes adjustment predictable. Keeping hue and saturation fixed while lowering lightness gives you a darker version of the same colour. Doing the same in HEX means guessing at three numbers separately and usually getting a slightly different hue by accident.
Things to know about colour formats
HEX and RGB are the same thing written differently. #2F6BFF is simply 47, 107, 255 in hexadecimal. Neither has any advantage over the other for accuracy — HEX is compact and copies cleanly, RGB is easier to manipulate in code.
HSL and HSB are not the same, despite looking similar. Both start with hue and saturation, but HSL's third value is lightness where 50% is the pure colour and 100% is white. HSB's third value is brightness where 100% is the pure colour. Pasting an HSB value into a CSS hsl() function gives you the wrong colour, and this catches people out constantly.
The contrast ratio is calculated from relative luminance, not from how different two colours look. Two colours can be from opposite sides of the colour wheel and still fail, because they are similarly bright. Red text on a green background is a classic failure — visually distinct, nearly identical in luminance, and unreadable to a significant number of people.
Eight-digit hex codes include transparency. #2F6BFF80 is the same blue at 50% opacity, with the last two digits being the alpha channel. Every current browser supports this, and it is often tidier than switching to rgba() just to add transparency.
Frequently asked questions
WCAG AA, which is the level most organisations and legal requirements reference, needs 4.5:1 for body text and 3:1 for large text — that means 18pt and above, or 14pt bold. AAA is stricter at 7:1 and 4.5:1. If your brand colour fails against white for body text, use a darker variant for text and keep the original for larger headings and accents.
Convert to HSL and raise the lightness value while leaving hue and saturation alone. That gives you a genuinely lighter version of the same colour. The tints in the swatch row do exactly this, which is why they stay recognisably the same hue rather than drifting.
Screens emit light and mix colour additively in RGB; print reflects light and mixes subtractively in CMYK. Bright saturated blues, greens and oranges simply cannot be reproduced in CMYK ink and will come back duller. Ask your printer for a CMYK conversion rather than relying on an automatic one.
In HSL, lightness runs from black at 0% through the pure colour at 50% to white at 100%. In HSB, brightness runs from black at 0% to the pure colour at 100%, and you get white by also dropping saturation to zero. CSS uses HSL; Photoshop and Figma pickers use HSB. They are not interchangeable.
Yes, and the alpha is preserved when converting to an eight-digit hex code. The contrast checker ignores transparency, though, because the actual contrast depends on whatever is behind the semi-transparent colour.