Color Converter
HEX, RGB, HSL, CMYK
About This Calculator
Color in digital design is represented in multiple formats: HEX for web CSS, RGB for screen displays, HSL for intuitive adjustments to hue and lightness, and CMYK for print. Converting between them is an everyday task for web developers and designers.
Formula
HEX to RGB: R=hex(RR), G=hex(GG), B=hex(BB); range 0-255
RGB to HSL: normalize to 0-1, compute H (hue 0-360), S (0-100%), L (0-100%)
CSS usage: #RRGGBB or rgb(R,G,B) or hsl(H,S%,L%)
Example Calculation
Convert #FF5733
- HEX FF = 255, 57 = 87, 33 = 51
- RGB(255, 87, 51)
- HSL: H≈11°, S=100%, L≈60%
#FF5733 = RGB(255, 87, 51) = HSL(11°, 100%, 60%)
Common Web Colors
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | 255,0,0 | 0°,100%,50% |
| Green | #008000 | 0,128,0 | 120°,100%,25% |
| Blue | #0000FF | 0,0,255 | 240°,100%,50% |
| White | #FFFFFF | 255,255,255 | 0°,0%,100% |
| Black | #000000 | 0,0,0 | 0°,0%,0% |
| Orange | #FFA500 | 255,165,0 | 39°,100%,50% |
| Purple | #800080 | 128,0,128 | 300°,100%,25% |
| Yellow | #FFFF00 | 255,255,0 | 60°,100%,50% |
Frequently Asked Questions
What is the difference between RGB and HEX?
They represent the same color model — red, green, blue channels each 0-255. HEX uses two-digit hexadecimal notation (00-FF) and is compact for CSS. RGB is more human-readable in code. #FF0000 = rgb(255,0,0).
When should I use HSL instead of RGB?
HSL is more intuitive for design: you can easily adjust just the lightness or saturation without changing the hue. For example, making a button 10% lighter just changes L from 50% to 60%.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print. Unlike RGB which adds light, CMYK subtracts color by mixing inks. A color that looks great on screen (RGB) may look different in print (CMYK) due to gamut differences.
What does opacity / alpha channel mean?
The alpha channel (A in RGBA or HSLA) controls transparency from 0 (fully transparent) to 1 (fully opaque) in CSS. For example, rgba(255,0,0,0.5) is a 50% transparent red.