About this tool
Different tools and codebases expect colors in different formats — CSS often uses HEX or HSL, while some design tools and canvas APIs expect RGB. This converter keeps HEX, RGB, and HSL values in sync: edit any one of them and the others update instantly, with a live swatch so you can see the result.
How to use it
- 1Enter a HEX color code, or adjust the RGB or HSL number fields directly.
- 2Watch the color swatch and all three formats update together.
- 3Click "Copy" next to the RGB or HSL value to copy it to your clipboard.
Common mistakes to avoid
- Forgetting the # prefix when typing a HEX code — the field accepts it with or without, but it's easy to mistype the six digits.
- Confusing HSL's lightness (a percentage) with RGB brightness — they're related but not numerically the same.
- Assuming all three formats round-trip perfectly — HSL to RGB conversion can introduce small rounding differences.
Use cases
- Converting a design tool's HEX export into RGB or HSL for CSS custom properties.
- Fine-tuning a color's lightness or saturation using HSL sliders instead of guessing HEX digits.
- Checking what a brand color looks like before using it in code.
Frequently asked questions
What's the difference between HEX, RGB, and HSL?
HEX and RGB both describe a color as red, green, and blue channel values — HEX in base-16 shorthand, RGB in base-10. HSL describes the same color by hue, saturation, and lightness, which is often more intuitive for adjusting a color's shade.
Does this tool support transparency (alpha)?
Not currently — it converts fully opaque colors between HEX, RGB, and HSL.