Convert HEX, RGB, HSL, HSV, and CMYK colors into matching formats with optional alpha for web use.
Advanced options
How to use our Color Converter Calculator
- Choose your starting format in I am starting with, then fill in only the fields for that format, such as HEX color or the RGB, HSL, HSV, or CMYK values.
- If you need transparency, open Advanced options and enter Alpha / opacity (0 to 1). Leave it at 1 for a fully solid color.
- Pick Decimal places for percent and angle outputs if you want simpler rounded values or more detail for copying into design tools.
- Click Calculate to get HEX, HEX with alpha, RGB, RGBA, HSL, HSV, CMYK, and Copy-ready CSS values.
- Sanity-check the result by comparing Color preview with the color you expected and by reading Important note, especially if you plan to use the CMYK output for printing.
Definitions
HEX: A web color code written with 3 or 6 hexadecimal digits, usually with a leading #, such as #16A085.
HEX with alpha: An 8-digit hex code where the last two digits store transparency.
RGB: A screen color model that uses red, green, and blue channel values from 0 to 255.
RGBA: RGB plus alpha, where alpha controls opacity from 0 to 1.
HSL: A color model using hue, saturation, and lightness.
HSV: A color model using hue, saturation, and value, where value means brightness.
Hue: The color angle on a 0 to 360 degree circle.
Saturation: How strong or colorful the color looks instead of gray.
Lightness: How dark or light a color is in HSL.
Value: How bright a color is in HSV.
CMYK: A print-style color model using cyan, magenta, yellow, and black percentages.
Alpha / opacity: A transparency amount where 1 is fully visible and 0 is fully transparent.
Common mistakes and quick fixes
Mistake: Typing an incomplete value in HEX color , such as 4 or 5 hex digits.
Fix: Enter exactly 3 or 6 hex digits in HEX color . A leading # is fine.
Mistake: Entering RGB numbers outside the allowed range in Red (0 to 255) , Green (0 to 255) , or Blue (0 to 255) .
Fix: Use whole channel values from 0 through 255 for each RGB field.
Mistake: Putting percent values into Alpha / opacity (0 to 1) , such as 50 for 50%.
Fix: Enter alpha as a decimal from 0 to 1, so 0.5 means 50% opacity and 1 means fully visible.
Mistake: Mixing up Lightness (0 to 100%) and Value (0 to 100%) because HSL and HSV are not the same model.
Fix: Make sure I am starting with matches the format you already have before you enter hue and percent values.
Mistake: Expecting CMYK to print exactly like the on-screen Color preview .
Fix: Treat CMYK as a starting estimate and read Important note before using it for final print work.
Mistake: Thinking the result is wrong when grayscale colors show hue as 0 in HSL or HSV .
Fix: If red, green, and blue are equal, the color is grayscale, so hue does not matter and 0 is used by convention.
Limitations & Key Assumptions / Boundary Conditions
- The CMYK result is an approximate conversion from screen color values, not a guaranteed print match.
- Printed color can change with printer settings, ink, paper, and color profile even when the CMYK numbers stay the same.
- This tool accepts HEX input only in 3-digit or 6-digit form. It does not use HEX8 as an input mode.
- When a color is grayscale, hue is mathematically undefined, so the calculator shows hue as 0 by convention.
- Rounded outputs depend on the chosen Decimal places for percent and angle outputs setting, so copied values may differ slightly from full-precision internal math.
- Alpha changes only alpha-capable outputs such as HEX with alpha and RGBA. It does not change the base RGB, HSL, HSV, or CMYK color itself.
Methodology
How the converter works
The calculator reads only the fields for the format chosen in I am starting with. It converts that starting color into RGB first when needed, then derives the other formats from the RGB values. Hidden mode inputs are ignored so old numbers from another format do not affect the result.
Core formulas
HEX to RGB: R = hex pair 1; G = hex pair 2; B = hex pair 3
RGB to HEX: HEX = '#' + two-digit hex(R) + two-digit hex(G) + two-digit hex(B)
RGB to HSL: r=R/255, g=G/255, b=B/255; max=max(r,g,b); min=min(r,g,b); L=(max+min)/2; d=max-min
If d=0, then H=0 and S=0; otherwise S = d / (1 - |2L - 1|), and H depends on which channel is max
RGB to HSV: r=R/255, g=G/255, b=B/255; max=max(r,g,b); min=min(r,g,b); d=max-min; V=max
If max=0, then S=0; otherwise S=d/max, and H depends on which channel is max [1]
CMYK from RGB: if R=G=B=0 then C=0,M=0,Y=0,K=1; else K=1-max(r,g,b); C=(1-r-K)/(1-K); M=(1-g-K)/(1-K); Y=(1-b-K)/(1-K)
RGB from CMYK: r = 255 x (1-C) x (1-K); g = 255 x (1-M) x (1-K); b = 255 x (1-Y) x (1-K)
Alpha to HEX8: A_hex = two-digit hex(round(alpha x 255)); HEX8 = HEX + A_hex
Mini example
Suppose you start with HEX color = #16A085. Split it into pairs: 16, A0, and 85. In decimal, that gives RGB = 22, 160, 133. From those RGB values, the calculator computes matching HSL, HSV, and CMYK values, then formats copy-ready strings like rgb(22, 160, 133) and hsl(...). If Alpha / opacity (0 to 1) is 1, the HEX with alpha value ends in FF.
Rounding and display
RGB outputs are shown as whole-number channels from 0 to 255. HSL, HSV, and CMYK are converted to percent and degree outputs, then rounded to the number of places chosen in Decimal places for percent and angle outputs. HEX output is padded with leading zeros when needed so each channel uses two digits.
Assumptions used
Web-style RGB values are treated as standard 8-bit screen color channels from 0 to 255, and hue is normalized to a 0 to 360 degree circle. CMYK is calculated with a simple device-independent approximation rather than full print color management, so it is most useful as a starting point, not a final press-accurate value [2].