HEX to RGB Converter — Convert Color Codes Free (HEX, RGB, HSL, CMYK)

What Is a HEX Color Code?

A HEX color code is a 6-digit hexadecimal number prefixed with #that represents a color in web design — for example, #E8720C is an orange. The six digits are split into three pairs: the first two represent red, the middle two represent green, and the last two represent blue.

Each pair is a base-16 number ranging from 00 (0 in decimal) to FF (255 in decimal), which gives 256 possible values per channel and over 16 million possible colors in total. HEX is the most widely used color format in CSS and HTML — every browser and design tool understands it.

HEX codes can also be written in 3-digit shorthand when both digits of each channel are identical: #ffffff becomes #fff,#000000 becomes #000. All browsers support both forms.

What Is RGB?

RGB stands for Red, Green, Blue — the three primary colors of light. In CSS, it is written as rgb(R, G, B) where each value is an integer from 0 to 255. RGB is the native color model of screens: every pixel on your monitor mixes these three light wavelengths to produce color.

rgb(255, 0, 0) is pure red, rgb(0, 0, 255) is pure blue, rgb(0, 0, 0) is black, and rgb(255, 255, 255) is white. RGBA adds a fourth value for opacity: rgba(232, 114, 12, 0.5) is the same orange at 50% transparency.

HEX to RGB — The Formula and How It Works

Converting HEX to RGB is a base conversion from hexadecimal (base 16) to decimal (base 10). You split the 6-digit HEX code into three 2-digit pairs and convert each one independently.

In JavaScript: parseInt("E8", 16) === 232. For any HEX color #RRGGBB: R = parseInt(hex.slice(1,3), 16), G = parseInt(hex.slice(3,5), 16), B = parseInt(hex.slice(5,7), 16).

RGB to HEX — The Formula

To go the other direction — RGB to HEX — you convert each decimal value (0–255) to a 2-digit hexadecimal number and join them with a # prefix.

How to Convert HEX to RGB Online (Step-by-Step)

All Color Formats — What Each One Is and When to Use It

Different workflows require different color formats. Here is every major format, what it looks like, and where it is used:

Common Color Reference Table — HEX, RGB, and HSL

A quick reference for 15 frequently used colors in web design — pure colors, common named colors, and Tailwind CSS defaults:

What Is HSL and Why Is It Useful?

HSL (Hue, Saturation, Lightness) is the color format that most closely matches how humans think about color. Instead of specifying red, green, and blue phosphor intensities, you specify:

• Hue (0–360°) — The color itself on the color wheel. 0° = red, 120° = green, 240° = blue.
• Saturation (0–100%) — How vivid or gray the color is. 0% = pure gray, 100% = full color.
• Lightness (0–100%) — How light or dark. 0% = black, 50% = the pure color, 100% = white.

HSL is especially useful in CSS when you want to create variants of a color. To make a color darker, reduce L. To make it lighter, increase L. The hue stays identical. This is why design systems often store brand colors in HSL and generate shade scales by varying L and S.

HEX #E8720C = RGB rgb(232, 114, 12) = HSL hsl(28, 90%, 48%). All three are the same orange — just described differently.

CMYK — When You Need It and When You Don't

CMYK (Cyan, Magenta, Yellow, Black) is a subtractive color model used in physical printing. Unlike RGB which mixes light, CMYK mixes ink — adding more ink makes the color darker. You need CMYK values when:

• Sending files to a professional print shop
• Working in Adobe InDesign or Illustrator for print output
• Creating brand guidelines that specify both digital (RGB) and print (CMYK) values

CMYK is not needed for anything displayed on a screen — websites, apps, social media, presentations. For screen use, HEX or RGB is always correct. Note that RGB colors cannot be perfectly reproduced in CMYK — the CMYK gamut is smaller, so very vivid screen colors may look duller in print.

Color Formats for iOS, Android, and Flutter

When you are handing off a design to a mobile developer, they need platform-specific formats — not CSS HEX codes. Here is what each platform uses and how it maps to HEX:

The Color Converter tab outputs all of these formats simultaneously — paste in a HEX code and copy iOS, Android, and Flutter values in one step.

Related Tools

After converting your colors, you may want to check whether your text and background color combination meets accessibility standards — the WCAG Contrast Checker (in the Contrast Checker tab) gives you an instant pass/fail for WCAG AA and AAA. If you need a complete color palette for a project, the Palette Generator creates analogous, complementary, and triadic schemes from any base color. For gradient CSS, the Gradient Generator builds linear, radial, and conic gradients with a live preview.