Convert a color
Type a hex code or use the picker. Every format updates as you go.
HEX
#ff8a65
RGB
rgb(255, 138, 101)
HSL
hsl(14, 100%, 70%)
Everything stays in your browser. Nothing is sent or saved.
How to use the color converter
- Type a 3- or 6-digit hex code, with or without the #, or click the swatch button to pick a color.
- Check the big swatch to make sure it is the color you meant.
- Copy the HEX, RGB or HSL value you need.
How the color converter works
A hex code is three numbers from 0 to 255, for red, green and blue, each written as two hexadecimal digits. RGB writes the same three numbers in decimal. HSL describes the color the way people talk about it: a hue around the color wheel, how saturated it is and how light.
HEX → RGBeach pair of digits, from base 16 to base 10
3-digit HEXeach digit doubled: #f80 is #ff8800
RGB → HSLhue in degrees, saturation and lightness in percent
HSL is the easiest to adjust by hand. Keep the hue and saturation, change only the lightness, and you have a lighter or darker shade of the same color for hover states and backgrounds.
- HEX
- #ff8a65
- ff, 8a and 65 in decimal
- 255, 138 and 101
- HSL
- hsl(14, 100%, 70%)
- RGB
- rgb(255, 138, 101)
That’s the warm coral used across this site. A hue of 14 degrees sits between red at 0 and orange at about 30.
Color converter FAQ
What is the difference between HEX, RGB and HSL?
They are three ways to write the same screen color. HEX and RGB are the same red, green and blue values in different notation. HSL is hue, saturation and lightness, which is easier to adjust by eye. Every modern browser accepts all three in CSS.
Can it convert to CMYK for print?
No. CMYK depends on the printer, the ink and the paper, so a simple formula gives a misleading answer. Ask your printer for their color profile, or let your design app convert with it.
Why does my color look different on another screen?
Screens differ in brightness, color range and calibration, and phones often warm their colors at night. A hex code is an exact instruction, but each screen carries it out a little differently, so check important colors on more than one device.
What about 8-digit hex codes?
The last two digits are transparency: #ff8a6580 is the same coral at about half opacity. Browsers accept them in CSS, but this converter reads 3- and 6-digit codes only.
How do I use a hex color in a link or an SVG data URI?
Encode the # as %23, or it cuts the link short: the URL encoder does it for you. For an SVG inside CSS, encode the # the same way, or wrap the whole SVG with the Base64 encoder.
More developer tools
Password generatorStrong, copy-ready passwords with length, symbol and number controls, plus a strength read.JSON formatterPretty-print, minify and validate JSON with clear, human error messages when it breaks.Hash & salt labHash any text with SHA-1, SHA-256 or SHA-512 (with optional salt) via the Web Crypto API.UUID generatorBatch RFC-4122 v4 UUIDs generated locally in your browser, no server round-trip.