Color Converter
Convert any color between HEX, RGB, HSL, HSV, and CMYK. Pick a color or type a value in any format — every other notation updates instantly, right in your browser.
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
How to use Color Converter
- 1
Pick or paste a color
Click the swatch to open your color picker, or paste a value into the HEX, RGB, or HSL field. The whole tool follows whichever color you choose.
- 2
Edit in any format
Type directly into the HEX, RGB, or HSL field. Every other notation — including HSV and CMYK — recalculates the moment you make a change.
- 3
Read every notation
See the same color expressed five ways at once, so you can match a design across CSS, print, and image editors without reaching for a second tool.
- 4
Copy what you need
Use the copy button beside any value to put it on your clipboard, ready to drop into your stylesheet or design file.
A Practical Guide to Color Formats
Same color, different notations
HEX, RGB, HSL, HSV, and CMYK are not different colors; for screen work they are different ways of writing the same point in color space. Pure red can be spelled #ff0000, rgb(255, 0, 0), or hsl(0, 100%, 50%), and all three render identically. Choosing a notation is about which one is easiest to reason with for the task in front of you, which is why a converter that shows them side by side saves real time. You pick the format that fits your tool and copy it, instead of doing the arithmetic by hand.
The one exception is CMYK, which targets ink rather than light and so does not map perfectly onto the others, a point worth keeping in mind and one we return to below.
HEX and RGB are the same numbers
RGB describes a color as three channels, red, green, and blue, each ranging from 0 to 255, mixed as light. HEX is simply those same three numbers written in base sixteen, two hex digits per channel. So in #f5530c the f5 is the red channel, which is 245, the 53 is green, which is 83, and the 0c is blue, which is 12, giving exactly rgb(245, 83, 12). Because one byte holds values 0 through 255, each channel needs exactly two hex digits, and the conversion between the two is lossless and direct.
Shorthand HEX is a convenience: a three-digit code doubles each digit, so #f50 expands to #ff5500. This tool reads shorthand the same way a browser does, and accepts the code with or without the leading hash in upper or lower case.
Alpha: RGBA and HSLA
Adding an alpha channel turns a color partly transparent. RGBA and HSLA append a fourth value, an opacity from 0 for fully transparent to 1 for fully opaque, so rgba(245, 83, 12, 0.5) is the same orange at half opacity. Modern CSS also supports eight-digit HEX, where the last two digits encode alpha as a byte, so an alpha of one half is roughly the hex pair 80 appended to the color.
Alpha is what lets a color blend with whatever sits behind it, which is essential for overlays, scrims, soft shadows, and tinted glass effects. Remember that the same alpha looks different over different backgrounds, since transparency means the final appearance is a mix of your color and the layer beneath it.
Why HSL is easier to tweak
HSL describes a color the way a person thinks about one: hue is the position on the color wheel from 0 to 360 degrees, saturation is how vivid it is as a percentage, and lightness is how bright it is as a percentage. That structure makes manual adjustment intuitive. To get a darker shade of the same color you lower the lightness and leave hue and saturation alone; to mute a color you lower the saturation. Doing the equivalent in raw RGB means changing all three channels in concert, which is far harder to eyeball.
This is why HSL shines for building color systems. Want a hover state slightly darker than the base, or a row of swatches that share a hue but step through lightness? Nudge one HSL number. HSV, also written HSB, is closely related but pairs hue and saturation with value, or brightness, instead of lightness, and it is the model many image editors and color pickers expose, so being able to read both keeps you fluent across design tools.
Worked example: white, black, and a mid color
The endpoints are clean. White is #ffffff, which is rgb(255, 255, 255) and hsl(0, 0%, 100%): every channel maxed, or in HSL terms full lightness with no saturation so hue is irrelevant. Black is #000000, rgb(0, 0, 0), and hsl(0, 0%, 0%): everything at zero. A mid gray sits halfway, near #808080 and rgb(128, 128, 128), which in HSL is hsl(0, 0%, 50%), nicely showing that any neutral has zero saturation and a lightness that tracks its brightness.
Now a real color: that same orange, #f5530c, reads as rgb(245, 83, 12) and as roughly hsl(18, 92%, 50%). The HSL form tells you at a glance it is a warm hue near red-orange, highly saturated, and at medium lightness, information the hex string hides. Paste any of these into the tool and watch the others fill in instantly.
CMYK and the limits of screen-to-print
CMYK stands for cyan, magenta, yellow, and key, where key is black, and it is a subtractive model built for ink on paper rather than light on a screen. Because it works by subtracting light that the paper reflects, it cannot reproduce every vivid color a glowing display can, so a brilliant on-screen blue or green often comes out duller in print. The CMYK values this tool reports are a direct mathematical conversion from RGB and are genuinely useful as a starting point, but they are not a substitute for a color-managed print workflow.
For color-critical print, always confirm against your printer's actual ICC profile and a proof, because the device, the paper, and the inks all shift the result. Think of the CMYK output here as a fast estimate, not a guarantee.
Named colors and the leap to wide gamut
CSS also ships about 150 named colors, words like tomato, rebeccapurple, and slategray, each of which is just an alias for a specific hex value. They are handy for quick prototyping and for memorable shades, though for a real design system explicit hex or HSL values give you finer control and consistency. Named colors are convenient labels, not a separate color space.
Looking forward, newer CSS color functions move beyond the classic sRGB gamut these formats assume. Functions for spaces such as the perceptually uniform oklch and the wider display-p3 can express more saturated colors than HEX and RGB can reach, which matters as modern screens grow more capable. The HEX, RGB, HSL, and HSV values this tool handles remain the everyday currency of the web, and understanding them is the foundation for adopting those newer spaces with confidence.
Frequently asked questions
How do I convert a HEX color to RGB?
What is the difference between HSL and HSV?
Does this support 3-digit shorthand HEX?
What is CMYK used for?
Is my data uploaded to a server?
Related tools
Keep going with these handy tools