Color Converter
Convert between HEX, RGB, and HSL color formats with live preview — 100% local
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
RGB Values
59, 130, 246
HSL Values
217, 91%, 60%
About Color Converter
The same color can be written in several formats. HEX (such as #10b981) is common in CSS and design tools, RGB describes the red, green, and blue channels, and HSL describes hue, saturation, and lightness, which is often easier to reason about when adjusting a color.
Enter a color in one format and this tool shows the equivalent values in the others so you can paste whichever your code or design tool needs. Conversions happen in your browser. Small rounding differences can occur when converting between formats.
Common use cases
- Converting a designer's HEX value to RGB or HSL for a stylesheet.
- Adjusting lightness or saturation by editing HSL values.
- Checking that two formats describe the same color.
- Preparing values for CSS variables or a theme file.
Frequently asked questions
- Why do converted values differ slightly?
- HSL uses fractional values while RGB uses whole numbers from 0 to 255, so rounding can shift a value by one.
- Which format should I use in CSS?
- Any of them works. HEX is compact, while HSL makes it easy to create lighter and darker variants of one color.
- What does a three-digit HEX like #fff mean?
- It is shorthand where each digit is doubled, so #fff equals #ffffff.