HEX to RGB Conversion: A Designer and Developer's Guide to Colours
Hex codes, RGB, HSL, and RGBA — four ways to describe the same colour. This guide explains the differences, conversion formulas, and when to use each in your work.
HEX, RGB, HSL, RGBA — designers and developers work with multiple color formats daily. Understanding the conversion between them helps you work across tools, write better CSS, and understand why the color you see in your design tool sometimes looks different in code.
HEX Color Format
HEX colors are 6-digit hexadecimal codes: #RRGGBBwhere RR, GG, BB are two-digit hex values (00–FF) for red, green, blue channels. #FF5733 = red:255, green:87, blue:51
HEX to RGB Conversion
Convert each pair of hex digits to decimal: FF = 15×16 + 15 = 255 57 = 5×16 + 7 = 87 33 = 3×16 + 3 = 51 So #FF5733 = rgb(255, 87, 51)
RGB to HEX
Convert each decimal channel value to hex: 255 → FF, 87 → 57, 51 → 33 → #FF5733In JavaScript: ((255 << 16) | (87 << 8) | 51).toString(16)
RGB to HSL
HSL (Hue, Saturation, Lightness) is more intuitive for design — you can say "make it 20% lighter" by increasing L. Conversion formulas:
- Normalize: r, g, b = R/255, G/255, B/255
- Max = max(r, g, b), Min = min(r, g, b)
- Lightness L = (Max + Min) / 2
- Saturation S depends on L and the range (Max − Min)
- Hue H depends on which channel is maximum
Alpha Channel
RGBA adds a 4th value (0–1) for opacity: rgba(255, 87, 51, 0.5)is 50% transparent. In HEX: add two more digits at the end —#FF573380 (80 hex = 128 = ~50%).
Convert colors with our Color Converter tool.