Color Converter

This color converter turns a HEX code into RGB and HSL, and works in every other direction too. Type #22c55e and the RGB fields fill with 34, 197, 94 while the HSL fields show 142, 71, 45. Edit any of the three notations and the other two follow, with a preview swatch so you can see the color you are describing. The math runs in a Rust module compiled to WebAssembly, inside your browser tab.

How to convert HEX to RGB (and the other directions)

1. Type or paste a 6-digit HEX code in the Hex field. The leading # is optional: 22c55e and #22c55e both work, and uppercase digits are accepted.
2. As soon as six digits are present, the R, G and B fields show the red, green and blue channels (0 to 255) and the H, S and L fields show hue (0 to 360), saturation and lightness (0 to 100).
3. To go the other way, type numbers into the RGB fields: the HEX code and HSL values update on every keystroke. The same applies to the HSL fields, which recompute RGB and HEX.
4. Copy the value you need from its field. The swatch at the top always reflects the current color.

HEX, RGB and HSL: when to use each

All three notations describe the same sRGB color. They differ in what they make easy.

Notation	Example	Best for
HEX	#22c55e	Design handoff, CSS variables, brand guidelines, copying from Figma or a style guide
RGB	34, 197, 94	Code that takes numeric channels (canvas, image processing, Android or iOS color constructors), building rgba() by hand
HSL	142, 71%, 45%	Making tints and shades: keep hue and saturation, move lightness up or down

HSL is the notation people reach for when building a palette. A hover state that is slightly darker than a button is the same H and S with L lowered by a few points. Doing that in HEX means guessing at three channels at once. With this tool you can paste the brand HEX, nudge L in the HSL field, and read the new HEX back.

Precision and edge cases

• HSL is rounded to whole numbers: hue, saturation and lightness are shown as integers. Because of that, a round trip through HSL can move a channel by one step. For example, #22c55e gives 142, 71, 45, and typing those HSL values back yields #21c45d. When exact values matter, keep HEX or RGB as the source of truth.
• HEX output is lowercase: when you edit RGB or HSL, the HEX field is written as #rrggbb in lowercase.
• Only 6-digit HEX is read: 3-digit shorthand such as #fff and 8-digit HEX with an alpha channel are not converted. Expand shorthand by doubling each digit (#fff becomes #ffffff).
• No alpha channel: the converter works on opaque colors. Transparency, if you need it, is added afterwards in your CSS as an rgba() or hsla() fourth value.
• Clamping: RGB values above 255 and HSL values above their limits are clamped to the valid range before conversion. Invalid HEX characters show an error instead of a wrong color.
• Grays have no hue: when R, G and B are equal, saturation is 0 and hue is reported as 0, because hue is undefined for neutral colors.

Common use cases

• Design to code: a designer hands over #0f172a, the codebase uses RGB tuples. Paste once, copy three numbers.
• Theme tokens: derive lighter and darker variants for hover, active and disabled states by editing lightness in HSL.
• Accessibility work: read exact RGB channels before plugging them into a contrast calculation.
• Debugging CSS: a computed style shows rgb(9, 9, 11) in DevTools and you need the HEX to search the stylesheet.

Compared with desktop and CLI options

Design tools like Figma or Photoshop show HEX and RGB in their color picker, which is fine when the file is already open. Browser DevTools can cycle a color between formats by Shift-clicking the swatch. In a terminal you can convert HEX to RGB with printf "%d %d %d" 0x22 0xc5 0x5e, but HSL needs a script. This page sits in between: no app to open, no formula to remember, all three notations visible at once.

Private by design

Unreleased brand palettes and client color specs are confidential until launch. The conversion functions run as WebAssembly in your tab, so the values you type are never sent to a server, logged or stored. Once the page has loaded it keeps working offline, which you can confirm by watching the Network tab in your browser's developer tools while you type.

Frequently asked questions

How do I convert HEX to RGB?

Split the six digits into three pairs and read each pair as a base-16 number: 22 is 34, c5 is 197, 5e is 94. This tool does it as you type and also gives you the HSL equivalent.

Can I convert RGB back to HEX?

Yes. Type values from 0 to 255 in the R, G and B fields and the HEX field updates with the matching lowercase code.

Why does my color change slightly after editing HSL?

HSL values are rounded to whole numbers, so converting from HSL back to RGB can differ by one unit per channel from the original. Edit HEX or RGB when you need an exact match.

Does it support 3-digit or 8-digit HEX codes?

No. The tool reads 6-digit codes only. Expand #abc to #aabbcc before pasting, and drop the last two digits of an 8-digit code (they hold the alpha value).

Does the converter handle transparency or alpha?

No. It converts opaque colors. Add the alpha value yourself in CSS, for example rgba(34, 197, 94, 0.5).

Which color space does it use?

The standard sRGB model used by CSS. HSL here is the CSS-style hue, saturation, lightness representation of that same sRGB color.

Are my colors sent anywhere?

No. Everything is computed locally in WebAssembly. No request is made with the values you enter.

Related tools: to pull the dominant colors out of a screenshot or photo, use the image color palette extractor, then convert each swatch here. If you are building an icon set in your brand colors, the favicon generator builds favicon files and web app icons from one image, and the workflow guide for designers lists the other local tools that fit a design handoff.