Home → Guides → HEX, RGB and HSL

HEX, RGB and HSL Color Codes Explained with Examples

By Utivaro Team · Published September 30, 2026

HEX, RGB and HSL are three ways to write the same color. RGB gives amounts of red, green and blue from 0 to 255, HEX writes those same numbers in base 16, and HSL describes hue, saturation and lightness, which makes it easiest to create lighter and darker shades.

Three ways to write the same color

HEX, RGB and HSL are different notations for the same thing. The blue used in Utivaro's buttons can be written as #2563EB, rgb(37, 99, 235) or hsl(221, 83%, 53%), and a browser draws exactly the same color from all three. Which one to use depends on what you're doing with it.

RGB: the amounts of red, green and blue

Screens make every color by mixing red, green and blue light. RGB gives each channel a value from 0 (off) to 255 (full). rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black and rgb(255, 255, 255) is white. Equal values on all three channels give a gray.

That makes 256 × 256 × 256 = 16,777,216 possible colors in the standard 8-bit range.

HEX: RGB in a compact form

A HEX code is the same three numbers written in base 16, two digits each: #RRGGBB. Base 16 uses the digits 0–9 and letters A–F, so each pair runs from 00 (0) to FF (255).

To read #2563EB:

• 25 = 2 × 16 + 5 = 37 red
• 63 = 6 × 16 + 3 = 99 green
• EB = 14 × 16 + 11 = 235 blue

So #2563EB = rgb(37, 99, 235). HEX codes are case-insensitive, and a three-digit short form doubles each digit: #F60 means #FF6600. An eight-digit form adds transparency: #2563EB80 is the same blue at about 50% opacity.

HSL: hue, saturation and lightness

HSL describes a color the way people think about it:

• Hue (0–360°) is the position on the color wheel: 0 red, 120 green, 240 blue.
• Saturation (0–100%) is how vivid it is: 0% is gray, 100% is fully colored.
• Lightness (0–100%) runs from black (0%) through the pure color (50%) to white (100%).

HSL is the easiest format for making variations. Keep the hue and saturation, change the lightness, and you get a matching lighter or darker shade: hsl(221, 83%, 53%) for a button, hsl(221, 83%, 43%) for its hover state, hsl(221, 83%, 95%) for a pale background.

The same colors in all three formats

HSL values are rounded to whole numbers, so converting them back can shift a HEX code by one step.

Which format to use

Getting a color's code

1. Open the Color Picker.
2. Pick a color visually, type a HEX value, or upload a JPG, PNG, WebP or GIF and tap any pixel to sample it.
3. Copy the HEX, RGB or HSL value you need.

When sampling from a photo, tap several nearby pixels. Photos contain noise and shading, so neighboring pixels often differ slightly; a logo on a flat background gives a more reliable single value.

Picking readable color pairs

Converting colors doesn't tell you whether text will be readable on them. Blue #2563EB with white text passes accessibility guidelines; amber #F59E0B with white text doesn't. See Accessible Text Colors: Contrast Ratios Explained.

Frequently asked questions

Are HEX codes case-sensitive?

No. #2563eb and #2563EB are the same color.

Why does the same HEX color look different on two screens?

Screens differ in calibration, brightness and color gamut. The code is identical; the display is not. Printed colors can differ even more.

What does RGBA mean?

RGB plus an alpha channel for opacity, from 0 (transparent) to 1 (opaque). Modern CSS also accepts the alpha inside rgb().

Can I convert HEX to Pantone?

Only approximately. Pantone is a physical ink system, and many screen colors have no exact ink match.

Related

• Color Picker
• Accessible Text Colors: Contrast Ratios Explained

Sources

• W3C: CSS Color Module Level 4
• MDN: hsl() color function