Color Tools
Color Picker for Designers: HEX vs RGB vs HSL
Working with colors in Figma, CSS, and image editors means dealing with three formats that represent the same thing differently. Here's when to use each one — and how to switch between them without losing accuracy.
HEX: the web standard
HEX is what you use in CSS, HTML, and design tool brand color fields. It's six characters — like #1C60F6 — and it maps directly to red, green, and blue channels in base 16.
Use HEX when: you're writing CSS, sharing colors with a developer, documenting brand colors, or pasting into any tool that has a color input field. It's universally understood.
Don't use HEX when: you need transparency (there's no alpha channel in standard HEX — use rgba() instead) or when you need to generate color variations programmatically.
RGB: the numerical format
RGB gives you three numbers — red, green, blue — each from 0 to 255. The same blue as #1C60F6 is rgb(28, 96, 246).
Use RGB when: working in Photoshop or GIMP (which use 0–255 inputs), writing Canvas API or WebGL code, or when you need rgba(28, 96, 246, 0.5) for a semi-transparent overlay.
The weakness of RGB: if you want a slightly lighter version of a color, you can't just change one number predictably. All three channels interact. That's where HSL becomes useful.
HSL: the programmable format
HSL stands for Hue, Saturation, Lightness. The same blue looks like hsl(217, 91%, 54%). The third number — lightness — goes from 0% (black) to 100% (white), with the actual color at 50%.
Use HSL when: generating hover states (hsl(217, 91%, 44%) is the same hue, just 10% darker), building color scales in CSS custom properties, or theming with variables. It's much more readable than HEX when you need to reason about "lighter" or "darker".
The workflow: pick once, use everywhere
A color picker that outputs all three formats at once removes the busywork. Pick the color visually on the canvas. Copy the HEX for your stylesheet, the RGB for Photoshop, the HSL for your CSS variables. One pick, three formats, done.
Drag the canvas to the rough hue and brightness you want
Fine-tune the hue slider to hit the right spectrum position
Copy whichever format the tool you're working in expects
Frequently asked questions
Which color format should I use in CSS?
HEX for most values — it's compact and universally supported. Use rgba() when you need transparency. Use hsl() or hsla() when building color scales programmatically, since adjusting the lightness value is more predictable than adjusting hex digits.
What color format does Figma use?
Figma displays colors in HEX by default in the fill panel, but switches to RGB when you need an opacity value (it shows them as separate fields). You can copy any selected color as HEX, RGB, CSS, or HSL from the color picker popover.
What color format does Photoshop use?
Photoshop primarily uses RGB with 0–255 values. The color picker shows HEX alongside it. When working in CMYK mode (for print), the values change format entirely. For web work, stay in RGB mode.
Why does my color look different in CSS vs Figma?
Color space differences. Figma defaults to Display P3 for newer documents, which has a wider gamut than sRGB. CSS historically assumes sRGB. If you copy a hex value from Figma's Display P3 canvas and paste it into CSS without adjustment, it may look slightly different — especially for highly saturated colors.
What is the difference between HSV and HSL?
Both separate hue from color intensity, but they define the third dimension differently. HSV (Hue, Saturation, Value) — where 'Value' means brightness. A fully saturated color at maximum value is the pure hue. HSL (Hue, Saturation, Lightness) — where 50% lightness is the pure hue, 0% is black, 100% is white. CSS uses HSL. Color picker canvases typically use HSV internally because it maps more naturally to the 2D gradient.
How do I pick a color that matches a reference image?
On a Mac, use the Digital Color Meter (built-in, in Applications/Utilities) to hover over any pixel and get its RGB values. On Windows, use PowerToys Color Picker. Alternatively, open the image in a browser-based editor, zoom into the area, and use the eyedropper tool. Once you have the RGB values, paste them into the color picker to get HEX and HSL.