📌 Overview

Convert colors between HEX, RGB and HSL instantly with a live preview swatch. Handy for designers and developers who need consistent color values across CSS, design tools and code.

🎨 Color Converter

Convert colors between HEX, RGB and HSL instantly with a live preview swatch. Handy for designers and developers who need consistent color values across CSS, design tools and code.

HEX

RGB

HSL

Live preview

🔒 All processing happens in your browser. No data is uploaded to any server.

📋 How to Use

Enter a color in any format (HEX, RGB or HSL).
See the other two formats update live.
Use the preview swatch to check the result.
Copy the value you need.

❓ FAQ

Which formats are supported?

HEX (#rrggbb), RGB (r, g, b) and HSL (h, s%, l%). Entering any one converts the other two automatically.

Does it clamp out-of-range values?

Yes. RGB channels are clamped to 0–255 and HSL saturation/lightness to 0–100%, so you always get a valid color.

Is there an eyedropper?

Not yet. Paste or type a value to convert; a native picker may be added later.

❓ More Questions

Which formats are supported?

HEX (#rrggbb), RGB (r,g,b) and HSL (h,s%,l%). Enter any one and the other two are computed automatically.

What if a value is out of range?

It is automatically clamped to the valid range (RGB 0-255, HSL 0-100%), so the output is always a valid color.

💡 Use Cases

🎨

Design Handoff

Match a HEX from Figma to CSS RGB.

💻

CSS Coding

Get HSL for easy opacity tweaks.

🖌️

Theming

Preview a color before committing it.

🔗 Related Tools

📖 Deep Dive: Color Converter

Why convert colors

Design drafts often use HEX, CSS gradients and opacity use HSL, and Canvas drawing uses RGB. Switching between these contexts by hand is slow and error-prone.

How it works

All three formats are just different coordinates of the same color: RGB is the additive-light component and HSL projects RGB onto hue, saturation, and lightness space. The tool does the math between them and renders a preview swatch.

A quick example

Copy #3b82f6 from a design draft and the tool immediately gives rgb(59,130,246) and hsl(217,91%,60%) - ready-to-use CSS values.