RGB to Hex Converter
Type r, g, b values, get a CSS-ready hex string. Live preview swatch, HSL alongside, and one-click copy — the inverse of the hex picker every design tool already gives you.
Why convert RGB to hex?
- Embedding a Pillow or OpenCV color (which speak RGB tuples) into a CSS stylesheet that wants #rrggbb.
- Translating a designer's RGB note from a brand guide into hex for an HTML email template.
- Converting a Three.js material color (0–255 channels) into the hex literal Three accepts via new THREE.Color('#...').
- Pulling color values from an EXIF or metadata field and writing them back into a CSS custom property.
- Going from a print/Pantone spec sheet listed in RGB into the hex palette your build system uses.
- Documenting a backend-generated color (e.g. a hash-derived avatar tint) in a frontend style guide.
How it works
Each channel — r, g, b — is range-checked to 0–255, then encoded as a two-digit hex pair using JavaScript's toString(16) padded with a leading zero where needed. The three pairs are concatenated with a leading # to give you the canonical six-digit hex. HSL is derived from the same RGB values using the standard CSS Color Module 4 conversion. All math runs in your browser — there's nothing to upload, nothing to log.
Frequently asked questions
What if I enter a value above 255 or below 0?
The converter shows an error and waits for valid input. RGB channels are byte-range — 0 through 255, integers only. Decimals (0.0–1.0) are a different convention used in WebGL shaders; multiply by 255 first if that's your source.
Does it output uppercase or lowercase hex?
Lowercase, which is the modern web convention (matches Tailwind, design tokens, and what every browser dev tool reports). Uppercase #FFFFFF is identical and any parser accepts both.
Why include HSL in the output?
Once you have RGB, HSL is essentially free — and it's the most useful representation for adjusting a color. Want a 10%-darker variant for a hover state? It's a one-line HSL tweak. The combo lets you copy whichever your stylesheet expects.
Are my values uploaded anywhere?
No. The conversion is a pure JavaScript function running on this page. No fetch, no XHR, no analytics on input.
Can I paste rgb(59, 130, 246) directly?
Not yet — three separate fields keep the math obvious and let you tweak one channel at a time. Pasted-string parsing is on the list.
About this tool
RGB is the additive color model every screen uses natively — every pixel is a three-byte triple of red, green, and blue. Hex is the same data written in a denser form: six characters of base-16 instead of three decimal numbers. Designers tend to think in hex (because every color picker exports it), but anything that processes images or paints procedurally — Canvas, WebGL, image libraries, generative-art frameworks — produces RGB. Going from RGB back to hex is what you do when those generated colors need to live in a stylesheet, design system, or shareable document.