Convert a color between HEX, RGB, and HSL and preview the swatch, right in your browser.
Colors on the web get written several ways, and the one you have is rarely the one a given tool wants. A hex code like #3C00B7 is compact and common in CSS and design files, RGB spells out the red, green, and blue channels as numbers, and HSL describes a color by hue, saturation, and lightness, which is far friendlier when you want to nudge a shade. This converter turns a color between all three and shows you the actual swatch, so you are never guessing what a code looks like.
Enter a color in any of the three formats and the others fill in immediately, along with a live preview of the color itself. Type a hex value and you get its RGB and HSL equivalents, or adjust the RGB numbers and watch the hex and the swatch move with them. Because the preview updates as you go, you can dial in a shade by feel rather than trial and error in a stylesheet.
Hex and RGB describe exactly the same thing in different notation, so converting between them is lossless and precise. HSL is also an exact representation of the same color, but it is organized around human perception, which is why it is the format to pick when you want a slightly lighter or more muted version of a color rather than a completely different one. Standard six-digit hex covers opaque colors, and the three channels each run the familiar zero to 255 range in RGB.
Use this over hunting through a full design app when you only need one color translated, and over eyeballing a hex code when you genuinely need to see it. It is quicker than a color picker buried in a graphics program and it gives you every format at once instead of just the one.
It is handy for copying a brand color out of a spec and into CSS, converting a designer's hex palette into the RGB values some tools require, tweaking a color's lightness in HSL to build a hover or disabled state, and simply checking what an unfamiliar code actually looks like before you commit to it. Front-end developers and designers touch this kind of conversion constantly.
Everything happens in your browser, so the colors you enter never leave your device, there is no sign-up, and the tool is free. There is nothing heavy to process here, so the only theoretical limit is your device itself, which a handful of color values will never trouble.
The core conversion is built around standard six-digit opaque hex and its RGB and HSL equivalents. An alpha channel written as an eighth-and-ninth hex pair or an rgba value is a separate concept that a plain hex-to-RGB conversion does not always carry through.
Shorthand like #F00 is a valid CSS form where each digit is doubled, so it expands to #FF0000. It is best to confirm the swatch matches what you expect, since not every field assumes the shorthand automatically.
HSL separates a color's hue from its saturation and lightness, so making a shade lighter or less intense is a single number change rather than juggling three channels. RGB is better when you already have exact channel values to reproduce.
The hash is the CSS convention, but the six characters after it are the actual value. You can usually enter the code with or without the hash and get the same result.
Hex and RGB map onto each other perfectly with no rounding. HSL involves fractional math, so a value can land on the nearest representable point, which is imperceptible on screen but worth knowing if you round-trip repeatedly.
The numeric value is exact, but how it appears depends on each display's calibration and color profile. For color-critical work you would manage a color space, whereas for web use the standard sRGB assumption is what these values represent.
Polished Pixels. All tools. About. Contact. Every tool runs in your browser and your files are never uploaded.