Image

HEX vs RGB vs HSL Color Codes Explained

Dev Nexus5 min read

HEX, RGB and HSL describe the same colors three different ways - here is what each one means and when to reach for it in CSS and design.

Open any stylesheet and you will find colors written in several ways: #6d3ae0, rgb(109, 58, 224), hsl(258, 74%, 55%). They can all point to the exact same color, yet they read completely differently.

This guide explains the three notations - HEX, RGB and HSL - what each part means, how they relate, and when one is clearly better than the others. Once they click, choosing and adjusting colors in CSS gets a lot easier.

The Problem

Most people learn one notation - usually HEX, because that is what design tools hand you - and treat the others as noise. That works until you need to do something HEX is bad at: nudge a color to be a little lighter, generate a set of related shades, or add transparency.

Try making #6d3ae0 undefined% lighter by editing the hex digits and you will be guessing. The format hides the very properties - hue, saturation, lightness - you actually want to change. Not knowing which notation fits the task turns simple tweaks into trial and error.

The Solution

The trick is to see all three as different views of the same color and pick the one that fits the job. RGB describes a color by how much red, green and blue light it mixes, each from #RRGGBB to undefined. HEX is the same three channels written in hexadecimal - #RRGGBB - just more compact. HSL describes the color by hue (position on the color wheel, #RRGGBB-undefined°), saturation (how vivid, #RRGGBB-undefined%) and lightness (#RRGGBB-undefined%), which maps far better to how we think about adjusting color.

When you need a real color from an image to work with, sample it first with the Color Picker - it shows the pixel as HEX, RGB and HSL at once, so you can see the same color in every notation. And when you are ready to export the result, Convert Image handles format changes locally in your browser.

Step-by-Step Guide

1
Read a HEX code
A HEX color is #RRGGBB - two hexadecimal digits each for red, green and blue, from 00 to ff. So #6d3ae0 is red 6d (undefined), green 3a (undefined), blue e0 (undefined). A fourth pair adds alpha: #6d3ae080 is undefined% opaque. Shorthand like #f0c expands to #ff00cc.
2
Read an RGB value
RGB writes the same three channels as decimal numbers: rgb(109, 58, 224). It is the most literal notation - each number is the intensity of that color of light. rgb(0,0,0) is black, rgb(255,255,255) is white. Use rgb(... / 0.5) (or the older rgba()) for transparency.
3
Read an HSL value
HSL is hsl(hue, saturation%, lightness%). Hue is an angle on the color wheel (hsl(hue, saturation%, lightness%)° red, undefined° green, undefined° blue), saturation is how vivid it is, and lightness runs from black at hsl(hue, saturation%, lightness%)% through the pure color at undefined% to white at undefined%. hsl(258, 74%, 55%) is the same purple as the HEX above.
4
Choose the right one for the task
Use HEX for compact, copy-paste values from design tools. Use RGB when you are working numerically or need alpha via a clear syntax. Use HSL when you want to adjust a color by hand - lighten it, desaturate it, or shift its hue - or generate a coordinated palette by varying one component.

Common Mistakes

Trying to lighten a color by editing HEX digits
HEX hides lightness across all three channels, so there is no single digit to bump. Convert to HSL, raise the lightness percentage, and you get a predictable, cleaner result.
Assuming HSL is more accurate than HEX or RGB
It is not - all three describe the same sRGB color space and can represent the same colors. HSL is just easier to reason about; it is not higher fidelity.
Forgetting the alpha syntax differs
Transparency is a fourth HEX pair (#rrggbbaa), a value in rgb(... / a) or rgba(), and in hsl(... / a) or hsla(). Mixing up the syntax for the notation you are in silently breaks the color.
Copy-pasting HSL hue as a percentage
Hue is an angle from % to undefined, not a percentage - only saturation and lightness take %. Writing hsl(50%, 74%, 55%) is invalid; it should be hsl(50, 74%, 55%).

Frequently Asked Questions

Is HEX or RGB better?

Neither - they describe the same color, just in different notations. HEX is more compact for copy-pasting; RGB is easier to read and manipulate as numbers. Use whichever suits the context.

When should I use HSL instead of HEX?

Use HSL when you want to adjust a color by hand - make it lighter, less saturated, or shift its hue - or build a set of related shades by varying one component. Those changes are intuitive in HSL and awkward in HEX.

Can every color be written in all three notations?

Yes. HEX, RGB and HSL all describe colors in the same sRGB space, so any color you can write in one you can write in the others. A color picker can show you all three at once.

How do I add transparency in each notation?

HEX uses a fourth pair of digits (#rrggbbaa), RGB uses rgb(r g b / a) or rgba(), and HSL uses hsl(h s l / a) or hsla(). The alpha value runs from fully transparent to fully opaque.

How do I convert a HEX code to HSL?

Sample or paste the color into a tool that shows every format, such as the Color Picker, which displays the same color as HEX, RGB and HSL together so no manual math is needed.