Color Converter
Pick a color or paste any HEX, RGB or HSL value — the other formats update live, ready to copy.
About this tool
CSS wants #hex, your design tool shows RGB, and the tweak you need ("just a bit lighter") is easiest in HSL. This free converter keeps all three in sync: pick a color from the swatch or paste a value into any field, and the other formats update as you type — with copy buttons for each.
It accepts relaxed input, too: #f60, ff6600, rgb(255, 102, 0) or just 255,102,0 all work. A small note under the fields tells you whether black or white text is more readable on your color — handy for buttons and badges.
How to convert a color
- Click the swatch to open the picker, or paste a HEX, RGB or HSL value into its field.
- The other two formats update instantly as the color changes.
- Press Copy next to the format you need.
Frequently asked questions
What color formats are supported?
HEX (like #ff6600, with or without the #, including 3-digit shorthand), RGB (like rgb(255, 102, 0) or plain 255, 102, 0) and HSL (like hsl(24, 100%, 50%)). Edit any one field and the other two update instantly.
What is the difference between HEX, RGB and HSL?
They describe the same color different ways. HEX and RGB give the red, green and blue components — HEX in base-16, RGB in decimal 0–255. HSL gives hue (position on the color wheel in degrees), saturation and lightness, which is often easier for adjusting a color by eye.
Can I pick a color visually?
Yes — click the large swatch to open your browser's native color picker. The HEX, RGB and HSL fields update live as you drag.
Why do designers and developers need conversions?
Different tools speak different formats: CSS commonly uses HEX or HSL, design software often shows RGB, and some APIs expect decimal components. Converting keeps the exact same color across all of them.
Is anything uploaded?
No — conversion is a few lines of math that run entirely in your browser. The page works offline once loaded.