Color Code Converter

Overview

Precision Color Conversion for Modern Web Development

Paste a colour in any of HEX, RGB or HSL and the other two fill in instantly, alpha and all, with a live swatch and a ready-to-paste background-color line. It runs entirely in your browser: nothing is uploaded, and it keeps working offline.

Colour is the one part of a design system that gets written down three different ways. A CSS design block holds HEX, a canvas or an animation wants channel numbers, and anyone building tints and hover states reaches for HSL because lightness is a number you can reason about. All three stay in step here, both directions. Type into any of them. Copy whichever one your file needs.

Every conversion happens in sRGB. That is what browsers paint. The three fields accept both spellings the language allows, rgb(14, 116, 144) and rgb(14 116 144 / 50%), as well as percentages, hue units, and HEX in three, four, six or eight digits with or without the leading #. A value outside the legal range is adjusted the way CSS adjusts it: hue wraps, everything else clamps, and each adjustment is named under the tool rather than applied in silence. Something that is not a colour is an error that says what it found, not a swatch quietly turning black.

Nothing leaves the page. Brand colours, unreleased palettes and client work stay on your device, which is the same promise every tool here makes and the reason there is no upload button to find. With alpha supported across all three formats you can dial in a glass overlay or a hover tint and take away the exact rgba(), hsla() or eight-digit hex your stylesheet needs.

Guide

How to Use Color Code Converter

Enter a color in any format

Use the field that matches what you have. Case does not matter. HEX takes #0e7490, the three-digit shorthand #abc, the four-digit #abcd and the eight-digit form with alpha, and the # itself is optional, so a value pasted out of a spreadsheet works as it is. RGB and HSL take both spellings CSS allows: the familiar rgb(14, 116, 144) and the current rgb(14 116 144 / 50%), with percentages, and hue in deg, rad, grad or turn.

