Color Converter guide
Convert colors between HEX, RGB, HSL, HSV, and CMYK. Paste any CSS color, including named colors like tomato or rebeccapurple, or pick one visually, and copy the value you need for CSS, design tools, or print.
HEX to RGB, step by step
A HEX color is three pairs of base-16 digits: red, green, blue. Each pair ranges from 00 to FF, which is 0 to 255 in decimal. Convert each pair by multiplying the first digit by 16 and adding the second, where A = 10 through F = 15.
Take #0F766E. 0F = 0 × 16 + 15 = 15. 76 = 7 × 16 + 6 = 118. 6E = 6 × 16 + 14 = 110. So #0F766E is rgb(15, 118, 110). Going back is the reverse: divide each channel by 16 for the first digit and use the remainder for the second. rgb(255, 99, 71) gives FF, 63, 47, so #FF6347, which is the CSS named color tomato.
HSL: the format designers can reason about
HSL describes a color as hue (an angle on the color wheel, 0 to 360 degrees), saturation (0 percent gray to 100 percent vivid), and lightness (0 percent black to 100 percent white). #0F766E is hsl(175, 77%, 26%): a blue-green hue, fairly saturated, quite dark.
HSL is easier to adjust than HEX. Need a lighter version for a background? Keep hue and saturation, raise lightness to 90 percent. Need a hover state? Drop lightness by 5 to 10 points. Need a complementary accent? Add 180 to the hue. With HEX you would be guessing digit changes.
HSV, CMYK, and when to use them
HSV (also called HSB) uses hue, saturation, and value. It is what color pickers in Photoshop, Figma, and most design apps display. Hue matches HSL, but saturation and value are defined differently, so the numbers are not interchangeable: #0F766E is 175°, 87%, 46% in HSV.
CMYK (cyan, magenta, yellow, key/black) is the ink model for print. The conversion here is the standard mathematical one: #0F766E becomes roughly 87% cyan, 0% magenta, 7% yellow, 54% black. Real presses use color profiles such as US Web Coated (SWOP) or GRACoL, and many bright screen colors, especially vivid greens, blues, and oranges, simply can't be reproduced in ink. For logos and packaging, get the printer's proof or a Pantone match.
Shorthand, alpha, and named colors
Three-digit HEX doubles each digit: #F80 is #FF8800. Eight-digit HEX adds an alpha channel for transparency: #0F766E80 is the teal at 80/255, about 50 percent opacity. The equivalent in other formats is rgba(15, 118, 110, 0.5) or hsl(175 77% 26% / 0.5).
CSS has 148 named colors, from aliceblue to yellowgreen. They are handy for prototypes, and the converter accepts them: type rebeccapurple and you get #663399. The input also accepts rgb() and hsl() strings, because it uses your browser's own CSS parser, so anything valid in a stylesheet works here.
Common conversion mistakes
Mixing up the scale of values: RGB channels are 0 to 255, but some tools and APIs use 0 to 1 floats, and HSL saturation and lightness are percentages, not 0-255. Rounding also creeps in: converting HEX to HSL and back can shift a channel by one because HSL values are usually rounded to whole numbers. Keep the original HEX as your source of truth.
Another trap is assuming the same numbers look the same everywhere. A wide-gamut display, such as recent MacBooks and iPhones using Display P3, can show more saturated colors than sRGB, and CSS now supports color(display-p3 ...) and oklch() for them. This tool works in sRGB, the web's default, which is what HEX and rgb() always mean.
Using the converter
Paste or type any color, or use the picker. All five formats update instantly with a copy button for each. The swatch shows the color with transparency applied. Before shipping text colors, run them through the color contrast checker; a color that converts perfectly can still be unreadable on your background. Nothing leaves your browser.
How we calculate: sources
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from base 16 to base 10. #0F766E becomes 0F = 15, 76 = 118, 6E = 110, so rgb(15, 118, 110).
How do I convert RGB to HEX?
Convert each channel from 0-255 to a two-digit hex value and join them. rgb(255, 99, 71) is FF, 63, 47, so #FF6347, the CSS color tomato.
What is the difference between RGB and HSL?
RGB mixes red, green, and blue light. HSL describes hue (0-360°), saturation, and lightness, which is easier for humans to adjust: to make a color lighter, raise L and leave H and S alone.
What is a 3-digit HEX code?
Shorthand where each digit is doubled. #F80 equals #FF8800. It only works when both digits of every pair match.
What do 8-digit HEX codes mean?
The last two digits are alpha (opacity). #0F766E80 is the same teal at about 50% opacity. Modern browsers support 8-digit HEX in CSS.
Is the CMYK conversion accurate for print?
It is a mathematical conversion without a color profile. Real print output depends on the printer, ink, and paper profile such as US Web Coated (SWOP), so ask your printer for a proof on important jobs.
Is anything uploaded?
Everything runs in your browser. Nothing you enter is uploaded to a server or stored by us.