Whether you're building a website, designing a logo, or tweaking your CSS, understanding color formats is essential. HEX, RGB, HSL — each format serves a purpose, and knowing how to convert between them saves time and prevents frustrating mismatches. In this comprehensive guide, we'll break down every major CSS color format, show you how to convert between them (with and without tools), and explain when to use each one.
CSS supports multiple ways to define colors. Each format represents the same visual color using a different notation system. The four most common formats you'll encounter in web development are:
#3366ff
rgb(51, 102, 255)
hsl(220, 100%, 60%)
Beyond these, modern CSS also supports hwb(), oklch(), lab(), and named colors like cornflowerblue. But for most projects, HEX, RGB, and HSL cover everything you need.
hwb()
oklch()
lab()
cornflowerblue
HEX is short for hexadecimal — a base-16 number system using digits 0–9 and letters A–F. A HEX color code consists of a # symbol followed by either 6 digits (full form) or 3 digits (shorthand).
#
In the full form #RRGGBB, each pair represents one color channel:
#RRGGBB
The shorthand form #RGB doubles each character. So #3f6 becomes #33ff66. This works when each pair uses the same digit (e.g., #aabbcc → #abc, but #a1b2c3 cannot be shortened).
#RGB
#3f6
#33ff66
#aabbcc
#abc
#a1b2c3
HEX also supports alpha transparency via 8-digit codes: #RRGGBBAA. For example, #3366ff80 applies 50% opacity (80 in hex = 128 in decimal, which is roughly half of 255).
#RRGGBBAA
#3366ff80
RGB stands for Red, Green, Blue. In CSS, you write it as rgb(red, green, blue) where each value ranges from 0 to 255.
rgb(red, green, blue)
rgb(255, 0, 0) /* Pure red */ rgb(0, 255, 0) /* Pure green */ rgb(0, 0, 255) /* Pure blue */ rgb(128, 128, 128) /* Medium gray */
RGB is additive — combining all three channels at full intensity (255, 255, 255) produces white, while (0, 0, 0) produces black. This mirrors how screens emit light.
Modern CSS also supports percentage values: rgb(100%, 0%, 0%) is equivalent to rgb(255, 0, 0).
rgb(100%, 0%, 0%)
rgb(255, 0, 0)
The rgba() variant adds an alpha channel for transparency:
rgba()
rgba(51, 102, 255, 0.5) /* 50% transparent blue */
HSL stands for Hue, Saturation, Lightness. It's often the most intuitive format for designers because it maps more closely to how humans perceive color.
hsl(0, 100%, 50%) /* Red */ hsl(120, 100%, 50%) /* Green */ hsl(240, 100%, 50%) /* Blue */ hsl(220, 15%, 50%) /* Desaturated blue-gray */
HSL shines when you need to create variations. Want a lighter version of your brand blue? Just increase the lightness. Need a muted version for a background? Reduce saturation. This is far more intuitive than tweaking individual RGB channels.
Converting HEX to RGB is straightforward. Take the HEX code, split it into three pairs, and convert each from hexadecimal (base-16) to decimal (base-10).
rgb(255, 87, 51)
For 3-digit HEX codes like #F53, double each character first: #FF5533, then convert normally.
#F53
#FF5533
RGB to HSL conversion is more complex but follows a standard algorithm:
L = (max + min) / 2
For example, rgb(255, 87, 51) converts to approximately hsl(10, 100%, 60%) — a vivid orange-red.
hsl(10, 100%, 60%)
Doing this manually is tedious, which is exactly why online color converter tools exist. They handle the math instantly.
The reverse conversion (HSL to RGB) uses these steps:
Again, a color converter tool handles this in milliseconds.
HSL makes it easy to define a brand color and generate its variants. Define your primary hue once, then create lighter and darker versions by adjusting lightness:
:root { --primary-h: 220; --primary-s: 90%; --primary: hsl(var(--primary-h), var(--primary-s), 50%); --primary-light: hsl(var(--primary-h), var(--primary-s), 70%); --primary-dark: hsl(var(--primary-h), var(--primary-s), 30%); --primary-muted: hsl(var(--primary-h), 30%, 50%); }
Use RGBA or 8-digit HEX to create semi-transparent overlays:
/* Semi-transparent dark overlay */ .overlay { background: rgba(15, 23, 42, 0.8); } /* Or with HEX */ .overlay { background: #0f172acc; }
Designers often provide colors in HEX. Convert them to HSL in your codebase for easier manipulation, or keep them as HEX if you're directly implementing the design.
HEX uses a 6-digit hexadecimal code (e.g., #3366ff) prefixed with #, while RGB uses decimal values from 0–255 for each channel (e.g., rgb(51, 102, 255)). They represent the exact same colors — HEX is just the hexadecimal shorthand for RGB values. HEX is more compact and widely used in CSS and design tools, while RGB is more intuitive for programmatic color manipulation.
Take a HEX color like #FF5733. Split it into three pairs: FF, 57, 33. Convert each pair from hexadecimal to decimal: FF=255, 57=87, 33=51. The RGB equivalent is rgb(255, 87, 51). For 3-digit HEX like #F53, double each character first: FF5533, then convert normally.
#FF5733
Use HSL when you need to create color variations systematically. HSL separates hue (color type), saturation (intensity), and lightness (brightness), making it easy to create lighter/darker shades or adjust vibrancy without changing the base color. RGB is better when you need precise control over individual color channels or when working with image data.
Yes. Use rgba() for RGB with alpha (e.g., rgba(255, 87, 51, 0.5) for 50% opacity). Modern CSS also supports 8-digit HEX codes: #FF573380 for the same result. HSL uses hsla(). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
rgba(255, 87, 51, 0.5)
#FF573380
hsla()
🎨 Stop converting colors by hand. Try our free Color Converter Tool — instant HEX, RGB, HSL conversions with a visual picker.
Instant HEX↔RGB↔HSL conversion
Build beautiful gradients with custom colors
Design perfect shadows for your elements