Color Code Converter Guide: HEX, RGB, HSL & CMYK Explained

Colors look identical on screen whether you write them as #3498db, rgb(52, 152, 219), or hsl(204, 70%, 53%) — but behind the scenes these formats serve very different purposes. Knowing when to use each format, and how to move between them, saves time and prevents the frustration of hunting down why a color looks slightly off between your design tool and your browser.

The Four Main Color Formats

HEX — The Web Standard

HEX (hexadecimal) color codes like #FF5733 are the most common format on the web. Each pair of characters represents the red, green, and blue channels as values from 00 (0) to FF (255) in base-16 notation. The shorthand form #F53 works when both digits of each pair are identical — #FF5533 becomes #F53.

When to use HEX: CSS stylesheets, HTML attributes, design handoff notes, brand color documentation. HEX is compact, copy-paste-friendly, and universally understood by browsers and design tools alike.

RGB — Red, Green, Blue Channels

RGB expresses the same information as HEX but in decimal: rgb(255, 87, 51). Each value runs from 0 to 255. This format becomes especially useful in JavaScript when you need to manipulate individual channels programmatically, or when working with the Canvas API where you're computing colors mathematically.

When to use RGB: JavaScript color manipulation, HTML Canvas drawing, any situation where you need to do arithmetic on individual channels — for example, darkening a color by subtracting a fixed amount from each channel value.

HSL — Hue, Saturation, Lightness

HSL is the most human-intuitive color format. Instead of mixing channels, you specify:

• Hue — the color angle on a 360-degree wheel (0/360 = red, 120 = green, 240 = blue)
• Saturation — how vivid the color is, from 0% (grey) to 100% (full color)
• Lightness — how light or dark, from 0% (black) to 100% (white)

The power of HSL is that creating tints, shades, and accessible color variations is trivial. Want a lighter version of your brand color? Increase the lightness. Want a muted, desaturated tone? Lower the saturation. With RGB or HEX you'd have to recalculate all three channels separately.

When to use HSL: CSS custom properties for design systems, generating color palettes programmatically, creating hover states and disabled states that are visually consistent with the base color.

CMYK — Cyan, Magenta, Yellow, Key (Black)

CMYK is a subtractive color model used in print. Where RGB adds light to create color, CMYK subtracts it using ink. Values are expressed as percentages: cmyk(0%, 66%, 80%, 0%). Web browsers do not natively support CMYK — it is strictly a print format.

When to use CMYK: Sending files to a printer or print shop, working in Adobe Illustrator or InDesign for print output, specifying brand colors in brand guidelines that include print materials. Note that an RGB color cannot be converted to CMYK with 100% accuracy because the gamuts (ranges of possible colors) differ — some bright screen colors simply cannot be reproduced in print ink.

How to Convert Between Formats

HEX to RGB

Split the HEX string into three two-character pairs, then convert each from base-16 to base-10:

#3498DB
R = 0x34 = 52
G = 0x98 = 152
B = 0xDB = 219
Result: rgb(52, 152, 219)

RGB to HSL

Normalize each channel to 0–1 (divide by 255), find the min and max values, then apply these formulas:

r=52/255=0.204, g=152/255=0.596, b=219/255=0.859
max=0.859 (b), min=0.204 (r), delta=0.655

Lightness = (max + min) / 2 = 0.532 → 53.2%
Saturation = delta / (1 - |2L - 1|) = 0.655 / 0.936 ≈ 70%
Hue: since max=b → H = 60 × ((r - g)/delta + 4) = 60 × (-0.598 + 4) = 204°
Result: hsl(204, 70%, 53%)

You don't need to memorize these formulas — that's what converters are for. But understanding the structure helps you know what you're changing when you tweak a value.

Common Colors Reference Table

Why HSL Is Better for Creating Color Variations

Suppose your brand blue is hsl(210, 80%, 50%). Creating a full accessible palette becomes mechanical:

• Dark variant (for dark backgrounds): hsl(210, 80%, 30%)
• Light variant (for backgrounds/chips): hsl(210, 80%, 90%)
• Muted/disabled: hsl(210, 25%, 60%)
• Hover state (slightly darker): hsl(210, 80%, 42%)

All of these share the same hue, so they look visually related. Achieving the same result with HEX or RGB requires recalculating all three channels by hand or guessing.

Alpha Channels: RGBA and HSLA

Both RGB and HSL support a fourth channel for opacity. The alpha value runs from 0 (fully transparent) to 1 (fully opaque):

rgba(52, 152, 219, 0.5)    /* 50% transparent blue */
hsla(204, 70%, 53%, 0.8)   /* 80% opaque blue */

HEX also supports alpha in 8-character form: #3498DBCC where the last two digits (CC = 204 in decimal) represent opacity. This is less commonly used because the values are harder to read and browser support arrived later than RGBA.

:root {
  --color-primary: hsl(210, 80%, 50%);
  --color-primary-dark: hsl(210, 80%, 35%);
  --color-primary-light: hsl(210, 80%, 90%);
}

Accessibility: Contrast Ratios

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 between text and its background for normal text (3:1 for large text). Contrast is calculated from relative luminance — a value derived from the RGB channels. This is why it's important to check accessibility whenever you adjust color lightness.

A common mistake is choosing a brand color for both a button background and its text. Even if they look different on a calibrated monitor, they may fail contrast requirements for users with visual impairments or on lower-quality displays. Always verify contrast ratios after any color change.

Real-World Use Cases

Matching brand colors across tools: Your brand guide specifies a color in CMYK for print. The developer needs HEX for the website. The marketing team needs RGB for PowerPoint. One conversion gives everyone what they need from a single source of truth.

Working across design tools: Figma uses HEX and RGB natively. Photoshop works in HSB (similar to HSL). Converting between these prevents colors from drifting as assets move between tools.

Creating accessible contrast: Start with your brand HEX, convert to HSL, adjust lightness until your contrast checker shows a passing ratio, then convert back to HEX for your stylesheet. This is far faster than guessing adjustments blindly in HEX.

How to Use the Color Code Converter

1. Open the Color Code Converter tool.
2. Paste or type a color value in any supported format — HEX, RGB, HSL, or CMYK.
3. The tool instantly displays the equivalent values in all other formats.
4. Click any output field to copy the value to your clipboard.
5. A live color preview lets you confirm you're looking at the right color before copying.