How do I convert HEX to RGB?

A HEX color like #FF5733 is split into three pairs: FF (red), 57 (green), 33 (blue). Convert each pair from hexadecimal to decimal: FF=255, 57=87, 33=51. So #FF5733 = rgb(255, 87, 51).

How do I convert RGB to HEX?

Convert each RGB value (0-255) to a two-digit hexadecimal number. For rgb(255, 87, 51): 255=FF, 87=57, 51=33. Combined: #FF5733.

What is the HSL color model?

HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0-360°), Saturation is intensity (0-100%), and Lightness is brightness (0-100%). It's more intuitive than RGB for adjusting colors.

What is the difference between HEX, RGB, and HSL?

HEX is a compact hexadecimal notation (#RRGGBB). RGB specifies red, green, blue values (0-255 each). HSL uses hue angle, saturation percentage, and lightness percentage. All three can represent the same colors; they're just different ways to describe them.

Which color format should I use in CSS?

All three work in CSS. HEX is the most compact (#FF5733). RGB is clearest for programmatic color manipulation. HSL is best when you want to adjust hue, saturation, or lightness independently. Use whichever fits your workflow.

Free & Instant

Color Converter

Convert between HEX, RGB, and HSL color formats. Pick any color visually, adjust with sliders, and copy CSS values with one click.

Pick Color

Hue221°

Saturation83%

Lightness53%

HEX

RGB

HSL

H°

Understanding Color Formats

Every color on screen can be described using different notations. Designers and developers work with three main formats: HEX, RGB, and HSL. They all represent the same colors — they're just different languages for the same thing.

HEX Colors

HEX is a compact six-character code preceded by a hash symbol. Each pair of characters represents the red, green, and blue channels in hexadecimal (base-16) notation, with values from 00 (none) to FF (maximum).

#RRGGBB
#FF5733 → R:255, G:87, B:51

Example: To convert #3B82F6 to RGB:
3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246)

RGB Colors

RGB defines color using three values from 0 to 255 — one for each light channel (red, green, blue). Mixing all three at full intensity gives white; all at zero gives black. This model directly mirrors how screens produce color by combining light.

rgb(red, green, blue)
Values: 0–255 each

HSL Colors

HSL is often the most intuitive format for humans. Hue is the color itself (a position on the color wheel, 0–360°). Saturation is how vivid the color is (0% = gray, 100% = full color). Lightness controls brightness (0% = black, 50% = pure color, 100% = white).

hsl(hue, saturation%, lightness%)
H: 0–360° · S: 0–100% · L: 0–100%

Example: Pure red = hsl(0, 100%, 50%)
Desaturated red = hsl(0, 40%, 50%)
Light pastel red = hsl(0, 100%, 85%)

Common Web Colors

Here are some frequently used colors for quick reference. Click any swatch to load it into the converter.

Frequently Asked Questions

Split the 6-character hex code into three pairs (RR, GG, BB) and convert each from hexadecimal to decimal. For example, #FF5733: FF=255, 57=87, 33=51 → rgb(255, 87, 51).
Convert each RGB value (0–255) to a two-digit hex number. For rgb(59, 130, 246): 59=3B, 130=82, 246=F6 → #3B82F6.
HSL stands for Hue (color angle 0–360°), Saturation (intensity 0–100%), and Lightness (brightness 0–100%). It's more intuitive than RGB because you can easily adjust how vivid or bright a color is without changing the base hue.
They're three different notations for the same colors. HEX is compact (#FF5733). RGB is explicit with light values (0–255 per channel). HSL is human-friendly with hue/saturation/lightness. All work in CSS.
All three work. HEX is most common for static colors. HSL is best for design systems where you adjust lightness/saturation programmatically. RGB is useful when doing color math. Pick whichever fits your workflow.
Yes. Copy the HEX or RGB value from this converter and paste it directly into Figma, Canva, Sketch, Photoshop, or any design tool's color input field.