What's the difference between HEX, RGB and HSL?

They're three notations for the same color. HEX and RGB both express red/green/blue channel values (in hexadecimal and decimal respectively), while HSL expresses hue (0–360°), saturation and lightness — which is why it's easiest to reason about when adjusting colors.

Which format should I use in CSS?

All three are fully supported everywhere. HEX is the most common convention; HSL is increasingly preferred in design systems because creating consistent lighter/darker variants only requires changing the lightness number.

Can I paste values without the wrappers?

Yes. "15, 118, 110" works as RGB, "175, 77, 26" as HSL, and HEX works with or without the leading # — including 3-digit shorthand.

Does the tool support transparency (alpha) values?

Not yet — it converts opaque colors between HEX, RGB and HSL. For rgba()/hsla(), convert the base color here and append your alpha value in CSS.

Are the conversions exact?

HEX ↔ RGB conversion is exact in both directions. HSL values are rounded to whole numbers for readability, which is the standard convention and visually identical in practice.

Color Converter — HEX, RGB & HSL

Browser processing — files never leave your device

Convert any color between HEX, RGB and HSL formats instantly. Type a value in any field or use the visual picker — the other formats update live, with one-click copy for your CSS.

Loading tool…

How to use this tool

Type or paste a color into the HEX, RGB or HSL field — or use the visual picker.
Watch the other two formats and the preview swatch update instantly.
Click a copy button to grab the format you need.

About this tool

HEX, RGB and HSL are three ways of writing the same color. HEX (#0f766e) is the compact web classic; RGB (rgb(15, 118, 110)) maps directly to how screens mix red, green and blue light; and HSL (hsl(175, 77%, 26%)) describes hue, saturation and lightness — the most human-friendly of the three, because making a color lighter, darker or more muted means changing a single obvious number.

This converter keeps all three formats in sync as you type, accepts flexible input (with or without the # or rgb()/hsl() wrappers), and shows a live swatch so you always see exactly what you're copying. Everything runs instantly in your browser with nothing sent anywhere.

Common ways people use this

Converting a designer's HEX value into the HSL your CSS codebase uses
Grabbing the RGB equivalent of a brand color for a canvas, chart, or email template
Nudging a color lighter or darker via HSL, then copying the HEX back to your stylesheet

Tips

Prefer HSL when creating color variations — hover states, borders, backgrounds — since shifting only the lightness value keeps the hue perfectly consistent.
Shorthand 3-digit HEX values like #0af work too; they expand automatically to the full 6-digit form.

Frequently asked questions

What's the difference between HEX, RGB and HSL?: They're three notations for the same color. HEX and RGB both express red/green/blue channel values (in hexadecimal and decimal respectively), while HSL expresses hue (0–360°), saturation and lightness — which is why it's easiest to reason about when adjusting colors.
Which format should I use in CSS?: All three are fully supported everywhere. HEX is the most common convention; HSL is increasingly preferred in design systems because creating consistent lighter/darker variants only requires changing the lightness number.
Can I paste values without the wrappers?: Yes. "15, 118, 110" works as RGB, "175, 77, 26" as HSL, and HEX works with or without the leading # — including 3-digit shorthand.
Does the tool support transparency (alpha) values?: Not yet — it converts opaque colors between HEX, RGB and HSL. For rgba()/hsla(), convert the base color here and append your alpha value in CSS.
Are the conversions exact?: HEX ↔ RGB conversion is exact in both directions. HSL values are rounded to whole numbers for readability, which is the standard convention and visually identical in practice.

QR Code GeneratorCreate a QR code from any text or URL and download it as PNG or scalable SVG. No watermark, no expiry — the code is generated in your browser.Password GeneratorCreate strong random passwords with control over length, symbols, digits and ambiguous characters. Generated locally with cryptographic randomness — never transmitted.UUID GeneratorGenerate version-4 UUIDs using your browser's cryptographic random source. Create one or a batch, with uppercase and hyphen-free formatting options.Base64 TextConvert text to Base64 and back. Unlike naive implementations, this handles UTF-8 correctly, so emoji and non-Latin text round-trip safely.