Boneyard Tools

HEX, RGB and HSL: which color format to use

The picker gives every color in three formats. Here is what each one means and when to reach for hex, RGB, or HSL in real work.

What the three formats describe

All three formats point to the same color, they just write it differently. Hex is a six digit code like #3b82f6, packing the red, green, and blue channels into pairs of base sixteen digits. RGB spells those same channels out as three numbers from 0 to 255, so #3b82f6 is rgb(59, 130, 246). HSL takes a different angle, describing the color as a hue on a 0 to 360 degree wheel plus a saturation and a lightness percentage, which for that blue is hsl(217, 91%, 60%). The picker computes all three from the one pixel you click.

When hex is the right pick

Hex is the default currency of the web and most design tools. It is compact, unambiguous, and drops straight into CSS, HTML, and nearly every graphics program. Because it maps exactly to the stored byte values with no rounding, it is the safest format to copy when you need a color to match perfectly across tools. When someone asks for a brand color, they almost always want the hex.

When RGB earns its place

RGB shines when you need to work with the channels as numbers rather than a code. It is the natural format for adding an alpha channel as rgba, for feeding colors into a script or spreadsheet, and for reasoning about how much red, green, or blue a pixel holds. Since the picker already shows RGB as three plain integers, it saves you converting a hex code by hand when a language or API expects separate values.

When HSL makes editing easier

HSL is built for adjusting a color rather than just recording it. Because hue, saturation, and lightness are separated, you can nudge one without disturbing the others: keep the hue and drop the lightness for a darker shade, or hold lightness and cut saturation for a muted version. That makes HSL the friendliest format for building tints, shades, and consistent palettes around a color you sampled from an image.

Frequently asked questions

Are hex and RGB exactly equivalent?

Yes. Both describe the same red, green, and blue channels with no loss, just in different notations. #3b82f6 and rgb(59, 130, 246) are the identical color, which is why the picker lets you copy whichever your workflow prefers.

Why is HSL rounded while hex is not?

Hex and RGB come straight from the stored byte values, so they are exact. HSL is derived by a conversion and shown as whole numbers for readability, which can round a hue or percentage by a unit. Use hex when an exact match matters.

Can I get an rgba value with transparency?

The fields show the opaque color as hex, RGB, and HSL. When a picked pixel is partly transparent, the tool also reports its alpha as a percentage, which you can turn into the fourth value of an rgba() color.