Color Code Converter — HEX to RGB, HSL & CMYK

What Is a Color Code Converter?

A color code converter translates one color notation into another. For example, the hex code #FF5733 is the RGB color rgb(255, 87, 51) — also written hsl(11, 100%, 60%) or cmyk(0%, 66%, 80%, 0%). Web developers and designers use it to move values between CSS, JavaScript, design tools and documentation without doing base-16 arithmetic by hand. The converter above is free, instant and runs entirely in your browser — type a HEX code and copy the RGB, HSL or CMYK result in one click.

What Is a HEX Color Code?

A HEX color code is a six-digit hexadecimal number where each pair of digits sets the intensity of red, green and blue light from 00 (off) to FF (full). #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue — and #FFFFFF is white.

How Do You Convert Hex to RGB by Hand?

Split the six hex digits into three pairs and convert each pair from base-16 (hexadecimal) to decimal. Each pair is one byte — an 8-bit value where 00₁₆ = 0 and FF₁₆ = 255 — setting the intensity of red, green and blue light. To convert one pair, multiply the first digit by 16 and add the second digit (digits A–F are worth 10–15). Then write the three results as rgb(R, G, B).

Two more to check your method: #33CCFF → 33₁₆ = 51, CC₁₆ = 12 × 16 + 12 = 204, FF₁₆ = 255 → rgb(51, 204, 255); #800080 → 80₁₆ = 8 × 16 = 128 → rgb(128, 0, 128) (purple).

How Do You Convert RGB Back to Hex?

Divide each 0–255 channel value by 16; the quotient and remainder become the two hex digits (10 → A, 11 → B, 12 → C, 13 → D, 14 → E, 15 → F). Join the three pairs and add the # prefix.

HEX, RGB, HSL, HSV and CMYK: When to Use Each

All five notations can describe the same color — they differ in how humans and machines read them.

Rule of thumb: use HEX in CSS, RGB in code, HSL when you need to tweak brightness or build a palette (fix the hue, slide lightness up for tints and down for shades), and CMYK only when the output is a printer. HSV appears mainly inside color-picker interfaces — convert it to HEX before shipping.

Understanding Alpha: 8-Digit Hex and rgba()

Transparency adds a fourth channel — alpha — to any color. In 8-digit hex (#RRGGBBAA), the last pair sets opacity from 00 (fully transparent) to FF (fully opaque). #FF573380 is red at about 50% opacity: 80₁₆ = 128, and 128 ÷ 255 ≈ 0.50.

CSS gives you three equivalent ways to write the same semi-transparent red:

Alpha is essential for overlays, gradients and hover states — and it matters for the contrast math below, because text over a translucent background blends with whatever sits behind it.

Common Color Codes: Reference Table

A quick-lookup chart of widely used colors, with swatch, HEX, RGB and HSL for each. Every value below can be double-checked in the converter above — just type the HEX code.

CSS Snippets for Developers

Once you have the values, drop them straight into your stylesheet. These four all describe the same orange-red:

Contrast and Readability: The WCAG Rule

A color is only the right choice if people can read on it. The W3C’s WCAG 2.1 guidelines require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA); Level AAA raises normal text to 7:1. As a quick check: dark text on white, or white text on very dark backgrounds, almost always passes. Mid-tone colors like #FF5733 or #808080 often fail with white text — darken or lighten the background until the ratio clears 4.5:1.

Why Print Colors Look Different From Screen Colors

Screens emit light (additive RGB); printers lay ink on paper (subtractive CMYK). Ink cannot reproduce the brightest, most saturated screen colors — its gamut is smaller — so neon greens, electric blues and vivid oranges shift or dull in print. The converter’s CMYK values are the standard naive conversion from RGB (K = 1 − max(R′, G′, B′), then each of C, M and Y scaled by 1 − K); professional print work should go through a proper ICC color profile instead. Always request a physical proof before a large print run.

A Note on Modern Formats: OKLCH and Display-P3

CSS Color 4 added perceptually uniform spaces like OKLCH — where equal numeric steps look equally different to the eye, fixing HSL’s uneven gradients — and wide-gamut Display-P3, which covers the richer colors that modern phone and laptop screens can display. HEX, RGB and HSL remain the everyday standards and convert losslessly among themselves; the new formats matter when you need smoother gradients or the most vivid screen colors possible.

How to Use the Color Converter

1. Type a HEX code (with or without #, 3 or 6 digits) — RGB, HSL and CMYK appear instantly with a live preview.
2. Or tap any quick-pick swatch to load a common color.
3. Use the Copy buttons to grab any value for your CSS or design tool.

Color Code FAQs