Color Converter
Convert colors between HEX, RGB, and HSL with a live preview.
#16a34argb(22, 163, 74)hsl(142, 76%, 36%)Runs entirely in your browser — your data never leaves this page.
About the Color Converter
This color converter translates colors between HEX, RGB, and HSL formats with a live visual preview. Pick a color from the swatch or type a HEX code, and instantly get the equivalent rgb() and hsl() values ready to paste into your CSS. Understanding all three formats helps you tweak colors more intuitively — HSL in particular makes it easy to adjust lightness and saturation.
It is a quick companion for front-end work, design systems, and anyone matching brand colors across tools.
How to use it
- 1Pick a color using the swatch, or type a HEX code like #16a34a.
- 2Read the equivalent HEX, RGB, and HSL values below.
- 3Copy the format your stylesheet or design tool needs.
Common use cases
- Converting a HEX brand color to RGB or HSL for CSS
- Adjusting lightness and saturation via HSL
- Matching colors across design and code
- Building a consistent color palette
Frequently asked questions
What is the difference between RGB and HSL?
RGB describes a color by its red, green, and blue components. HSL describes it by hue (the color itself), saturation (how vivid it is), and lightness (how light or dark). HSL is often more intuitive for making a color lighter or more muted.
Why does my HEX code show an error?
The tool expects a 6-digit HEX color, with or without the leading # (for example #1a2b3c). Shorthand 3-digit codes and named colors are not accepted — expand them to the full 6-digit form.
Does it support alpha/transparency?
This converter works with fully opaque colors (HEX, RGB, HSL). For transparency you would add an alpha channel (rgba or hsla) in your CSS, which is outside what this tool converts.