How do I convert HEX to RGB?

Each pair of HEX digits is a base-16 channel from 00 (0) to FF (255). For example #1A2B3C → R=26, G=43, B=60, written as rgb(26, 43, 60). This tool does the conversion as you type.

What HEX formats are supported?

Short #rgb (e.g. #fff), full #rrggbb (e.g. #3b82f6), and 8-digit #rrggbbaa with alpha. The leading # is optional, and letters can be upper or lower case. You can also pick a color with the native picker.

Can I convert RGB to HEX?

Yes - enter R, G, and B values from 0 to 255 and the tool outputs a lowercase #rrggbb code. Out-of-range values are clamped.

Does this show HSL and CMYK too?

Yes. The format kit lists HEX, RGB, HSL, and CMYK with one-click CSS copy. CMYK is a screen approximation useful for print handoff - always proof on a press when color-critical.

What is the tint → shade ramp?

It mixes your color toward white (tints) and black (shades). Click any step to load that HEX, or copy the whole ramp for a quick palette.

What do the contrast cards mean?

They show the WCAG contrast ratio of your color as text on white and on black, with AA/AAA pass or fail for normal and large text. Useful before shipping UI colors.

What is the difference between rgb() and rgba()?

rgb() has red, green, and blue only. rgba() adds an alpha (opacity) channel from 0 (transparent) to 1 (opaque). When you paste an 8-digit HEX, the tool outputs rgba().

Converter Tools

Popular

HEX to RGB Converter

Convert HEX to RGB (and back) with HSL, CMYK, a tint–shade ramp, WCAG contrast cards, and a CSS token snippet - free online color code converter.

#3b82f6rgb(59, 130, 246)

HEX

= rgb(59, 130, 246)

RGB

= #3b82f6

Tint → shade ramp

Click a step to load that HEX into the converter.

Format kit

Code	Value	CSS
HEX	#3b82f6	#3b82f6
RGB	59, 130, 246	rgb(59, 130, 246)
HSL	217°, 91%, 60%	hsl(217, 91%, 59.8%)
CMYK	76 / 47 / 0 / 4	cmyk(76%, 47%, 0%, 4%)

Sample text Aa

Text on white

Contrast 3.68:1 · Normal Fail · Large AA

Sample text Aa

Text on black

Contrast 5.71:1 · Normal AA · Large AAA

CSS token snippet

HEX + space-separated RGB channels + auto contrast for themes.

:root {
  --brand: #3b82f6;
  --brand-rgb: 59 130 246;
  --brand-contrast: #000000;
}
.bg-brand { background-color: rgb(var(--brand-rgb) / <alpha-value>); }

About HEX to RGB Converter

Convert HEX color codes to RGB (and RGB back to HEX) with a live swatch, format kit (HSL + CMYK), clickable tint→shade ramp, WCAG contrast previews on white and black, and a ready-to-paste CSS token snippet. Paste #rgb, #rrggbb, or #rrggbbaa, use the native color picker, or type R/G/B channels. Everything runs in your browser - no signup, no upload.

How to Use HEX to RGB Converter

Paste a HEX color, use the color picker, or click a preset swatch.
Copy rgb()/rgba() CSS, or enter R/G/B (0-255) to generate HEX the other way.
Use the format kit for HSL and CMYK, and the tint→shade ramp to explore lighter or darker steps.
Check WCAG contrast cards, then copy the CSS token snippet into your theme.