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 converter detects the format and shows the same color in every other notation.
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:
- 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.
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.
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:
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)Calculate your body mass index in lb and ft/in or kg and cm. See your WHO category, from underweight to obesity class III, and the healthy weight range.
- BMR and daily energy needs calculatorCalculate your basal metabolic rate with the Mifflin-St Jeor equation and your total daily energy needs with FAO/WHO activity levels (PAL), in kcal and kJ.
- Body Fat Calculator (U.S. Navy Method)Estimate your body fat percentage from height, neck, waist and hip measurements using the U.S. Navy equations by Hodgdon and Beckett (1984). In inches or cm.