Design conversion tool

Color Converter

Convert colors between HEX, RGB, and HSL with a live preview and copy-ready CSS values — processed locally in your browser.

HEX ↔ RGB ↔ HSLLive previewCSS-readyBrowser-based

Workspace

HEX · RGB · HSL

Enter a color in one format and convert it to the others for CSS, design systems, and documentation.

Live syncColor pickerOne-click copy

Quick picker

Sample colors

Input

Choose a format tab and type values, then sync.

HEX

Output

Copy any format for CSS or design documentation.

#0ea5e9

rgb(14, 165, 233)

hsl(199, 89%, 48%)

Guide

1
Choose an input format
Use the HEX, RGB, or HSL tab to enter values in the format you already have from a design file, browser inspector, or brand guide.
2
Edit values or pick a sample
Type directly into the fields, use the color picker for quick selection, or click a sample swatch to load a preset color.
3
Check the synced outputs
All three format panels update together so you can copy the representation you need for CSS, Figma tokens, or documentation.
4
Copy the result
Click Copy next to any format row to place that value on your clipboard — for example rgb(14, 165, 233) or hsl(199, 89%, 48%).

HEX is common in design tools; rgb() and hsl() are standard in CSS.
HSL makes it easy to adjust lightness without changing the hue.
Use 6-digit HEX for web-safe precision; 3-digit HEX expands to double digits.
If conversion fails, check for missing #, out-of-range numbers, or invalid separators.

GuideConvert colors in three steps3 steps