RGB to Hex Color Converter
Enter red, green and blue color levels (0–255). Results update instantly as you type:
RGB to hex color table
| Color | Color name | (R,G,B) | Hex |
|---|
How to Use This RGB to Hex Color Converter
You grabbed an RGB triplet from a design mockup, but your CSS file wants a hex string. Hand-converting three decimal channels into base-16 on a scratchpad is the kind of busywork that breaks focus during a layout pass. Figma might show rgb(37, 99, 235) while your Tailwind token file expects #2563eb—same color, two dialects. This converter runs locally in your browser and keeps a live swatch so you can sanity-check the result before pasting it into a stylesheet.
Think of RGB like three paint tubes labeled red, green, and blue. Each tube is opened between 0 (closed) and 255 (full). Hex is the single SKU label on the outside of the mixed can—one six-digit code that stores all three channel strengths. You do not need to do the division by sixteen yourself; the tool handles channel math while you adjust sliders or paste values.
- Enter R, G, and B in the number fields (0–255), drag the sliders, or pick a color with the swatch control below the preview box.
- Watch the outputs update live as hex, RGB function syntax, and HSL values refresh with every change.
- Paste a hex code into the reverse field at the bottom when a teammate sends
#2563eband you need the raw channel split. - Click any row in the reference color table to load a named swatch (Red, Navy, Gold, etc.) into the converter.
- Copy any output field with its Copy button, or hit Reset to return to pure red (
#FF0000).
Nothing uploads to a server. Conversion happens in JavaScript on your device, which keeps client brand palettes and unreleased theme tokens off third-party logs.
RGB to Hex Formulas and Practical Applications
In our testing, most day-to-day color work falls into three buckets: translating design handoffs, auditing accessibility contrast, and syncing tokens across CSS, SVG, and email templates. The math is small, but doing it wrong silently shifts brand colors by one channel step.
Decimal channel to hex digits
To get started, divide each RGB channel by sixteen and map the quotient and remainder to hex symbols 0–9 and A–F. Pad single-digit results with a leading zero so every channel occupies exactly two characters.
Hex = RR + GG + BB
Example walkthrough for gold: RGB (255, 215, 0). Red 255 becomes FF, green 215 becomes D7, blue 0 becomes 00, so the full code is #FFD700. Three-digit shorthand (#F00) repeats each character once—the converter expands it to six digits automatically when you paste shorthand hex.
HSL output for lightness tweaks
Moving onto HSL, designers often nudge lightness while holding hue steady when building hover states. The converter derives HSL from the same RGB triplet so you do not maintain parallel spreadsheets for button default and button hover colors.
HSL = f(R, G, B) → hue (0–360°), saturation (%), lightness (%)
In practical environments, I copy HSL into modern CSS when I need readable comments in a token file—lightness percentages communicate intent faster than staring at three opaque integers.
Where teams use RGB-to-hex conversion daily
Design handoffs: Inspect-panel RGB values from browser devtools paste straight into the converter before updating SCSS variables. Email HTML: Many clients prefer inline hex on table cells; convert brand RGB guidelines once, then reuse the hex in our HTML Table Generator header colors. Chart styling: After picking series colors here, paste hex values into the Bar Graph Maker or Pie Chart Maker custom color fields. Stylesheet cleanup: Batch-convert a list of RGB declarations, then run the output through the Code Minify & Prettify CSS prettifier before commit.
Standard Units and Conversion Tables
sRGB channels always run 0–255 per color axis. Hex pairs each channel into two base-16 digits. HSL expresses the same point in cylindrical coordinates—useful when you already think in degrees and percentages.
| Format | Example (brand blue) | Typical use |
|---|---|---|
| RGB | rgb(37, 99, 235) | Design specs, devtools readouts |
| Hex | #2563EB | CSS variables, SVG fills, email inline styles |
| HSL | hsl(221, 83%, 53%) | Theme tokens, hover/active lightness shifts |
| 3-digit hex | #256 → #225566 | Legacy shorthand expanded to full precision |
The interactive reference table above the FAQ lists sixteen named web colors with clickable RGB and hex cells. In my experience, keeping that table open while auditing a legacy stylesheet saves repeated mental math on primaries like Maroon (#800000) and Teal (#008080).
When a stakeholder sends only a hex code from a brand PDF, paste it into the reverse field and read back the RGB channels before updating design tokens. When an API returns RGB tuples, enter the three integers and copy hex for your component library. Either direction removes the calculator app from your workflow.
Frequently Asked Questions
What is the difference between RGB and hex?
Both describe the same sRGB color. RGB lists three decimal channels from 0 to 255. Hex packs those channels into a six-digit base-16 string prefixed with #. Designers often speak RGB; production CSS files often store hex.
Can I convert hex back to RGB?
Yes. Paste a hex code with or without # into the reverse field. Valid three- or six-digit codes update the sliders and RGB output automatically. Invalid characters show an error when you leave the field.
Why does HSL appear in the output?
HSL expresses hue, saturation, and lightness—a format CSS accepts natively. Teams use it when adjusting hover brightness without recomputing three RGB integers by hand.
Does this tool support alpha transparency?
This converter handles opaque sRGB colors (three channels). Eight-digit hex with alpha (#RRGGBBAA) and rgba() with a fourth alpha parameter are outside the current scope. For opaque brand colors, three-channel input is the common case.
Is my color data sent to a server?
No. All conversion runs in your browser. Values stay on your device unless you copy or share them yourself.