Skip to main content
Calcimator

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK formats. Enter RGB values and get all other representations instantly.

Every color format on this page describes the exact same color, just structured for a different purpose. RGB (Red, Green, Blue) values from 0-255 describe how much of each primary light color a screen pixel emits, and HEX is simply that same RGB triple written as a base-16 string (e.g. red=6 becomes "06") because hexadecimal packs each 0-255 channel into exactly two characters -- convenient for CSS and design tools. HSL (Hue, Saturation, Lightness) re-expresses the same color around how humans actually perceive it: Hue is the color's position on a 360-degree color wheel, Saturation is how vivid versus gray it is, and Lightness is how close to black or white it is -- which makes HSL far easier to reason about when you want "the same hue, but lighter" or "less saturated." CMYK (Cyan, Magenta, Yellow, Key/black) is the subtractive model used in printing, where K is calculated first as 1 minus the brightest RGB channel (scaled to 0-1), and C, M, and Y are each derived from how far their corresponding RGB channel falls short of full brightness after removing the K component. Because monitors mix light (additive) while printers mix ink (subtractive), a color that looks vivid on screen in RGB/HSL often prints duller in CMYK -- which is why designers preparing print materials should always check the CMYK conversion rather than assuming the on-screen RGB color will reproduce identically on paper.

Convert

Results

HEX
#06B6D4
RGB
rgb(6, 182, 212)
HSL
hsl(189, 94%, 43%)
CMYK
cmyk(97%, 14%, 0%, 17%)
How to Use This Calculator
  1. Enter the Red, Green, and Blue channel values (0–255 each) for your color.
  2. The HEX output gives you the CSS hex code (e.g., #06B6D4) ready to paste into stylesheets.
  3. Use the RGB string for CSS color properties and the HSL format for hue/saturation adjustments.
  4. The CMYK output is useful for print design — note that monitor colors may not perfectly match printed output.
  5. Adjust any channel value and all four formats update instantly for real-time color exploration.

What each input means

Red (R)
Red color channel (0-255).
Green (G)
Green color channel (0-255).
Blue (B)
Blue color channel (0-255).

How this is calculated

Worked example, using the default values

  1. Identify Input Parameters
    Red (R) = 6, Green (G) = 182, Blue (B) = 212 = 3 input(s) provided
  2. Calculate HEX
    HEX = R,G,B -> base-16, 2 digits each
    #06B6D4 = #06B6D4
  3. Calculate RGB
    RGB = rgb(R, G, B)
    rgb(6, 182, 212) = rgb(6, 182, 212)
  4. Calculate HSL
    L = (max+min)/2; S = d/(2-max-min) if L>0.5 else d/(max+min); H from the max channel
    hsl(189, 94%, 43%) = hsl(189, 94%, 43%)
  5. Calculate CMYK
    K = 1 - max(R,G,B)/255; C = (1-R/255-K)/(1-K)
    cmyk(97%, 14%, 0%, 17%) = cmyk(97%, 14%, 0%, 17%)

Engine last updated . Checked against 2 independently-derived tests how we verify calculators.

Frequently Asked Questions

How is the HEX code derived from the RGB values?

Each RGB channel (Red, Green, Blue, 0-255) is converted independently to a two-digit base-16 (hexadecimal) number and concatenated with a leading #. For example, a Blue value of 212 converts to "D4" in hex. This is purely a notation change -- HEX and RGB always describe the identical color, just written in different number bases, which is why converting between them never loses precision.

Why would I use HSL instead of RGB for adjusting a color?

HSL separates a color into Hue (position on the color wheel, 0-360 degrees), Saturation (vividness, 0-100%), and Lightness (0-100%, dark to light) -- dimensions that map to how people actually describe color changes ("make it lighter" or "make it less saturated"). Adjusting RGB channels to achieve the same visual change requires recomputing all three channels together, while in HSL you can change just the Lightness or Saturation value directly and leave Hue untouched.

Why might a color look different in print than it does on screen?

Screens mix RGB light additively (combining red, green, and blue light to produce brighter colors, with white being all three at full intensity), while printers apply CMYK ink subtractively (each ink absorbs certain wavelengths, and mixing more ink makes the result darker). Because these are fundamentally different physical processes, the CMYK conversion shown here is only an approximation of print output -- actual results depend on the specific printer, ink, and paper stock.

What does the K (black/key) value in CMYK represent?

K represents how much black ink is needed and is calculated first, as 1 minus the brightest of the three RGB channels (scaled to a 0-1 range) -- a color where all three RGB channels are low needs more black ink to reproduce that darkness. The C, M, and Y values are then calculated relative to the remaining color after K is factored out, which is why pure white (255, 255, 255) converts to 0% across all four CMYK channels.

The questions that sit next to this one — chosen by subject, including calculators filed under a different category.

More in Technology & Computing.