Hex to RGB and HSL
Convert hex to RGB and HSL, or reverse it. Copy any format with the icon.
Color conversion happens in the browser. Nothing is uploaded.
What it does
About the Hex to RGB/HSL Converter.
A hex to RGB converter translates CSS hex colors into RGB and HSL, and can convert those channels back into hex for tokens, code, and design files.
Product teams bounce between Figma hex, CSS rgb(), and HSL for theming. This tool keeps every format in sync so you can paste the one your codebase already uses.
How to use
Three steps.
Set
Paste or type a hex color, or enter RGB or HSL channels.
Read
Watch the other formats update, including CSS function strings.
Copy
Copy the format you need with the copy control next to the value.
When to use it
Where it helps.
Use it when a spec is in hex but the codebase wants rgb() or hsl(), when you are documenting a palette, or when you need to nudge lightness in HSL without losing the hue.
FAQ
FAQ.
Which color formats does this converter support?
It converts between hex, RGB, and HSL and shows CSS-ready strings you can paste into a stylesheet or token file.
Does conversion happen on a server?
No. Channel math runs in your browser. Colors are not uploaded.
How do I copy a value into CSS?
Use the copy icon beside RGB, HSL, or hex. Paste the string into a custom property, a utility class, or a Figma color style note.
Why convert hex to HSL?
HSL makes it easier to keep hue and saturation while changing lightness for hover, pressed, and muted variants of the same brand color.
More tools
color
Contrast Checker
Check WCAG 2 contrast between text and background.
color
Color Blindness Simulator
Preview a color or UI screenshot under protanopia, deuteranopia, and tritanopia.
type
Type Scale Generator
Generate a modular type scale from a base size and ratio.