Color converter
Convert any color between HEX, RGB and HSL. Pick a color or paste a value — every format updates live, with alpha, tints and shades, and one-click copy.
About color models: HEX, RGB and HSL
Every color on a screen is ultimately a mixture of red, green and blue light, but there are several ways to write that mixture down. RGB states the amount of each primary directly, as three numbers from 0 to 255. HEX encodes those same three numbers in hexadecimal, packing them into the familiar six-character code that begins with a hash. HSL describes the color instead by its hue, saturation and lightness — a model designed to match how humans perceive and reason about color. Because all three notations point to the same underlying color, converting between them is lossless, and being fluent in all three lets you copy a value from a design tool, adjust it logically, and drop it into code without friction.
History of color on the web
The RGB model comes from the additive theory of color worked out in the 19th century and used in every television and monitor since. Hexadecimal color notation arrived with the early web in the mid-1990s, when HTML and CSS needed a compact, unambiguous way to specify the millions of colors a screen could display, and the three-byte hex triplet fit perfectly. HSL and its close relative HSV were devised separately in the 1970s by computer-graphics researchers — Alvy Ray Smith described HSV in 1978 — to give artists a more intuitive way to choose colors than juggling raw RGB values. HSL only became a first-class citizen of the web much later, when the CSS Color Module Level 3 standardised the hsl() and hsla() functions, giving developers the perceptual model natively in the browser.
How to convert between HEX, RGB and HSL
Converting HEX to RGB is simply reading each pair of hex digits as a number from 0 to 255. Going from RGB to HSL is more involved: you find the largest and smallest of the three channels, derive lightness from their average, saturation from their spread, and hue from which channel is the maximum and by how much the others differ. The math is well defined and always reversible, but doing it by hand is tedious and error-prone, which is exactly what a converter is for. Enter a value in any of the three fields here and the other two are recalculated instantly using the standard formulas, so you never have to run the arithmetic yourself.
When to use each color format
HEX is the lingua franca of design: compact, easy to paste, and understood by every tool, which makes it the natural home for brand colors and static values. RGB and RGBA shine when you need transparency or are pulling color data from images, canvases or scripts where values arrive as separate numbers. HSL and HSLA are the format of choice for anything systematic — building a palette, generating hover and active states a few percent lighter or darker, or letting a theme rotate through hues — because changing one channel produces a predictable, isolated effect. Knowing when to reach for each, and being able to switch between them freely, is what this converter is built to make effortless.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
All three describe the same colours in different notations. RGB defines a colour by how much red, green and blue light it mixes, each from 0 to 255. HEX is the same RGB values written as a six-digit hexadecimal number, so rgb(255, 87, 51) becomes #FF5733 — more compact and the traditional way to write colours in HTML and CSS. HSL takes a completely different angle, describing a colour by its hue (its position on the colour wheel from 0 to 360 degrees), saturation (how vivid it is) and lightness (how bright it is), which makes it far more intuitive to adjust by hand.
How do I convert a HEX colour to RGB?
A HEX colour is just RGB written in base 16. The six digits are three pairs — red, green and blue — and each pair is a number from 00 to FF, which is 0 to 255 in ordinary decimal. So #FF5733 splits into FF, 57 and 33, which convert to 255, 87 and 51, giving rgb(255, 87, 51). This converter does it instantly in both directions: type or paste a HEX value and the RGB and HSL fields update immediately, and editing any field converts back to the others.
What is the alpha channel and how do rgba and 8-digit hex work?
Alpha is opacity — how see-through a colour is — ranging from 0 (fully transparent) to 1 (fully opaque). In CSS you add it as a fourth value with rgba() or hsla(), for example rgba(255, 87, 51, 0.5) for a half-transparent orange. Modern browsers also accept an eight-digit hex code where the last two digits are the alpha in hexadecimal, so #FF573380 is the same colour at 50% opacity. Drag the opacity slider in this tool and all three formats update to include the alpha value automatically.
Why does HSL make colours easier to adjust?
Because its three numbers map onto how people actually think about colour. To make a colour lighter or darker you change only the lightness; to make it more muted or more vivid you change only the saturation; and to shift it to a neighbouring colour you rotate the hue. Doing the same things in RGB or HEX means recalculating all three channels at once, which is unintuitive. This is why HSL is popular for building colour palettes, generating tints and shades, and creating hover states that are a few percent lighter or darker than the base.
Which colour format should I use in CSS?
All of them work in every modern browser, so it is mostly a matter of what you are doing. HEX is compact and universally recognised, which is why it dominates design tools and static colour values. RGB and RGBA are handy when you need transparency or are working with values that come from an image or script. HSL and HSLA are the best choice when you want to adjust a colour programmatically or keep a palette consistent, because tweaking one channel produces a predictable result. A common workflow is to design in HEX and switch to HSL when you need to create variations.
Is this converter accurate and does my data stay private?
Yes on both counts. The conversions use the exact standard formulas for translating between RGB, hexadecimal and HSL, so the values match what browsers and design software produce. Everything runs entirely in your browser with no server involved, so the colours you enter are never uploaded, logged or stored, and the tool keeps working even if you go offline after the page has loaded. The contrast readout uses the official WCAG relative-luminance formula to help you check whether text will be readable on the colour.