Color Converter (HEX, RGB, HSL, CSS)

How this page is maintained

• Steps and copy are checked against the current tool behavior.
• Browser limits, file-size constraints, or compatibility gaps are documented when relevant.
• Unless a page explicitly says otherwise, files and text stay in the browser during processing.

How to Convert HEX to RGB and HSL

Type or paste a color in any supported notation and the converter shows the equivalent values immediately. Accepted inputs include hex (#fff or #ffffff), rgb(255, 255, 255), hsl(0, 0%, 100%), and the alpha forms #RRGGBBAA, rgba(), and hsla(). Each input is normalized, so shorthand and full-length codes both work.

A Worked Example

Input:

#1E90FF

Output:

HEX: #1E90FF
RGB: rgb(30, 144, 255)
HSL: hsl(210, 100%, 56%)
CSS variable: --color: 30 144 255;

The hex pairs are the red, green, and blue channels in base 16: 1E is 30, 90 is 144, and FF is 255. HSL describes the same color as a hue angle of 210 degrees at full saturation and 56 percent lightness, which is easier to reason about when you need a lighter hover state: raise the lightness value and keep the hue.

Alpha and Transparency

Add an alpha channel when a color sits over a background. #1E90FF80 is the same blue at roughly 50 percent opacity, and the converter returns the matching rgba(30, 144, 255, 0.5) and hsla() forms so you can use whichever your stylesheet expects.

Checking Readability Before You Ship

The contrast preview paints your color as a swatch with white text on one half and black text on the other. If neither is comfortably readable, the color is a poor background for body text and will likely fail WCAG contrast guidance. Adjust the lightness first, since that changes contrast fastest while leaving the hue intact.

Reusing the Value as a Token

The generated custom property snippet drops straight into Tailwind or plain CSS, which keeps one brand color defined in one place instead of copied as three different notations across a codebase.

The longer reference is how to convert HEX to RGB, HSL, and CMYK. If you are coloring a browser tab icon, the favicon generator builds the file set, and the SVG to PNG converter rasterizes vector artwork in the same colors.

Converting Between HEX, RGB, and HSL

Three fields sit under one large swatch: HEX and RGB are editable, HSL is read-only and follows the other two. The HEX field accepts a six-digit value such as #3b82f6 or the three-digit shorthand such as #fff, and it recalculates the moment the text matches either shape. RGB accepts three comma-separated numbers between 0 and 255, with spaces around the commas optional. Editing either field writes the other two.

Worked example, using the value the tool loads with. The HEX field holds #3b82f6. The RGB field reads 59, 130, 246 and the HSL field reads 217, 91%, 60%. Type #fff instead and the swatch turns white while RGB becomes 255, 255, 255 and HSL becomes 0, 0%, 100%, which shows that the shorthand expands each digit rather than reading them as three separate values. Go the other way: type 255, 0, 0 into RGB and HEX becomes #ff0000 with HSL at 0, 100%, 50%. A green such as 0, 128, 0 gives #008000 and 120, 100%, 25%, a reminder that the conventional named green is not full-intensity green.

The Exact Clicks

Click into the HEX field and type or paste a hex value with the leading hash. The swatch and the other two fields update as you type; there is nothing else to press. Click into the RGB field and type three numbers separated by commas to go the other direction. Read HSL from the third field and copy it by selecting the text, since that field is deliberately not editable. If a value cannot be read, a red message appears under the fields and the swatch is forced to white rather than to a half-parsed color.

The Decisions That Change the Output

Pick the format by what consumes it. HEX is the shortest form and the one CSS custom properties, design tokens, and most brand guidelines are written in. RGB is what you need for a canvas fill, a charting library, or any place that wants three separate channel values rather than one string. HSL is the one to reach for when you are adjusting rather than transcribing, because the three numbers map to hue, saturation, and lightness and moving one of them changes exactly one property; darkening #3b82f6 by hand is guesswork, while dropping the HSL lightness from 60% to 40% is a predictable edit. That is also why the tool leaves the HSL field read-only and expects you to re-enter the adjusted value through RGB or HEX.

Common Mistakes

Typing rgb(59, 130, 246) with the function notation into the RGB field. The parser splits on commas, so the leading rgb( and the trailing parenthesis get read as part of the numbers and the value is rejected; enter 59, 130, 246 on its own. Typing a hex value without its hash is likewise rejected. A third mistake is reading an eight-digit hex value as supported: the current converter reads only three and six digit hex, so alpha channels are not handled here and a value carrying transparency should be split into a color and a separate opacity. Finally, do not mistake the white swatch after a bad edit for the color you typed; the swatch is forced white precisely because the parse failed.

Where to Go Next

For the arithmetic behind these numbers, including the CMYK values print work needs, see how to convert hex to RGB, HSL, and CMYK. To build an entire palette rather than one color, the color converter is the entry point and the favicon generator is where those values usually end up.

Key features

• Multi-format support: Type or paste a hex code, RGB string, or HSL value to instantly view all equivalent formats.
• Contrast-friendly preview: A live swatch with light/dark text overlays helps you see whether your color remains legible on branded surfaces.
• Copy-ready tokens: Grab hex, RGB, HSL, or CSS variable snippets without extra formatting or manual editing.

Frequently asked questions

Related guides

• Free Color Converter Online: HEX to RGB, HSL, CMYK (2026 Guide)

  Stop guessing css color codes. Use our Color Converter to switch between HEX, RGB, HSL, and more instantly. Whether you are a UI designer ensuring brand consistency with web colors or a developer wrestling with design tokens, accurate color data is critical. But manually calculating these values is a headache. Here is how you can use the Color Converter as your go-to color picker utility to st…