Free Color Code Converter
Convert between HEX, RGB, and HSL color formats. Preview colors live — great for choosing QR code colors.
Color Preview
#0ea5e9
Understanding Color Formats
HEX
A 6-digit hexadecimal value prefixed with #. Each pair of digits represents the Red, Green, and Blue channels (0-255 as 00-FF). Widely used in CSS and web design.
RGB
Defines color using three values (0-255) for Red, Green, and Blue light channels. This matches how screens actually produce color — by mixing light.
HSL
Stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0-360), Saturation is a percentage (0% = gray, 100% = full color), and Lightness is a percentage (0% = black, 100% = white). HSL is often more intuitive for picking colors.
Frequently Asked Questions
What is the difference between HEX, RGB and HSL?
They are three ways of writing the same colour. HEX and RGB are the same thing in different notation: both give the amount of red, green and blue, HEX in base 16 and RGB in base 10, so #FF8000 and rgb(255, 128, 0) are identical. HSL is a different coordinate system — hue as an angle on the colour wheel, then saturation and lightness as percentages — which is why HSL is far easier to adjust by hand. Nudging lightness in HSL keeps the colour recognisable; nudging one channel in RGB usually shifts the hue as well.
Why does my HSL value convert back to a slightly different HEX?
Because HEX and RGB have only 256 steps per channel, while HSL is expressed in whole degrees and whole percentages. Several distinct HSL values therefore land on the same RGB triplet, and converting back can only return one of them. The rounding error is at most one step per channel and is invisible to the eye, but it does mean HSL to HEX to HSL is not always an exact round trip.
What does the alpha channel do in an 8-digit HEX code?
The last two digits set opacity, from 00 for fully transparent to FF for fully opaque. So #000000CC is black at about 80 percent. It is worth knowing that transparency is the most common reason a QR code stops scanning: a semi-transparent dark module over an unknown background produces an unpredictable contrast ratio, and a scanner needs a reliable one. For codes, use fully opaque colours.
Can I use any colours I like for a QR code?
Not quite. The requirement is contrast, not any particular colour. A scanner has to distinguish dark modules from light ones, so the dark colour needs to be genuinely darker — and the classic mistake is inverting it, with a light pattern on a dark background, which many scanners will not read at all. Our QR code colour contrast checker measures whether a specific pair will work rather than leaving it to guesswork.
Why does the same HEX colour look different on screen and in print?
Because screens emit light and paper reflects it. Screens mix red, green and blue; printing mixes cyan, magenta, yellow and black, and the range of colours each can produce is different. Saturated blues and bright greens are the usual casualties, coming out duller on paper. If a code is going to print, judge the contrast from a proof rather than the screen.
What is a named CSS colour, and are there limits?
CSS defines around 148 named colours — red, tomato, rebeccapurple and so on — and every one of them maps to a fixed HEX value. They are convenient and unambiguous, but they are a fixed list: there is no named colour for an arbitrary brand shade, so anything specific needs HEX, RGB or HSL.
Does grey count as enough contrast for a QR code?
It depends how dark the grey is. Mid-grey on white is a common cause of codes that scan in good light and fail in poor light, because the margin is too thin for a camera fighting glare or shadow. Very dark grey on white is usually fine. Measure it rather than eyeballing it — the eye is far more forgiving than a camera sensor.
Is anything I paste here sent anywhere?
No. The conversion is a few lines of arithmetic running in your browser, with no network request, no storage and no analytics on the value. An unreleased brand colour is safe to paste.
Custom Colored QR Codes in the App
The Scan & Generate app lets you create QR codes with custom foreground and background colors, logo overlays, and branded templates.