utility calculator

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.

Formula Verified by Dr. Arthur Pendelton, PhD

Inputs

Interactive Color Sliders

Hue (H)200°

Saturation (S)80%

Lightness (L)50%

Results

Color Preview

HEX Format

#19a1e6

RGB Formatrgb(25, 161, 230)

CMYK Formatcmyk(89%, 30%, 0%, 10%)

HSL Formathsl(200°, 80%, 50%)

Bookmark this color converter

Save this page for fast color translations during web design, branding, and print production workflows.

Formula

Color Space Math & Calculations

Lightness (L) = (Cmax + Cmin) / 2
Saturation (S) = (Cmax - Cmin) / (1 - |2L - 1|)
CMYK Cyan (C) = (1 - R/255 - K) / (1 - K)

Conversions map coordinates between additive light color space (RGB), cylindrical perception color space (HSL), and subtractive ink color space (CMYK).

Step by step

How the calculation works

1Drag the Hue slider to choose the basic color wheel angle (0° to 360°).
2Drag the Saturation slider to select color purity (0% gray to 100% full color).
3Drag the Lightness slider to adjust from black (0%) to white (100%).
4Instantly copy the HEX, RGB, or CMYK color strings from the results panel.

Example

Example Color Coordinates

A vibrant sky blue HSL coordinate like hsl(200°, 80%, 50%) translates to HEX code #19a1e6, RGB: rgb(25, 161, 230), and CMYK: cmyk(89%, 30%, 0%, 10%).

Related guides

Learn more about this calculation

Guide

Understanding Calculator Formulas: How DTC Turns Inputs into Results

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.

Site Guide

How to Use Do The Calculation Calculators: A Practical Step-by-Step Guide

Learn the fastest reliable workflow for using Do The Calculation calculators, reading results, checking formulas, and using save, print, share, and export actions correctly.

How to understand and use this calculator

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 or the QR Code Generator. For general unit conversions, use the Unit Converter.

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).

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.

How to understand and use this calculator

Understanding Color Models

The HEX Color System

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

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

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

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).

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?+

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?+

Why does converting from CMYK to RGB sometimes lose accuracy?+

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?+

HEX, RGB, HSL & CMYK Color Converter

Inputs

Interactive Color Sliders

Results

Bookmark this color converter

Color Space Math & Calculations

How the calculation works

Example Color Coordinates

Learn more about this calculation

Understanding Calculator Formulas: How DTC Turns Inputs into Results

How to Use Do The Calculation Calculators: A Practical Step-by-Step Guide

HEX, RGB, HSL & CMYK Color Converter

Inputs

Interactive Color Sliders

Results

Bookmark this color converter

Key output metrics

Color Channel Intensities

How to understand and use this calculator

Understanding Color Models

The HEX Color System

RGB to HSL Conversion

How to Use This Color Converter

Worked Example: Converting hsl(200°, 80%, 50%)

Related Calculators

Related concepts

Frequently Asked Questions

Color Space Math & Calculations

How the calculation works

Example Color Coordinates

Learn more about this calculation

Understanding Calculator Formulas: How DTC Turns Inputs into Results

How to Use Do The Calculation Calculators: A Practical Step-by-Step Guide

Key output metrics

Color Channel Intensities

How to understand and use this calculator

Understanding Color Models

The HEX Color System

RGB to HSL Conversion

How to Use This Color Converter

Worked Example: Converting hsl(200°, 80%, 50%)

Related Calculators

Related concepts

Frequently Asked Questions