How to convert a color code
Type or pick a color
Type #FF5733, rgb(255, 87, 51) or a color name, or use the picker.
Adjust if you like
Move R, G, B or opacity and every format updates at once.
Copy the code
Press “Copy” next to the format you need.
Color formats and where they’re used
| Format | Example | Used in |
|---|---|---|
| HEX | #446E7D | CSS and design; the most common. |
| RGB | rgb(68, 110, 125) | CSS and code; rgba() with transparency. |
| HSL | hsl(195.8, 29.5%, 37.8%) | CSS; easy to make a color lighter or darker. |
| HSV / HSB | hsv(195.8, 45.6%, 49%) | Photoshop and drawing apps (not a CSS format). |
| HWB | hwb(195.8 26.7% 51%) | Modern CSS. |
| CMYK | cmyk(45.6%, 12%, 0%, 51%) | An estimate for print (see the note). |
| OKLCH | oklch(51.3% 0.052 222.7) | Modern CSS: smoother gradients and balanced palettes. |
FAQ
How do I convert HEX to RGB by hand?
Split the code into three pairs and convert each from hexadecimal to decimal: 44 = 4×16+4 = 68, 6E = 6×16+14 = 110, 7D = 7×16+13 = 125, so the color is rgb(68, 110, 125).
What’s the difference between RGB and RGBA?
RGBA is RGB plus a fourth number for transparency, from 0 (fully transparent) to 1 (opaque). Move the opacity slider to get it; in HEX two more digits are added at the end.
What’s the difference between HSL and HSV?
Both start with the hue (H). In HSL full lightness (L=100%) is white; in HSV full value (V=100%) is the color at its strongest. CSS uses HSL; Photoshop calls HSV “HSB”.
Is the conversion accurate?
Yes. We compared the results with independent Python calculations (colorsys and the official formulas) on thousands of colors. Values are shown with one decimal; HEX and RGB are whole numbers.
How do I find a color’s name?
If the code has a CSS name we show it; otherwise we show the closest of the 148 names. All names are in the list below the tool, with their codes.