Color converter: HEX, RGB, HSL, HSV, CMYK
Enter a color in any format – for example #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) or cmyk(76%, 47%, 0%, 4%). The color converter for HEX and RGB detects the format and shows the same color in every other notation.
Source: CSS Color 4, § 5.2, W3C – CSS Color Module Level 4: RGB hex notation. Updated: .
How it is calculated
How the color converter works
All formats describe the same color in the sRGB color space, the standard for screens and the web. Everything starts from the RGB value with three channels from 0 to 255:
How to convert colors
- Enter a color in any format, e.g. #3B82F6 or rgb(59, 130, 246).
- The converter detects the format automatically.
- Read and copy HEX, RGB, HSL, HSV and CMYK.
Example: #3B82F6 → 3B = 59, 82 = 130, F6 = 246, so rgb(59, 130, 246). For CMYK: K = 1 − 246/255 ≈ 4%, C = (1 − 59/255 − 0.035) / 0.965 ≈ 76%.
- HEX writes the three channels as two-digit hexadecimal numbers: 59 → 3B, 130 → 82, 246 → F6, giving
#3B82F6. The short form #RGB doubles each digit (#FA0 = #FFAA00); a 4th or 8th digit is the opacity. - HSL (hue, saturation, lightness) and HWB (hue, whiteness, blackness) are calculated with the formulas from CSS Color Module Level 4.
- HSV (also called HSB) uses the same hue as HSL; V is the largest of the three channels and S = (max − min) ÷ max.
- CMYK uses the simple formula K = 1 − max(R, G, B), C = (1 − R − K) ÷ (1 − K) and so on.
Example #3B82F6: R = 59/255 = 0.231, G = 0.510, B = 0.965. The largest value is 0.965, the smallest 0.231. Lightness L = (0.965 + 0.231) ÷ 2 = 59.8%, saturation S = (0.965 − 0.231) ÷ (1 − |2 × 0.598 − 1|) = 91.2%, hue H = 217.2°. Result: hsl(217.2, 91.2%, 59.8%).
Why CMYK is only an approximation
Ink behaves differently from light: which CMYK value best matches a screen color depends on the paper, the printing process and ink coverage. Those properties are stored in an ICC color profile. The formula used here knows nothing about profiles – for pure blue, for example, it returns “cmyk(100%, 100%, 0%, 0%)”, which prints noticeably more purple. For print work, use the values your printer gives you or convert in your layout software with the printer’s profile.
Rounding
RGB and HEX are whole numbers and therefore exact. HSL, HSV and HWB are shown with one decimal place, CMYK in whole percent. Values use a dot as the decimal separator, so you can paste them straight into CSS.
More color tools: the color palette generator, the contrast checker and the image color picker.
Frequently asked questions
How do I convert HEX to RGB?
Each pair of digits is one channel in hexadecimal: #3B82F6 → 3B = 3 × 16 + 11 = 59, 82 = 8 × 16 + 2 = 130, F6 = 15 × 16 + 6 = 246. Result: rgb(59, 130, 246).
Can I use the CMYK values for print?
Only as a rough guide. The conversion is done without an ICC color profile. What counts is your printer’s profile – ask them for the right CMYK values or convert in your layout software using their print profile.
What is the difference between HSL and HSV?
Both use the same hue. In HSL, 100% lightness is always white and 50% is the pure color; in HSV, 100% value is the brightest version of the color, and you reach white by lowering saturation to 0%. Design apps often call HSV “HSB”.
Which notations are recognized?
HEX with 3, 4, 6 or 8 digits (with or without #), rgb()/rgba() including percentages, hsl()/hsla() with deg, turn, rad or grad, hsv()/hsb(), hwb(), cmyk() with percentages and three bare numbers as RGB. Both the comma and the space syntax (CSS Color 4) work.
How do I convert RGB to HEX?
Turn each value from 0 to 255 into a two-digit hexadecimal number and join them: 59 → 3B, 130 → 82, 246 → F6 gives #3B82F6.
Sources and legal basis
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 8: W3C – CSS Color Module Level 4: HWB colors
As of: · Editorial policy
Related tools
- Color palette generatorBuild matching colors from one base color: complementary, analogous, triadic, square, split-complementary or monochrome – with HEX, RGB and HSL values.
- Color contrast checker (WCAG 2.2)Check the contrast between text and background colors: WCAG 2.2 contrast ratio with AA/AAA ratings for normal text, large text and UI components.
- Color picker from image (eyedropper)Get color codes from any image: open a photo, click a spot and copy the HEX, RGB or HSL value – plus the main colors. No upload, it all stays in your browser.
- BMI calculator (WHO categories)BMI calculator in lb and ft/in or kg and cm: your body mass index with WHO category on a colour scale, healthy weight range for your height and BMI Prime.
- White Noise & Rain SoundsFree white, pink and brown noise plus rain sounds with thunder, looping endlessly in your browser. Mix them freely, set a sleep timer with gentle fade-out.
- Hex to decimal and decimal to hex converterHex to decimal: multiply each digit by a power of 16, so FF = 255. Type hex for decimal, binary and octal, or go back from decimal, with the working.
- Fret Calculator: Fret Positions from Scale LengthFret calculator: enter the scale length and get the position of every fret from the nut and from the bridge for guitar and bass, in millimetres and inches.
- Vitamin D: IU to mcg converterConvert vitamin D from IU to mcg and back: 1 mcg = 40 IU, so 1,000 IU = 25 mcg. With the daily intakes and upper limits for each age from MedlinePlus.
- Triathlon Time CalculatorTriathlon time calculator: enter swim pace, bike speed, run pace and transitions to get your finish time and splits for sprint, standard or long distance.