Color converter
HEX to RGB and HSL with live swatch.
RGB
HSL
About this tool
Convert colors between HEX, RGB and HSL and preview the result instantly. A quick bridge between design tools and CSS.
Why use it
- See the live color swatch as you edit the values.
- Move between the formats your design and code each prefer.
- Copy ready-to-paste CSS color strings.
Common use cases
- Turn a HEX from a mockup into RGB for an rgba() rule.
- Adjust lightness in HSL to build a color scale.
- Match a brand color across tools that use different formats.
Tips
- HSL makes it easy to create lighter and darker shades of one hue.
- Use rgba() or hsla() when you need transparency.
How to use
- Type a HEX like #0ea5e9.
- RGB and HSL update live.
- Swatch shows the color preview.
FAQ
- Which color formats are supported?
- HEX, RGB and HSL, converted between each other instantly.
- Is anything uploaded?
- No. Conversions are pure math done in your browser.
- Can I get CSS-ready values?
- Yes, the output is formatted so you can paste it straight into your stylesheet.
- Does it support alpha transparency?
- Yes, RGBA and HSLA values include the opacity channel.
- Why does HEX sometimes have 8 digits?
- The last two digits encode alpha (opacity) in #RRGGBBAA notation.
- Can I pick a color visually?
- Yes, use the picker and the matching HEX, RGB and HSL values update together.