Color Converter

How to use it

A color on the web is usually written in one of three formats: HEX, RGB or HSL. HEX packs a color into a single string — a # followed by six hexadecimal digits, taken in pairs for red, green and blue, each pair ranging from 00 (none) to FF (full). RGB spells out the same three channels as plain numbers instead of hex pairs, with red, green and blue each running from 0 to 255. HSL takes a different angle: instead of channel intensities, it describes hue as a position around a 360° color wheel, then saturation and lightness as percentages, which map far more naturally to how people actually think about color. Each format persists because it's better suited to a different job, not because one replaced the others. HEX is compact and easy to paste into CSS or a design tool — six characters capture an exact color with no ambiguity. RGB maps directly onto how screens actually produce color, mixing red, green and blue light at the pixel level, and it extends cleanly to rgba() by adding a fourth alpha channel for transparency. HSL is the one humans reach for when adjusting a color rather than specifying it from scratch: raising or lowering lightness gives a predictable lighter or darker shade, and sliding hue moves smoothly around the color wheel to build a matching palette. A concrete example makes the relationship clear. Take a mid blue: as HEX it's #3B82F6. Split into pairs, 3B, 82 and F6 convert from hexadecimal to decimal as 59, 130 and 246 — exactly the same color written as rgb(59, 130, 246). Convert those same red, green and blue values into hue, saturation and lightness and you get hsl(217°, 91%, 60%): a hue of 217° sits in the blue segment of the color wheel, 91% saturation means it's a vivid, unmuted blue, and 60% lightness places it roughly in the middle of the black-to-white lightness range. All three strings describe the identical pixel color. To use the converter, type a color into the input in any of the three formats — a HEX code, an rgb() value or an hsl() value — or click the color picker and choose visually. As soon as a valid color is recognized, the other two formats update instantly alongside a live preview swatch, so you can confirm the result matches what you expect before copying it. Click the copy icon next to any value to grab it in that exact format for pasting into CSS, a design tool or code. Converting between formats comes up constantly in real work: matching a brand's exact color when a client hands over a HEX code but your design tool wants HSL sliders, building a CSS theme where you need consistent RGB values for rgba() overlays, nudging the lightness of a base color up or down a few percent to create a convincing hover or active state, and checking that text and background colors have enough contrast for accessibility by comparing their lightness values.

Frequently asked questions

What is a HEX color code?

A HEX color code is a hash symbol followed by six hexadecimal digits, such as #3B82F6. The six digits form three pairs, each pair setting the intensity of red, green and blue on a scale from 00 (none) to FF (full, 255 in decimal). Because it's compact and unambiguous, HEX is the most common way to specify exact colors in CSS and design tools.

What is the difference between RGB and HSL?

RGB describes a color as three channel intensities — red, green and blue, each from 0 to 255 — matching how screens mix light to produce color. HSL describes the same color as hue (its position on a 360° color wheel), saturation (how vivid or muted it is) and lightness (how close to black or white). RGB is precise for screens; HSL is easier for humans to adjust intuitively.

How do I convert HEX to RGB?

Split the six HEX digits into three pairs — the first for red, the second for green, the third for blue — and convert each pair from hexadecimal to decimal to get a number from 0 to 255. For example, #3B82F6 splits into 3B, 82 and F6, which convert to 59, 130 and 246, giving rgb(59, 130, 246). This converter does the math instantly as you type.

What does the alpha channel do?

The alpha channel controls transparency, added as a fourth value alongside red, green and blue in rgba() or hsla(), ranging from 0 (fully transparent) to 1 (fully opaque). It lets a color blend with whatever sits behind it — useful for overlays, subtle borders, or dimming an element without changing its underlying color. HEX supports it too, as an optional 4th or 8th pair of digits.