How to Convert Colors: HEX, RGB, HSL

“Your design tool shows RGB but CSS needs HEX” or “what color is #ff0000?” - these are moments when color conversion comes in.

In this article, we explain how to convert colors between HEX, RGB and HSL, how to read color codes, and when to use each format, with concrete examples.

The basics of color notation

Computers represent colors as numbers. The three main formats:

Format	Example	When to use
HEX	#ff0000	The most common format on the web
RGB	rgb(255, 0, 0)	Programming, image editors
HSL	hsl(0, 100%, 50%)	Intuitive color adjustment in design

What is HEX?

HEX uses two hexadecimal digits (00-FF) for each of red, green and blue:

#RRGGBB

• #ff0000: red (R=ff=255, G=00=0, B=00=0)
• #00ff00: green
• #0000ff: blue

What is RGB?

RGB expresses the brightness of red, green and blue as decimal numbers from 0 to 255 - the same values HEX stores in two hex digits.

#ff0000 → rgb(255, 0, 0)

Common color reference

Color	HEX	RGB
Black	#000000	rgb(0, 0, 0)
White	#ffffff	rgb(255, 255, 255)
Red	#ff0000	rgb(255, 0, 0)
Green	#00ff00	rgb(0, 255, 0)
Blue	#0000ff	rgb(0, 0, 255)
Yellow	#ffff00	rgb(255, 255, 0)
Gray	#808080	rgb(128, 128, 128)

Shorthand HEX

When the digits of each pair are identical, HEX can be shortened to 3 digits:

• #ff0000 → #f00
• #ffffff → #fff
• #33aacc → cannot be shortened (3aac is not the same color)

What is HSL?

HSL stands for Hue, Saturation and Lightness - a more intuitive way to describe color:

• Hue: an angle from 0 to 360 degrees. 0=red, 120=green, 240=blue
• Saturation: 0 to 100%. 0% is gray, 100% is vivid
• Lightness: 0 to 100%. 0% is black, 100% is white

hsl(210, 100%, 50%) → vivid blue (#0080ff)

Transparency: RGBA and alpha hex

When a color needs transparency, two extended formats come into play:

• RGBA: rgba(255, 0, 0, 0.5) - the fourth value is alpha, from 0 (fully transparent) to 1 (opaque)
• 8-digit HEX: #ff000080 - the last two digits are alpha in hex (80 = 50%)

Design tools often export 8-digit hex or rgba() values, while CSS still commonly uses the 3- or 6-digit forms for opaque colors. If you strip the alpha channel, remember that the color underneath shows through - converting an rgba value to plain HEX only works cleanly when the alpha is 1 (or you decide to composite against a specific background).

How to convert a color

With the Tools Hub color converter, enter any format - HEX, RGB or HSL - and all other formats are generated automatically.

A practical shortcut

Instead of converting in your head, paste the color into the Tools Hub converter and copy the format you need. For daily CSS work, keeping a small set of brand colors in both HEX and RGB in a shared document saves repeated conversions. When someone shares a color as “deep blue” with no code, picking a neutral blue such as #0050ff and adjusting from there is faster than guessing the exact original value - most designs tolerate small differences of a few units per channel.

Summary

• HEX, RGB and HSL are different notations for the same color
• Shorthand HEX only works with identical digit pairs
• Use HSL for intuitive adjustment, HEX for CSS, RGB for code
• The Tools Hub converter handles it all in your browser

Next time you need to convert a color, use the steps above or the Tools Hub color converter.

FAQ

How do I convert HEX to RGB?

Convert each two-digit pair from hex to decimal: #ff0000 → ff=255, 00=0, 00=0 → rgb(255, 0, 0).

How do I convert RGB to HEX?

Convert each decimal value to hex: 255→ff, 0→00 → rgb(255, 0, 0) → #ff0000.

Can I use shorthand HEX?

Only when each pair of digits is identical (#f00 = #ff0000). The converter handles this automatically.

Where is HSL used?

Mainly in design tools and CSS adjustments. Hue (0-360°) picks the color; saturation and lightness fine-tune it.