RGB To HEX
Convert RGB to HEX and HEX to RGB instantly, with a live color preview and HSL — right in your browser.
Privacy: your files never leave your device. All processing happens locally in your browser.
How to use
- 1.Enter red, green and blue values (each 0–255) to generate the matching HEX code.
- 2.Or paste a HEX color such as #3b82f6 or the shorthand #abc into the HEX field to convert it back to RGB.
- 3.Read the HEX, RGB and HSL values next to the live color preview and click Copy to grab any format.
About RGB To HEX
RGB to HEX is a fast, private color converter that works in both directions. Type red, green and blue channel values (each 0–255) and it returns the matching HEX code, or paste a HEX color and it decodes it back to RGB — plus an HSL readout and a live swatch so you can see the color immediately.
HEX color notation packs each RGB channel into two hexadecimal digits in the form #RRGGBB. Because each pair ranges from 00 to FF (0–255 in decimal), the six-digit format can describe 256 × 256 × 256 = 16,777,216 distinct colors. That is the same 24-bit color space CSS, HTML, design tools like Figma and Photoshop, and most style guides rely on, which is why translating between the two formats is such a common everyday task for developers and designers.
The converter also understands the three-digit shorthand: #abc is expanded to #aabbcc, so #f00 becomes #ff0000 (pure red) and #fff becomes #ffffff (white). Input is case-insensitive and the leading # is optional, so ABC, #abc, and abc all resolve to the same color. Output HEX is always normalized to lowercase six-digit form with each channel zero-padded, so a value of 0 renders as 00 rather than a bare 0 — a detail that trips up hand-written conversions.
Out-of-range or fractional channel values are clamped to the valid 0–255 integer range instead of throwing an error, and any malformed HEX (wrong length, illegal characters) is flagged clearly rather than producing a silent wrong color. Everything happens locally in JavaScript — no color values are ever uploaded to a server, so it is safe for brand palettes and unreleased work.
Alongside HEX and RGB, the tool reports HSL (hue, saturation, lightness). HSL describes the same color in a way humans reason about more naturally: hue as an angle from 0 to 360 degrees around the color wheel, and saturation and lightness as 0–100% amounts. That makes it easy to nudge a brand color a little lighter or more muted without guessing at raw channel numbers, then convert the result straight back to a HEX code your stylesheet can use.
A quick reference: RGB (0,0,0) is HEX #000000 (black), (255,255,255) is #ffffff (white), (255,0,0) is #ff0000 (pure red), (0,255,0) is #00ff00 (green), (0,0,255) is #0000ff (blue), and the popular UI blue (59,130,246) is #3b82f6. Seeing the swatch update live as you type helps you confirm you have the exact shade before copying it into your code or design file.
Typical uses: turning a designer's RGB spec into a CSS-ready HEX code, reading a HEX from a stylesheet back into RGB channels for an image editor, sampling and documenting brand colors, or quickly checking the HSL of a color to reason about hue, saturation and lightness.
Frequently asked questions
- What is a HEX color code?
- A HEX code writes a color as #RRGGBB, where each two-digit pair is one RGB channel in hexadecimal (00–FF = 0–255). Six digits cover 16,777,216 colors — the standard 24-bit space used by CSS, HTML and design tools.
- Does #abc shorthand work?
- Yes. Three-digit HEX is expanded by doubling each digit, so #abc becomes #aabbcc and #f00 becomes #ff0000. Input is case-insensitive and the leading # is optional.
- Are my color values uploaded anywhere?
- No. The conversion runs entirely in your browser with JavaScript. Nothing is sent to a server, so your palettes and unreleased colors stay on your device.
Related tools
- Color Palette GeneratorPick a base color, get a matching palette — complementary, analogous, triadic, and more.
- Random Color GeneratorGenerate random HEX, RGB, and HSL colors instantly. Click any swatch to copy — no signup needed.
- Color Contrast CheckerCheck any text/background color pair against WCAG AA and AAA contrast rules in real time.
- Color Gradient GeneratorBuild linear and radial CSS gradients visually, then copy production-ready code in one click.
- Color MixerBlend any two colors and read the exact hex and RGB of the result — with a live gradient between them.
- RGB to CMYK ConverterConvert RGB screen colors to CMYK print percentages (and back) instantly, right in your browser.
Color Tools guides
View all- Generate Random Colors in Any Format with One Click
- Extract a Color Palette from Any Image in Adobe Illustrator
- Check Color Contrast for Accessibility in Real Time
- How to Convert RGB to HEX: A Quick Practical Guide
- Convert RGB to CMYK Without Losing Color Accuracy
- Generate a Color Palette from Any Image in Illustrator
- How to Generate Gradient Colors for Web Design in Minutes
- How to Check Color Contrast for Web Accessibility in Seconds