HEX vs RGB vs HSL: which color code should you copy?
A short guide to the three formats Filvo shows when you pick a color from an image — and when each one is useful.
The three codes describe the same pixel. You pick the notation your next tool wants — not a “better” color.
HEX
HEX is the web default: a six-digit code like #0D9488. Use it in CSS, design tokens, and most no-code builders. It is compact and easy to paste.
RGB
RGB spells out red, green, and blue channels. Canvas, some APIs, and print-adjacent tools prefer it. The color is the same as HEX; only the notation changes.
HSL
HSL splits hue, saturation, and lightness. That is handy when you sampled a brand color and want a lighter hover state or a muted background without leaving that hue. A British spelling you may see in older docs is “colour” — the values are identical.
Filvo’s image color picker shows HEX, RGB, and HSL for every locked pixel so you do not have to convert by hand. Copy the format your next tool asks for and keep a note of the HEX if you will reuse the palette later.
Steps
- Lock a pixel. Click in the color picker so all three formats appear.
- Choose a notation. HEX for CSS, RGB for Canvas/APIs, HSL when you will derive tints.
- Copy once. Paste into the tool that asked for that format.
Ready to try it? Pick a color from an image.