Developer Tools

Free Online Color Converter

Enter a color as HEX, RGB or HSL to instantly convert it into the other formats, with a live color preview. Handles both hex-to-RGB and RGB-to-hex conversion, plus HSL.

Color value (HEX, rgb(), or hsl())

Or pick visually

–HEX

–RGB

–HSL

How to use the color Converter

Type a color value in HEX (like #3366ff), RGB (like rgb(51,102,255)), or HSL format — or use the color picker.
Click 'Convert'.
See the equivalent value in all three formats.
Copy whichever format you need for your CSS.

Example

Entering #3366FF returns rgb(51, 102, 255) and hsl(225, 100%, 60%) — the same color in three common CSS formats. The same works in reverse: entering an RGB or HSL value returns the equivalent hex code.

Why convert between color formats?

Design tools, CSS specs, and APIs use different color formats. HEX is compact and common in CSS, RGB is intuitive for direct red/green/blue values, and HSL is often easier for adjusting lightness or saturation.

Live preview included

A color swatch updates instantly as you type or pick a color, so you can confirm you've got the exact shade you intended before copying the value into your code.

Frequently asked questions

Which color formats are supported?

HEX (#RRGGBB), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) are all supported, converting freely between each — including hex to RGB and RGB to hex.

Can I use the browser's color picker instead of typing a value?

Yes, the built-in color picker is synced with the text field for quick visual selection.

Does this support alpha/transparency values?

This tool focuses on solid HEX/RGB/HSL conversion; alpha channel support may be added in a future update.

Is this useful for CSS design work?

Yes, it's built specifically for quickly converting a color between the formats most commonly used in CSS and design tools.