Three ways to write a color
Every color on a screen is a number. When a designer picks a blue in Figma, it is saved as a value, and the developer uses that value to apply it to a website. Three different formats exist to express the same color, and this tool converts between them instantly.
Understanding HEX, RGB, and HSL
HEX is the format you see most often in design tools. It starts with a # followed by six characters — letters A–F and digits 0–9. Copy a color code from Figma or Adobe, and it will usually be in this format. White is #ffffff; black is #000000.
RGB stands for Red, Green, Blue. Each channel runs from 0 to 255. A screen mixes those three beams of light to produce every visible color. All three at 0 gives black (no light); all three at 255 gives white (maximum light).
HSL stands for Hue, Saturation, Lightness — the format closest to how people naturally think about color. Hue is a position on the color wheel, from 0° (red) through yellow, green, cyan, blue, and violet, back to red at 360°. Saturation controls how vivid the color appears. Lightness controls brightness. HSL makes it straightforward to create variations: a lighter or darker version of a color is a matter of adjusting a single number.
When you need to convert
The most common situation is a mismatch between tools. A designer delivers colors as HEX values, but the codebase uses RGB. A paint picked in Photoshop needs to go into a CSS stylesheet. A color you spotted with browser developer tools is in HEX, but your current software only accepts HSL.
How to use this tool
Type or paste a value in any of the three fields and the other two update instantly. You can also open the color picker (the swatch button) to choose a color visually. The Copy button next to each field saves that value to your clipboard.
Frequently asked questions
The same color shows different HEX codes in different tools. Why? Color spaces differ slightly across monitors and applications. Two surfaces that appear identical to the eye may have subtly different numeric representations depending on the color profile in use.
How do I add transparency? HEX supports an eight-character format where the last two characters set opacity — for example #ff000080 is red at 50% opacity. In RGB, use rgba(255, 0, 0, 0.5), where the last value is 0 (fully transparent) to 1 (fully opaque). This tool covers the standard six-character HEX, RGB, and HSL formats.
Which format should I learn first? Start with HEX — it is the most widely understood format across both design tools and code. Learn HSL when you want to build a palette or work with color systems, where adjusting hue and lightness independently is very useful.