Color Converter

Convert colors between HEX, RGB, and HSL formats instantly with live preview. Perfect for designers and developers who need quick color format conversions. Our tool auto-detects your input format and provides all three outputs simultaneously with CSS variable syntax.

Pick a Color:

Or Enter Color (HEX, RGB, or HSL):

Preview:

HEX:

RGB:

HSL:

CSS Variable:

How to Use

Use the color picker to select any color visually, or type a color value directly
Enter colors in any format: HEX (#3b82f6), RGB (rgb(59, 130, 246)), or HSL (hsl(217, 91%, 60%))
View the live color preview and all format conversions automatically
Click "Copy" next to any format to copy it to your clipboard
Use the CSS Variable output for modern CSS development with custom properties

Frequently Asked Questions

What color formats are supported?

The tool supports HEX (#RRGGBB), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) formats. You can input any of these and get conversions to all three formats plus CSS variable syntax.

How do I use CSS variables?

Copy the CSS variable output and paste it in your CSS :root selector. Then reference it anywhere in your CSS using var(--color-primary). This makes theme management easier.

Does the tool support alpha/transparency?

Currently, the tool handles solid colors. For transparency, you can manually add alpha values to RGB (rgba) or HSL (hsla) outputs after conversion.

Is my color data stored anywhere?

No. All color conversions happen entirely in your browser using JavaScript. No data is sent to any server.