HEX to RGB Color Converter
Convert HEX color codes to RGB and HSL with a live preview. Bidirectional conversion.
HEX
RGB
HSL
Color format guide
HEX format
#RRGGBB — Six hexadecimal digits, two each for red, green, and blue. Range: #000000 (black) to #ffffff (white). Most common format in web design.
RGB format
rgb(R, G, B) — Three decimal values from 0–255. Red, green, blue. Supported in all browsers. Easy to understand and manipulate in code.
HSL format
hsl(H, S%, L%) — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive for color manipulation and generating color palettes.
HEX and RGB Colors — How Color Codes Work in CSS
Every color on your screen is made of three light components: red, green, and blue. HEX and RGB are simply two different ways to express the same three values. Understanding how they work makes you faster at working with colors in CSS, design tools, and code — no more guessing whether #ff0000 is red or blue.
Reading a HEX color code
A HEX color is six characters split into three pairs: #RRGGBB. Each pair is a hexadecimal number from 00 to FF (0 to 255 in decimal). #ff0000 — red is FF (255), green is 00, blue is 00. Pure red. #0071e3 — red is 00, green is 71 (113), blue is e3 (227). Apple's signature blue.
When to use HEX vs RGB vs HSL
HEX is the most compact and widely recognized — use it for fixed design values, especially when copying from Figma or Sketch. RGB is easier to manipulate mathematically and supports the rgba() syntax for transparency. HSL (Hue, Saturation, Lightness) is the most intuitive for generating color variations — adjusting only the lightness gives you tints and shades of the same hue without touching RGB values.
The 3-digit shorthand
When each pair of HEX digits repeats, you can use a 3-digit shorthand. #ffffff becomes #fff. #aabbcc becomes #abc. The browser expands it by doubling each digit. This only works when both digits in each pair are identical — #0071e3 cannot be shortened because none of its pairs repeat.