Hex to RGB Converter
Type a hex color, see the RGB and HSL values immediately. Live preview swatch, one-click copy — the fastest path from a brand color to a Canvas API call.
Why convert hex to RGB?
- Painting on Canvas — ctx.fillStyle accepts hex, but rgba() is what you need the moment you want transparency.
- Tailwind, Sass, or CSS custom properties that take channel values for alpha overlays or color-mix() calls.
- Pulling a hex value out of a Figma export and dropping it into an SVG that needs separate r/g/b attributes.
- Generating shader uniforms for WebGL/Three.js, which expect normalized 0–1 floats per channel.
- Building a brand-color reference doc that lists every primary in hex, RGB, and HSL side by side.
- Converting a logo color into RGB so a backend service (Pillow, ImageMagick, OpenCV) can match it exactly.
How it works
The hex string is parsed into three byte channels — #abc expands to #aabbcc, and the leading # is optional. Each pair is converted from base-16 to decimal, giving you r, g, b in 0–255. HSL is derived from the same RGB values using the standard CSS Color Module 4 formula, with hue rounded to the nearest degree and saturation/lightness as percentages. Everything runs in your browser — no network call, no server.
Frequently asked questions
Does it support shorthand hex like #fff?
Yes — three-digit hex is expanded automatically (#fff → #ffffff, #abc → #aabbcc). The leading # is optional in either form.
What about hex with alpha (#3b82f6cc)?
Eight-digit hex isn't currently parsed — drop the alpha pair and add the opacity separately as rgba() in your stylesheet. Eight-digit support is on the list.
How is HSL calculated?
Standard CSS Color Module 4 conversion from sRGB. Hue is rounded to the nearest degree, saturation and lightness to the nearest percent. Same numbers any modern browser produces.
Are my color values logged?
No. Conversion runs entirely on this page in JavaScript — no fetch, no XHR, no analytics on the input. The only network requests are for the page itself and fonts.
Why is the copy button silently failing?
Some browsers block navigator.clipboard when the page isn't served over HTTPS. The converter still works — you can copy the value manually from the output field.
About this tool
Hex notation became the web's default color format because it's compact: six characters cover the entire 24-bit sRGB space, and three-character shorthand exists for the common case. RGB is what every imaging API actually consumes — Canvas, OpenGL, every image library. The conversion between the two is mechanical, but designers and frontend devs do it constantly: pulling a brand color out of a style guide and feeding it to a Canvas animation, generating an alpha overlay from a primary, building color tokens for a design system. HSL is included because it's the most useful representation for tweaking — bumping a color one step darker without breaking its hue is a one-line HSL change but a guess in hex.