Every color on a screen can be expressed in multiple formats — and different tools expect different ones. CSS might need rgb(), Sass variables often use hex codes, and some design systems prefer hsl() for easier manipulation of lightness. Our free online HEX to RGB color converter translates between all three formats in real time. Pick a color with the visual color picker, type a hex code directly, or paste any #rrggbb value — and instantly see the equivalent RGB and HSL values, along with a live color preview swatch. One-click copy buttons let you grab any value immediately.
How to Convert Colors
- Color Picker — click the color swatch to open the native browser color picker. The hex, RGB, and HSL values update live as you drag.
- Type a HEX code — enter any 6-character hex code (with or without #) in the HEX field and press any key.
- Copy any value — click the clipboard icon next to HEX, RGB, or HSL to copy that format to your clipboard.
Color Format Reference
- HEX (#rrggbb) — six hexadecimal digits (00–ff) representing red, green, and blue channels. Used in HTML, CSS, and most design tools. Example:
#3a86ff. - RGB (red, green, blue) — three integer values 0–255. Used in CSS with
rgb()and in image processing. Example:rgb(58, 134, 255). - HSL (hue, saturation, lightness) — hue is 0–360°, saturation and lightness are 0–100%. Easier for humans to reason about — increase lightness to tint, decrease to shade. Example:
hsl(218, 100%, 61%).
Frequently Asked Questions
Can I convert an 8-digit HEX code with transparency (RGBA)?
The current tool handles 6-digit (#rrggbb) hex codes. For 8-digit (#rrggbbaa) codes with alpha transparency, the last two digits represent the opacity (00 = transparent, ff = opaque). We'll add RGBA support in a future update.
Which format should I use in CSS?
All three are valid in modern CSS. HEX is most compact. rgb() and hsl() are more readable. Use hsl() when you want to programmatically create lighter or darker shades by just changing the lightness value.