# HEX, RGB, HSL & CMYK Color Converter Instantly convert colors between HEX, RGB, HSL, and CMYK formats with a live color swatch preview and interactive HSL sliders. --- - **Canonical URL:** https://dothecalculation.com/calculators/color-converter - **Category:** Everyday utilities - **Publisher:** Do The Calculation (https://dothecalculation.com) - **Cost:** Free, no account or sign-up required - **Privacy:** Runs entirely in the browser; inputs are never sent to a server - **Methodology:** https://dothecalculation.com/methodology --- ## Convert colors between HEX, RGB, HSL & CMYK Instantly transform color values across all major digital and print formats, with a live swatch preview and interactive sliders. - HEX ↔ RGB ↔ HSL conversion - CMYK print preparation - Interactive hue/saturation sliders ## Understanding Color Models A color model is a mathematical system for representing colors as numerical tuples. Different industries use different models: web designers use HEX and RGB, print designers use CMYK, and artists often prefer HSL or HSB for its intuitive hue-saturation-lightness axes. HEX (hexadecimal) is the most common format in web development. A HEX code like #1A2B3C encodes three two-digit hexadecimal numbers representing the red, green, and blue intensities from 0 (00) to 255 (FF). RGB separates these same channels into three decimal integers: rgb(26, 43, 60) is the decimal equivalent of #1A2B3C. HSL (Hue, Saturation, Lightness) maps colors to a cylinder. Hue is an angle (0°–360°) on the color wheel, saturation is the color purity (0%–100%), and lightness is the brightness from black (0%) to white (100%). HSL is intuitive for designers because adjusting only lightness produces shades and tints of the same hue. ## The HEX Color System Hexadecimal (base-16) uses digits 0–9 and letters A–F. Each of the three channels (R, G, B) is encoded as a two-digit hex value. The minimum is 00 (decimal 0) and the maximum is FF (decimal 255), giving 256 possible intensities per channel and a total of 256³ = 16,777,216 possible colors. To convert a hex code to RGB: split the code into pairs and convert each from base-16 to base-10. For example, #FF8000: FF = 255 (red), 80 = 128 (green), 00 = 0 (blue) → rgb(255, 128, 0), which is a vivid orange. Short-form HEX codes (#RGB) are a three-digit shorthand where each digit is doubled: #F80 expands to #FF8800. This only works when both digits in each pair are identical. ## RGB to HSL Conversion Converting RGB to HSL requires normalizing each channel to the 0–1 range (divide by 255), then computing the maximum (Cmax) and minimum (Cmin). Lightness L = (Cmax + Cmin) / 2. Saturation S = (Cmax - Cmin) / (1 - |2L - 1|) when L ≠ 0 or 1. Hue H depends on which channel is the maximum: if R is max, H = 60 × ((G-B)/(Cmax-Cmin) mod 6). If G is max, H = 60 × ((B-R)/(Cmax-Cmin) + 2). If B is max, H = 60 × ((R-G)/(Cmax-Cmin) + 4). Negative hues are made positive by adding 360. CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print media. Conversion from RGB: K = 1 - max(R,G,B)/255; C = (1 - R/255 - K)/(1-K); M = (1 - G/255 - K)/(1-K); Y = (1 - B/255 - K)/(1-K). ## How to Use This Color Converter Drag the Hue, Saturation, and Lightness sliders to pick a color, or set them to a known HSL value you want to convert. The tool instantly renders a color swatch and outputs the equivalent HEX, RGB, CMYK, and HSL strings. Use the swatch as a quick visual check while designing, and copy any of the four formatted values directly into your CSS, design tool, or print specification. ## Worked Example: Converting hsl(200°, 80%, 50%) The default sky-blue color, hsl(200°, 80%, 50%), converts to RGB(25, 161, 230), which is HEX #19a1e6. Converting that same RGB value to print CMYK gives cmyk(89%, 30%, 0%, 10%) — a strong cyan-dominant mix, consistent with a saturated blue that has no yellow component. ## Related Calculators This converter is part of a Developer Tools cluster. For other visual and dimensional conversions, see the [Aspect Ratio & Image Dimension Calculator](/calculators/aspect-ratio-calculator) or the [QR Code Generator](/calculators/qr-generator). For general unit conversions, use the [Unit Converter](/calculators/unit-converter). ## Frequently asked questions ### What is a HEX color code? A HEX color code is a six-digit hexadecimal string (e.g., #FF5733) that represents a color by specifying the intensity of red, green, and blue channels, each ranging from 00 to FF (0 to 255). ### What is the difference between RGB and RGBA? RGB defines a color using red, green, and blue channels. RGBA adds an alpha channel (A) representing opacity, where 0 is fully transparent and 1 (or 255) is fully opaque. ### Why do web designers prefer HSL over RGB? HSL is more intuitive for design adjustments. You can easily create lighter or darker shades by changing lightness while keeping the hue and saturation fixed, making it ideal for generating color palettes. ### What does CMYK stand for? CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in color printing, where colors are produced by absorbing light rather than emitting it. ### Can I convert HEX to CMYK directly? Yes, by first converting HEX to RGB and then applying the RGB-to-CMYK formula. The intermediate RGB step is always required because CMYK conversion is defined in terms of normalized RGB values. ### What is the color #FFFFFF? #FFFFFF is pure white. All three channels are at maximum intensity: R=255, G=255, B=255. In HSL, it is hsl(0°, 0%, 100%). ### What is the color #000000? #000000 is pure black. All three channels are at zero: R=0, G=0, B=0. In HSL, it is hsl(0°, 0%, 0%). ### What is color gamut? A color gamut is the complete range of colors that a device (monitor, printer, or camera) can reproduce. RGB monitors and CMYK printers have different gamuts, which is why colors may look different on screen vs in print. ### Why does converting from CMYK to RGB sometimes lose accuracy? CMYK is a subtractive model with a narrower gamut than RGB. When converting to RGB (an additive model), the broader RGB space can represent colors that CMYK cannot, introducing rounding and gamut-mapping approximations. ### What is the HSL representation of red? Pure red in HSL is hsl(0°, 100%, 50%). Hue 0° is red on the color wheel, 100% saturation is full color intensity, and 50% lightness is the mid-point between black and white. ### What is a color picker tool? A color picker is an interface element that lets users visually select a color, typically by clicking on a gradient or spectrum, and returns the corresponding HEX, RGB, or HSL value. ### What are web-safe colors? Web-safe colors are a palette of 216 colors that display consistently across different browsers and monitors, originally defined in 1996 when monitors only supported 256 colors. They are largely obsolete today. ## Related concepts - **Color gamut** — The complete subset of colors representable within a given color model or device. - **Alpha channel** — A value representing the transparency of a color, from fully transparent to fully opaque. - **Color temperature** — A measurement in Kelvin describing whether a light source appears warm (orange) or cool (blue). ## Related guides - [Understanding Calculator Formulas: How DTC Turns Inputs into Results](https://dothecalculation.com/blog/site-guides/understanding-calculator-formulas) — Understand how Do The Calculation formulas are presented, what the explanation blocks mean, and how to verify calculator logic before using a result in a real decision. ## Related calculators - [Binary, Hexadecimal, & ASCII Multi-Base Converter](https://dothecalculation.com/calculators/binary-hex-ascii-calculator) — Convert integers and strings between binary, hexadecimal, ASCII, and decimal formats instantly with this free online conversion tool. - [Base64 Text & File Converter](https://dothecalculation.com/calculators/base64-codec-calculator) — Convert text or files to Base64 encoding and decode Base64 strings back to their original format instantly with a file preview. - [Roman Numerals & Decimal Converter](https://dothecalculation.com/calculators/roman-numerals-calculator) — Convert any integer between 1 and 3,999 to Roman numerals and decode Roman numeral strings back to decimal with step-by-step logic. - [Text Case Converter](https://dothecalculation.com/calculators/case-converter) — Transform text between UPPERCASE, lowercase, Title Case, Sentence case, camelCase, snake_case, and kebab-case instantly. - [Fraction, Percentage, and Decimal Equivalency Calculator](https://dothecalculation.com/calculators/fraction-percentage-decimal-calculator) — Convert between fractions, percentages, and decimals instantly, with clear step-by-step proofs shown for repeating decimals too. - [Unit Converter](https://dothecalculation.com/calculators/unit-converter) — Convert length, weight, temperature, volume, and dozens of other measurement units instantly with this free online converter tool. --- _This calculator is for general educational and reference purposes only. Results are estimates and should not be used as the sole basis for critical decisions._ --- _Source: [Do The Calculation](https://dothecalculation.com/calculators/color-converter). Quote freely with attribution and a link to this page._