Color Converter

HEX, RGB, and HSL explained

• HEX — a six-digit hexadecimal code like #f97316, common in CSS and design tools.
• RGB — red, green, and blue channels from 0–255, e.g. rgb(249, 115, 22).
• HSL — hue (0–360°), saturation, and lightness (%), which maps more intuitively to how we perceive color.

Why convert between formats?

Designers often work in HEX, while CSS animations and theming are easier in HSL (you can tweak lightness or hue without recomputing the whole color). RGB is handy when working with canvas, image data, or opacity. This tool keeps all three in sync.

Tips

• Use the color picker for visual selection, or type a HEX value directly.
• Three-digit shorthand like #f73 is supported and expanded automatically.
• HSL makes it easy to generate lighter/darker variants by adjusting the lightness value.

Is my data safe?

Conversion happens entirely in your browser — nothing is sent anywhere.

Common color conversions

• HEX to RGB
• HEX to HSL
• RGB to HEX
• HSL to HEX

Frequently asked questions

How do I convert HEX to RGB?

Paste or pick a HEX value like #f97316 and the tool instantly shows the equivalent RGB and HSL. Conversion is two-way, so editing any format updates the others.

Does it support shorthand hex like #f73?

Yes. Three-digit shorthand is automatically expanded to its full six-digit form before converting.

Is it free and private?

Yes — it's free, and all color conversion runs in your browser with nothing sent to a server.