Color Converter

Pick a color and instantly get its HEX, RGB and HSL codes — ready to copy into your CSS.

HEX: #6366f1
RGB: rgb(99, 102, 241)
HSL: hsl(239, 84%, 67%)

How to use the color converter

  • Use the picker or type a HEX code.
  • Copy the HEX, RGB or HSL value by tapping it.

HEX vs RGB vs HSL

  • HEX — six-digit web code like #6366f1.
  • RGB — red, green, blue values (0–255).
  • HSL — hue, saturation, lightness — easiest for tweaking shades.

Benefits

  • Converts between HEX, RGB and HSL with a live color picker.
  • Instant, and it doubles as a quick lesson in how each format works.
  • Runs in your browser — nothing is uploaded.
  • Free and unlimited.

Limitations to know

  • It works in on-screen sRGB color, not print (CMYK) or wide-gamut color spaces.
  • Alpha (opacity) handling is basic.
  • The color you see depends on your display’s calibration, so two screens may differ.

Common mistakes to avoid

  • Expecting an on-screen HEX value to match a printed CMYK color exactly.
  • Forgetting the leading "#" when pasting a HEX value elsewhere.
  • Confusing HSL’s hue (measured in degrees) with a percentage.

Alternatives

To pull a color out of a photo you would need an image color picker. The JSON Formatter and Base64 Encoder round out the same everyday developer toolkit.

Last updated: August 2026 · Reviewed by the AI Toolbox editorial team.

Frequently asked questions

Which format should I use in CSS?

All three work in modern CSS. HSL is handy when you want to adjust lightness or saturation.

Is it free?

Yes, completely free with no sign-up.

Related tools