Category: Developer tools
CSS Color Converter
Turn one HEX, RGB or HSL value into all three CSS notations with a live swatch
Paste a HEX, RGB or HSL value, or use the color picker, and get all three CSS notations plus a swatch. Everything is converted in your browser, nothing is uploaded.
Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
This is a converter for the three colour notations you actually write in a stylesheet: HEX, RGB and HSL. Paste a short #F00 or a full #FF0000, type rgb() or hsl() channel values, or open the native colour picker and choose visually. The tool reads the first three channels and gives you the normalised HEX, RGB and HSL equivalents together with a swatch, so you can confirm the colour before you copy it. If the value cannot be parsed it says so rather than guessing. The boundaries matter here, because most pages that rank for this phrase bundle far more. Alpha is the first one: rgba() and hsla() input is accepted, but the alpha component is ignored and never appears in the output, so there is no RGBA and no 8-digit #RRGGBBAA result. CMYK and other print workflows are out, as are Pantone and paint-chip matching. HSV/HSB, LAB, LCH, OKLCH and colour-profile conversion are all out, and named CSS colours such as tomato are not accepted as input. There is no palette generation, no contrast or WCAG evaluation, no eyedropper, no image upload, no batch conversion and no file download. What you get is one colour, rewritten three ways, instantly. Entered colour values and conversions stay in your browser and are never uploaded to LocalTools.
How to use it
- Paste a HEX, RGB or HSL value, or pick a colour with the native picker.
- The first three channels are parsed and converted into normalised HEX, RGB and HSL.
- Check the swatch, copy the notation you need, and watch for the invalid-colour status if a value will not parse.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- How do I convert HEX to RGB here?
- Paste the hex code with or without the leading #. Each pair of hex digits becomes one 0-255 channel, and the RGB and HSL equivalents appear immediately alongside a swatch.
- What is the difference between HEX, RGB and HSL?
- They describe the same sRGB colour three ways: HEX packs the channels into hexadecimal, RGB lists them as 0-255 numbers, and HSL expresses hue, saturation and lightness, which is easier to adjust by hand.
- What input formats are accepted?
- Three- and six-digit HEX, rgb() and rgba(), and hsl() and hsla(). Named CSS colours, CMYK, HSV, LAB, LCH and OKLCH are not accepted, and there is no image or file input.
- Why did my 8-digit hex lose its transparency?
- Because alpha is deliberately dropped. RGBA and HSLA values parse fine, but only the first three channels are converted, so the output is always opaque HEX, RGB and HSL with no alpha component.
- When should I use RGB over HEX?
- RGB reads more naturally when you are calculating channel values, and HSL is better when you want to nudge lightness or saturation. HEX stays the most compact for static stylesheet values. All three are produced here, so the choice is yours.