Hex to RGB Color Converter

Enter a hex color code to get RGB, HSL, and CMYK values — or go the other way.

Color Format Reference

FormatExampleUsed In
Hex#FF8C00HTML, CSS
RGBrgb(255,140,0)CSS, Canvas
HSLhsl(33,100%,50%)CSS, design tools
CMYK0%, 45%, 100%, 0%Print / offset

HEX, RGB and HSL

The same color can be written three common ways. A HEX code like #2563EB packs red, green, and blue into pairs of hexadecimal digits. RGB writes those same channels as decimals from 0–255, so #2563EB is rgb(37, 99, 235). HSL describes the color by hue, saturation, and lightness, which is more intuitive for tweaking shades. This converter shows all three at once.

Reading a HEX Code

Each pair is one channel: the first two digits are red, the middle two green, the last two blue, each from 00 (none) to FF (255, full). Shorthand like #FFF expands to #FFFFFF. Add two more digits for an alpha (transparency) channel: #2563EB80 is 50% opaque.

Where You'll Use It

Designers copy HEX from mockups, but CSS animations and canvas often need RGB, and HSL makes it easy to generate lighter or darker variants of a brand color. For accessibility, run pairs through the contrast checker; to explore palettes, the color picker.

Frequently Asked Questions

Split the hex code into 3 pairs: R, G, B. Convert each pair from hexadecimal to decimal. Example: #FF8C00 → R=255, G=140, B=0.
Hex colors use 6 hexadecimal digits (0-9, A-F) preceded by #. The first 2 digits = red, next 2 = green, last 2 = blue. Shorthand: #RGB (3 digits, each doubled).
HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0–360°), Saturation is color intensity (0–100%), Lightness is brightness (0%=black, 100%=white, 50%=pure color).