Color Converter: Hex, RGB & HSL
Pick a color, or type a hex code, RGB values or HSL values — all three formats update together instantly, each with its own copy button.
RGB
rgb(109, 74, 255)
HSL
hsl(252, 100%, 65%)
Hex, RGB and HSL: three ways to write the same color
Hex codes (like #6D4AFF) pack red, green and blue values into a compact 6-digit code widely used in CSS and design tools. RGB spells the same three values out as numbers from 0–255 each. Both describe color the same way computers do: by mixing amounts of red, green and blue light.
HSL (hue, saturation, lightness) describes color more the way a person might: hue is the base color as a position on a color wheel (0–360°), saturation is how vivid or muted it is, and lightness is how close to black or white it is. It's often easier to reason about — for example, to make a color lighter or more muted, you'd adjust lightness or saturation directly rather than recalculating three separate RGB numbers.
Frequently asked questions
- What's the difference between RGB and HSL?
- They describe the same colors, just differently. RGB mixes amounts of red, green and blue light (0–255 each). HSL uses hue (a position on a color wheel), saturation (vividness) and lightness (closeness to black or white), which many people find more intuitive to adjust by hand.
- Can I use the color picker to find a hex code?
- Yes — click the color swatch to open your browser's native color picker, and the hex, RGB and HSL fields all update to match your selection.
- Does this support transparency (alpha)?
- No, this converts fully opaque colors only. For transparency, add an alpha value separately in your CSS (e.g. rgba() or an 8-digit hex code) using the RGB or hex value shown here as the base color.