Color Code Converter

Pick a color or type a value into any field — HEX, RGB or HSL — and the other two update instantly, calculated live in your browser using standard color-space math.

How to Use the Color Code Converter

Click the color swatch/picker to visually choose a color, or type directly into the HEX, RGB or HSL field.
Press Enter or click outside the field you edited — the other two formats and the swatch preview update instantly.
Copy whichever format you need directly from its field for use in your CSS, design tool or codebase.
Accepted formats: HEX like #7C3AED or 7C3AED; RGB like rgb(124, 58, 237) or 124, 58, 237; HSL like hsl(262, 83%, 58%) or 262, 83%, 58%.

Why Use This Tool?

Is my color data sent anywhere?

No. All conversion math — HEX to RGB, RGB to HSL, and back — runs entirely in your browser using plain JavaScript. Nothing you enter here is transmitted to a server, logged, or stored.

Why do I need HEX, RGB and HSL if they're the same color?

Each format is useful in different situations. HEX is compact and the most common format in CSS and design tools. RGB is intuitive when you're thinking in terms of red/green/blue light channels, and it supports the extra alpha channel via rgba(). HSL (hue, saturation, lightness) is often the easiest format for humans to reason about — it's simple to create a lighter or darker version of a color by only changing the lightness value, without touching the underlying hue.

How accurate is the conversion?

This tool uses the standard, widely-documented RGB↔HSL conversion formulas used across color science and CSS specifications, rounding to the nearest whole degree/percent for HSL and the nearest integer for RGB/HEX. Minor rounding differences of ±1 can occur when converting back and forth repeatedly between formats, which is expected and harmless for design and development use.

Who uses a color code converter?

Frontend developers translating a designer's HSL palette into HEX values for a CSS file, designers matching a brand color across a Figma file (RGB) and a website stylesheet (HEX), and anyone who received a color value in one format but needs it in another will find this a fast, no-friction way to convert without doing the math by hand.