Convert between HEX, RGB, and HSL. Generate palettes and check WCAG contrast — all in your browser.
The Color Converter translates a single color between the three formats you actually type into CSS and design tools: HEX (like #3B82F6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)). Paste or pick any color and it instantly shows the equivalent values in every format, along with a live swatch so you can confirm the result by eye.
It is built for front-end developers, UI designers, and anyone editing stylesheets who needs to move between a hex code from a mockup and the HSL values that make lightening or darkening a shade easy. The built-in palette generator also derives tints, shades, and complementary colors from your base color, so you can build a coherent set from one starting value.
HEX and RGB describe the same thing in different notation. A 6-digit hex code is three bytes, one each for red, green, and blue, written in base 16. So #FF8800 is R=255 (FF), G=136 (88), B=0 (00), identical to rgb(255, 136, 0). Converting between them is just switching each channel between hexadecimal and decimal; a 3-digit shorthand like #F80 expands by doubling each digit to #FF8800.
HSL is a cylindrical remapping of the same RGB values into hue, saturation, and lightness. Hue is an angle from 0 to 360 degrees around the color wheel (0 red, 120 green, 240 blue), saturation is how vivid the color is from 0 to 100 percent, and lightness runs from 0 percent (black) to 100 percent (white), with 50 percent being the pure hue. The conversion finds the max and min of the normalized R, G, B channels: lightness is their average, saturation derives from their difference relative to lightness, and hue depends on which channel is the maximum. HSL is popular because adjusting one number, lightness, gives you a matched lighter or darker shade without shifting the hue.
The palette generator uses these relationships directly. Tints and shades are produced by raising or lowering the lightness value while keeping hue and saturation fixed, and complementary colors are found by rotating the hue by 180 degrees (analogous colors by roughly 30 degrees). Because the math is exact and reversible, round-tripping a color through the formats returns the value you started with, apart from unavoidable rounding when HSL percentages map back to integer RGB channels.
HEX (3- or 6-digit), RGB as rgb() values, and HSL as hsl() values. Enter a color in any one of them and the tool fills in the equivalent values for the other two.
The core converter focuses on opaque colors in HEX, RGB, and HSL. For transparency you would add an alpha channel yourself, for example writing rgba() or an 8-digit hex code, since alpha does not change how the RGB and HSL values relate to each other.
HSL stores saturation and lightness as whole-number percentages, so some precision is lost when a color is expressed in HSL and then mapped back to 0-255 RGB channels. The rounding is at most one step per channel and is usually invisible on screen.
They carry the same information. HEX writes each red, green, and blue channel as a two-digit base-16 number (00 to FF), while RGB writes each as a decimal number (0 to 255). #FF8800 and rgb(255, 136, 0) are the same color.
It works from your base color's HSL values. Tints and shades are created by increasing or decreasing lightness, and complementary and analogous colors are found by rotating the hue around the color wheel, so every swatch stays harmonically related to your starting color.
Yes, it is completely free with no sign-up. All conversion happens in your browser using JavaScript, so the colors you enter are never uploaded to a server or stored anywhere.
Yes. The HEX, rgb(), and hsl() strings are formatted exactly as CSS expects, so you can copy any of them and paste straight into a stylesheet or a style attribute.