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

They are three ways to describe the same color. HEX (e.g. #3B82F6) is a compact hexadecimal notation popular in CSS and design tools. RGB (e.g. rgb(59, 130, 246)) describes a color by its red, green, and blue channel intensities, which is convenient for canvas and JavaScript color math. HSL (e.g. hsl(217, 91%, 60%)) describes a color by hue, saturation, and lightness, which makes it easy to adjust brightness or create variants.

Is this color converter free and private?

Yes. The tool is completely free to use and all conversion happens locally in your browser. No color values are ever uploaded to a server, so your work stays private.

Does it support alpha or transparency?

Not in this version. The converter works with opaque colors only (HEX, RGB, and HSL without an alpha channel). Support for RGBA/HSLA transparency may be added later.

What is the eyedropper tool and which browsers support it?

The eyedropper (Pick from Screen) lets you sample any color from your screen using the native browser EyeDropper API. It is available in Chromium-based browsers such as Chrome and Edge. If your browser does not support it, the button is hidden automatically.

Is there a limit on how many colors I can convert?

No. You can convert as many colors as you like, as often as you like. There are no limits, accounts, or sign-ups required.

Color Converter

Convert colors between HEX, RGB, and HSL instantly. Everything runs locally in your browser — free, fast, and private.

#3B82F6

Click the swatch to open your system color picker, or edit any field below to convert live.

Presets

HEX

RGB

HSL

How it Works

Convert a color between three formats in seconds.

Enter a Color

Type a value in any format, click the swatch to pick visually, or sample a color from your screen.

See It Converted

The color is instantly translated to the other two formats and shown in a live preview.

Copy the Value

Click the copy button next to the format you need and paste it straight into your project.

Color Tips

Pick the right format for the job and use color with intention.

Use HEX for Design & CSS

HEX is the most common format in CSS, design tools, and style guides. It's compact and easy to share.

Use RGB for Color Math

RGB channels map directly to how screens render color, making it ideal for canvas work and JavaScript color calculations.

Use HSL to Adjust Colors

HSL lets you tweak hue, saturation, and lightness independently — perfect for programmatically generating color variants.

Mind Contrast for Text

For accessible text-on-background, ensure enough contrast. Nudge HSL lightness up or down until foreground and background are clearly distinct.

Bidirectional live conversion — edit HEX, RGB, or HSL and the others update instantly.