HEX

Red (R)

0–255

Green (G)

0–255

Blue (B)

0–255

Hue (H)

0–360

Saturation (S)

Lightness (L)

Converted values

#4A6FA5
HEX

rgb(74, 111, 165)

RGB

hsl(217, 38%, 47%)

HSL

hsv(217, 55%, 65%)

HSV

About the Color Converter

Colours on screens can be expressed in several mathematical models. HEX is the most common in web development, using six hexadecimal digits to represent red, green, and blue channels. RGB expresses the same channels as decimal values 0-255. HSL (Hue, Saturation, Lightness) is more intuitive for designers: hue is the position on the colour wheel (0-360 degrees), saturation is the intensity, and lightness controls how light or dark the colour appears.

Which colour format should you use?

HEX — most common in CSS and design tools. Compact and universally understood.
RGB — useful when manipulating individual channels programmatically or applying transparency with rgba().
HSL — best for generating colour variations. Adjusting only lightness creates tints and shades without changing the hue.

How to convert HEX to RGB manually

A HEX code like #4A6FA5 is three pairs of hex digits: 4A = red, 6F = green, A5 = blue. Convert each pair from base-16 to base-10: 4A = (4 x 16) + 10 = 74, 6F = (6 x 16) + 15 = 111, A5 = (10 x 16) + 5 = 165. Result: rgb(74, 111, 165).

Colour in web design systems

Design systems define a colour palette in one format (often HSL for its intuitive adjustability) and derive all other formats from it. CSS Custom Properties let you define colours once and reference them throughout your stylesheet. The CSS Color Level 4 specification adds new formats including oklch() which provides perceptually uniform colour adjustments, meaning that equal numerical changes produce equal perceptual differences.

CSS Custom Properties — :root { --brand: #4A6FA5; } then use color: var(--brand) throughout
oklch() — CSS Color Level 4 format with perceptually uniform lightness; better for generating accessible colour scales
Design token tools — Style Dictionary, Theo, and similar tools maintain colour tokens and generate all output formats
Accessibility — WCAG AA requires 4.5:1 contrast ratio for normal text; this calculator helps check colour combinations

Frequently Asked Questions

What is the difference between HEX and RGB colour codes?

Both represent the same RGB colour model but in different notations. HEX uses base-16 (hexadecimal) digits in a six-character string like #FF5733. RGB uses decimal values 0-255 like rgb(255, 87, 51). They describe identical colours — the difference is purely syntactic.

How do I add transparency to a colour in CSS?

Use rgba() with an alpha channel: rgba(74, 111, 165, 0.5) for 50% opacity. For HEX, add a two-digit alpha at the end: #4A6FA580 where 80 in hex equals 50% opacity. The HSL equivalent is hsla(215, 37%, 39%, 0.5).

What is HSL and why is it useful?

HSL stands for Hue, Saturation, Lightness. Hue is the colour angle (0=red, 120=green, 240=blue). Saturation goes from grey to vivid. Lightness goes from black to white. It is intuitive for creating palettes: change only the lightness to get tints and shades of the same colour without touching the hue.

Why do colours look different on screen vs in print?

Screens use additive RGB (emitted light) while print uses subtractive CMYK (ink). The same HEX value looks different on paper. For print work, convert to CMYK in Adobe Illustrator or a similar design tool. This converter works with screen colour spaces only.

How do I convert HEX to RGB manually?

Split the 6-digit HEX into three pairs and convert each from base-16 to base-10. For #FF8C00: FF=255, 8C=140, 00=0. Result: rgb(255, 140, 0). To go the other way, convert each decimal 0-255 value to its two-digit hex equivalent: 255=FF, 128=80, 0=00.