A value still being typed is not an error. Half of an eight-digit hex, or an rgb( with nothing after it, reads Keep typing and leaves the colour you already had alone.

The converter with rgb open bracket 14 space 116 space 144 slash 50 percent typed into the RGB field. The HEX field reads hash 0E749080, the HSL field reads hsla open bracket 193, 82 percent, 31 percent, 0.5, and the status pill reads RGB to every format. — The space-and-slash spelling is what browsers and design tools emit today. Both forms parse, and so does a percentage.

Add alpha if you need it

Alpha travels with the colour in every direction. A percentage works too. Drag the Alpha slider, or write it into the value: rgba(14, 116, 144, 0.5), hsl(193 82% 31% / 50%), or two extra hex digits on the end — #0e749080. Whichever you use, the other three update, and the printed number is the shortest one that still round-trips to the same byte, so 80 reads back as 0.5 rather than 0.502.

The converter with hash 0e749080 in the HEX field. The preview swatch shows a half-transparent teal over a grey and white checkerboard, and the four ready-to-paste rows read hash 0E749080, rgba open bracket 14, 116, 144, 0.5, hsla open bracket 193, 82 percent, 31 percent, 0.5, and background-color colon hash 0e749080. — The swatch sits on a checkerboard, so half-transparent looks half-transparent rather than looking solid.

See it convert live

Every field updates on the keystroke, and the one you are typing in is left alone so the caret never jumps. The four sliders hold hue, saturation, lightness and alpha, and dragging one keeps the other three exactly where they were — HSL is the source of truth while you are using them, so the hue does not drift as you pull saturation down.

A value outside the legal range is adjusted rather than refused. Hue wraps: 400 becomes 40°. Saturation, lightness and the RGB channels clamp. CSS does the same thing with the same value; the difference is that the panel under the tool names every adjustment instead of letting it happen quietly. Something that is not a colour at all gets an error instead, naming what it found.

The converter with hsl open bracket 400, 200 percent, 300 percent typed into the HSL field. The status pill reads Clamped to a real colour and an amber panel headed Adjusted to fit lists hue 400 to 40 degrees, saturation 200 percent to 100 percent and lightness 300 percent to 100 percent. — Out-of-range values are adjusted the way CSS adjusts them, and every adjustment is listed rather than applied silently.

Check the preview swatch

The swatch is the check. It paints the live value, alpha included, over a checkerboard, so transparency is something you can see rather than something a field claims. The hex sits on it in its own plate, because the colour behind that label is whatever you just typed and it has to stay readable over all of them.

The counts beside the status pill are the raw channels: R, G, B and A, as integers, which is what you compare against a design token or a screenshot pipette.

Copy the CSS you need

There are four rows: the HEX, the RGB, the HSL, and a background-color declaration ready to paste into a stylesheet. Each has its own button. It copies the string beside it exactly, with nothing reformatted on the way out. On a phone the tool becomes two tabs, Type and Copy, and every button is a full-height target.

The converter on a phone with the Copy tab open. A half-transparent teal swatch on a checkerboard sits above four rows labelled HEX, RGB, HSL and CSS, each with its own Copy button, and the status pill below reads HEX to every format with R 14, G 116 and B 144. — On a phone the two panes become tabs, and the Copy tab is four values and four buttons.

Support

Frequently Asked Questions

How do I convert a HEX color to RGB or HSL?

Type your HEX value — for example #0e7490 — into the HEX field, and the tool instantly fills in the RGB (rgb(14, 116, 144)) and HSL (hsl(193, 82%, 31%)) equivalents, plus a preview swatch. Each format has a copy button and a ready-to-paste CSS snippet. It works in reverse too: enter RGB or HSL and the others update. Everything happens in your browser.

Does this upload anything, and does it work offline?

No upload, and yes it works offline. All conversion happens in your browser using JavaScript — there's no server involved, no logging, and no tracking. Once the page has loaded it keeps working with no internet connection, which you can confirm in your browser's network tab. Colors are just math done locally on your device.

What color formats does it support?

HEX, RGB, and HSL, with their alpha variants. HEX takes 3, 4, 6 or 8 digits: #abc, #abcd, #0e7490, #0e7490ff. The leading # is optional. RGB and HSL take both spellings CSS allows: rgb(14, 116, 144) and rgb(14 116 144 / 50%), with percentages for the channels and hue in deg, rad, grad or turn. Type in any one and the others stay in sync. These are the formats you use in CSS, which is the focus — CMYK, LAB, and wide-gamut spaces are out of scope.

How does alpha or transparency work here?

Alpha (opacity) is supported across all formats, and the tool keeps it consistent. In rgba() and hsla() it's a value from 0 (transparent) to 1 (opaque). A percentage works too. In HEX it's an extra two hex digits on the end, making an 8-digit hex — so #0e7490 at 50% becomes #0e749080. The preview sits on a checkerboard, so half-transparent looks half-transparent rather than looking solid. The printed number is the shortest one that still round-trips to the same byte: 80 comes back as 0.5, not 0.502.

Why doesn't HEX to HSL always round-trip exactly?

Because HSL rounds. Hue is stored as a whole number of degrees and saturation and lightness as whole percentages, so converting HEX → HSL and back to HEX can land one step away from where you started. The color is visually identical — you won't see the difference — but it isn't guaranteed byte-for-byte. When exactness matters, treat HEX or RGB as your source of truth.

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

They describe the same sRGB color three ways. HEX and RGB both specify red, green, and blue channels — HEX in base-16 (#0e7490), RGB in decimal (14, 116, 144). HSL instead uses hue (the color's position on the wheel), saturation (how vivid), and lightness (how bright). HEX and RGB are compact; HSL is far more intuitive when you want to adjust a color rather than just name it.

Can I get ready-to-paste CSS?

Yes. Alongside each format the tool gives you a copy button and a background-color CSS snippet you can paste straight into a stylesheet. Grab the exact format your project uses — HEX for brevity, RGB/HSL for readability, or an alpha variant for transparency. Because the formats stay in sync, you always copy the correct value for the color you're previewing.

Does it support 3-digit and 8-digit hex?

Yes — and the 4-digit form too. Shorthand 3-digit hex (#abc) expands to #aabbcc, 4-digit hex (#abcd) expands to #aabbccdd with that last pair as alpha, 6-digit works as usual, and 8-digit is 6 digits of colour plus 2 of alpha. The # itself is optional. Whichever form you enter, the tool normalizes it and shows the equivalent RGB and HSL, so you can move between shorthand and full forms freely.

Is HSL better for adjusting a color?

Usually, yes. HSL separates a color into hue, saturation, and lightness, so to make a shade lighter you just raise the lightness, and to mute it you lower the saturation — no guesswork across three RGB channels. That's why designers and developers reach for HSL when building tints, shades, and hover states. Convert your HEX to HSL here, tweak, and copy the result back.

What color space does it use?

sRGB — the standard color space of the web and of CSS colors. Every conversion between HEX, RGB, and HSL happens within sRGB, which is what browsers render by default. Wide-gamut spaces like Display P3, and print or perceptual spaces like CMYK and LAB, aren't handled here; for those you'd need a dedicated color-management tool. For web and app work, sRGB is what you want.

Is there a live preview as I type?

Yes. A preview swatch shows the current color and updates the instant you change any field, so you get immediate visual feedback rather than converting blind. All three format fields update live together too — change the HSL lightness and you'll watch the HEX, RGB, and swatch shift in real time. A value you are still halfway through typing is left alone rather than flagged. One outside the legal range is adjusted the way CSS adjusts it: hue wraps, everything else clamps. Each adjustment is named under the tool. Something that is not a colour at all gets an error saying what it found.

Is it free, and are there limits?

Yes, completely free — no payment, no signup, no account, and no usage caps or watermarks. Since everything runs in your browser, there's nothing for us to meter. Convert as many colors as you like, as often as you like, including offline once the page has loaded.

Still have questions?

If you can't find the answer you're looking for, feel free to contact our support team.

Privacy Focused

Instant Results

No Signup

Browser Based

Precision Color Conversion for Modern Web Development

How to Use Color Code Converter

Frequently Asked Questions

Still have questions?