In-Browser Calculation · Real-Time · Private
HEX ⇄ RGB Converter
Convert HEX color codes to RGB values and back instantly. Live color preview, three output formats, and a reference chart of common colors. Every calculation runs in your browser — your color values are not sent to our server for conversion.
hex-rgb-converter v2.0
Your conversion history will appear here
Type a color → see every format update instantly
Bidirectional conversion with a live preview — start from HEX or RGB, the other side updates as you type.
Enter a color
Type a HEX code (3 or 6 digits, with or without #) or enter RGB values between 0 and 255.
Watch it update
The opposite side, preview, and all output formats update in real time — no convert button needed.
Fine-tune if needed
Drag the RGB sliders, click a quick color, or pick from the reference chart below.
Copy any format
Grab HEX, CSS RGB, CSS %, or decimal — or copy all formats in one click.
Built for fast, local color conversion
What this tool does with your color values — and what it deliberately does not.
Calculates locally after load
Every calculation runs in your browser using JavaScript. After the page loads, your color values are not sent to our server for conversion. Recent conversions are stored only in your browser's localStorage and can be cleared anytime.
Flexible input formats
Accepts 3-digit HEX shorthand (e.g. #F0C → #FF00CC), 6-digit HEX with or without #, and clamps RGB values to the valid 0–255 range automatically.
Private history
Up to 10 recent colors are kept in your browser's localStorage only. They stay on your device and can be cleared with one click — nothing is synced anywhere.
Where HEX-to-RGB conversion matters
Practical scenarios where a fast, bidirectional color converter saves time in daily design work.
| Use case | Best for | Why it helps |
|---|---|---|
| CSS authoring | Web styles, themes | Translates a designer's HEX swatch into the rgb() function needed for opacity variations and CSS variables. |
| Design handoff | Figma → code | Converts exported HEX tokens into the RGB values some design systems and style guides require. |
| Canvas & WebGL | Game dev, data viz | Provides normalized decimal (0–1) RGB values that are useful for shader and WebGL color calculations. |
| Accessibility workflows | Contrast calculations | Provides RGB components that can be used to calculate relative luminance and contrast ratios against text colors. |
What it does, and what it does not
Clear boundaries so you know when to use this tool and when to reach for another.
What it does
- Bidirectional real-time HEX ↔ RGB conversion.
- Live color preview with a checkerboard swatch background.
- Three output formats: CSS 0–255, CSS %, and decimal 0–1.
- 3-digit HEX shorthand support (
#F0C→#FF00CC). - 16-color quick palette and full reference chart.
- Full dark mode support.
- Conversions continue to work locally after the page has loaded.
What it does not
- Convert to or from HSL, HSV, or LAB — those are different color spaces.
- Handle alpha (transparency) channels like
#RRGGBBAAorrgba(). - Replace a full design-token workflow (e.g. Tailwind config, Style Dictionary).
- Store history across devices — data stays in one browser only.
Common named colors
Click any HEX or RGB cell to copy it instantly, or use Copy Row to grab both values for a color.
| Swatch | Name | HEX | RGB | Action |
|---|
Common input issues and fixes
Quick answers to common HEX and RGB conversion problems.
HEX input not converting
Only digits 0–9 and letters A–F (case-insensitive) are valid. Remove any non-hex characters, and ensure you have either 3 or 6 digits after the optional #.
RGB value outside 0–255
Each channel is clamped automatically. If you enter 300, it becomes 255; if you enter -10, it becomes 0.
3-digit HEX shorthand
3-digit HEX is expanded by duplicating each digit: #F0C → #FF00CC. The tool computes this preview while preserving your original input for smooth typing.
History disappeared
History lives in this browser's localStorage. Private windows, cleared site data, or a different device will show an empty list — that is intentional.
Frequently asked questions
Honest answers about HEX-to-RGB conversion and color codes.
What are HEX and RGB color codes?
HEX (Hexadecimal) is a 6-digit code (e.g. #FF5733) representing Red, Green, and Blue light values. RGB is another way to represent the same thing using three numbers from 0 to 255 (e.g. rgb(255, 87, 51)). Both are widely used in web design and digital graphics.
Can I use 3-digit HEX codes?
Yes. If you enter a 3-digit HEX code like #F0C, the tool automatically expands it to its 6-digit equivalent (#FF00CC) and displays the correct RGB values. Each digit is duplicated (F becomes FF, 0 becomes 00, C becomes CC).
Does this tool support RGBA or HSLA?
This tool focuses on two-way conversion between HEX and RGB. RGBA, HSLA, HSL, HSV, and LAB are not supported in this version.
What is the difference between CSS RGB and decimal RGB?
CSS RGB uses integer values from 0 to 255 (or percentages 0%-100%). Decimal RGB uses floating-point values from 0.0 to 1.0, which is common in shaders, WebGL, and some programming environments like Python's color libraries.
Is my color data sent to a server?
Conversions are performed locally in your browser. Your color values are not sent to our server for conversion after the page loads. Recent conversion history is stored only in your browser's localStorage.
Why does the tool have a color reference chart?
The chart provides quick access to 16 common named colors (black, white, red, blue, etc.) with their HEX and RGB values. Click any cell to copy a value instantly, or click Copy Row to grab both values for a specific color.