Color Converter
One color, three languages. Type a hex code or pick a shade and watch HEX, RGB, and HSL fall into line — with a live preview so you can see what you're doing.
How to use
- Type a hex code like
#ec5f9a(or justec5f9a) into the text field, or drag the color picker to find a shade visually. - Watch everything update live — the preview swatch and all three formats stay in sync as you type or drag.
- Click the HEX, RGB, or HSL box to copy that value straight to your clipboard. Keyboard users can press Enter on a focused box too.
- Paste it anywhere — CSS, design tools, documents, slides. The formats are standard and ready to use.
Frequently asked questions
What is the difference between HEX, RGB, and HSL?
They're three ways to describe the same color. HEX is a six-digit code designers and developers use in CSS (like #ec5f9a). RGB breaks the color into red, green, and blue light amounts, each from 0 to 255. HSL describes hue (the color itself, 0–360°), saturation (how vivid it is), and lightness (how bright or dark) — many people find it the most intuitive to tweak by hand.
How do I convert a hex color to RGB?
Type your hex code into the converter above and the RGB equivalent appears instantly — for example, #ec5f9a becomes rgb(236, 95, 154). Click the RGB box to copy it. No math required: the first two hex digits are red, the middle two are green, and the last two are blue.
Why does my hex code say it's invalid?
A valid hex code is 3 or 6 characters using only the digits 0–9 and letters A–F (the # at the start is optional). Common mistakes: a typo with a letter past F (like G), an 8-digit code with an alpha channel (alpha isn't supported here), or extra spaces. Fix those and the converter will accept it.
How do I use these color values in CSS?
Copy any of the three boxes and drop them straight into your stylesheet: color: #ec5f9a;, background: rgb(236, 95, 154);, or border-color: hsl(335, 79%, 65%); all work in any modern browser. The copied values are standard CSS, so they'll behave the same everywhere.
Related tools
Keep the momentum going.