Skip to main content
Developer Tools

RGB to HEX Color Converter

New Popular

Free online RGB to HEX color converter. Drag RGB sliders (0–255) or type values to instantly generate the HEX code plus 16 other formats: RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB, Win32 COLORREF, and HEX8. Includes a canvas color picker, WCAG 2.1 contrast checker, 6 color harmony palettes, 10-step shade/tint scale, 7-type color blindness simulation, image eyedropper with loupe, gradient builder, CSS filter generator, named CSS color search, and Tailwind v3 palette matching.

  • Color-coded RGB sliders (R red / G green / B blue)
  • 19 instant format outputs with 1-click copy
  • 10-step shade/tint scale with export
  • History + favorites saved to localStorage
RGB to HEX Converter
All Formats (19)
HEX —
HEX (no #) —
RGB —
RGBA —
HSL —
HSLA —
HSV / HSB —
HWB —
CMYK —
CIE Lab —
LCH —
OKLCH —
CSS Named —
Integer —
0x Notation —
Android ARGB —
Swift UIColor —
Java Color —
.NET Color —

Closest Tailwind v3

Mathematically derived color palettes. Click any swatch to load that color.

Export palette:
Complementary Opposite on the wheel (+180°)
Analogous Adjacent colors (±30°)
Triadic Evenly spaced at 120°
Split-Comp Near-opposite (+150°, +210°)
Tetradic Four colors at 90° intervals
Monochromatic Same hue, varying lightness

How to Use

  1. Drag the RGB sliders — Red, Green, and Blue channels (0–255 each). Each slider track shows its own color gradient so you can see exactly what you're mixing.
  2. See HEX and 18 other formats instantly — all 19 format conversions update live as you drag. Copy any format with one click.
  3. Use the canvas picker — drag the saturation/brightness square or hue strip for a visual approach. Fully touch-enabled on mobile.
  4. Explore the feature tabs — generate color palettes, build a shade/tint scale, check WCAG contrast, simulate color blindness, pick from an image, or create gradients.

RGB to HEX Color Converter

RGB to HEX conversion is one of the most fundamental tasks in web development. Our free RGB to HEX converter makes it instant — type or drag the R, G, B sliders and watch all 19 color format conversions update simultaneously. The page itself responds to your selected color, creating an immersive, design-tool-grade experience.

What is RGB?

RGB (Red, Green, Blue) is the additive color model used by every digital screen. Red, green, and blue light combine to produce all visible colors. Each channel ranges from 0 (off) to 255 (maximum intensity). rgb(0, 0, 0) is black; rgb(255, 255, 255) is white; rgb(59, 130, 246) is a vivid blue. RGB is native to CSS, HTML Canvas, SVG, and virtually all web graphics systems.

What is HEX?

A HEX color code is a compact 6-character hexadecimal string like #3B82F6. Each pair of characters maps to one RGB channel in base-16: 3B=59 (R), 82=130 (G), F6=246 (B). HEX is the standard format in CSS stylesheets, HTML attributes, Figma, Sketch, Adobe XD, and most design tool color pickers. Converting from RGB to HEX is necessary when moving from code-specified colors to design tool specifications.

Color-Coded RGB Sliders

Unlike generic sliders, each channel slider in this tool shows its own live color gradient. The Red slider transitions from black-through-red, showing exactly what increasing that channel does at the current green and blue values. The same applies to Green and Blue. This makes color mixing intuitive — you see the effect of every change before you release the mouse.

10-Step Shade & Tint Scale

Generate a complete 10-step color scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) inspired by Tailwind CSS naming. Click any step to load it as your working color. Export the entire scale as CSS custom properties, Tailwind config, SCSS variables, or JSON for instant integration into your design system.

Color Harmony Generator

Six types of mathematical color harmonies are generated automatically: Complementary (opposite on the wheel), Analogous (adjacent, ±30°), Triadic (evenly at 120°), Split-Complementary (±150° from complement), Tetradic (four at 90°), and Monochromatic (same hue, varying lightness). Click any palette swatch to instantly load that color. Export as CSS, Tailwind, SCSS, or JSON.

Privacy-First

All conversions happen entirely in your browser. No color data is sent to any server. Uploaded images are processed locally via the Canvas API. Color history (last 20) and favorites are stored only in your browser's localStorage.

Frequently Asked Questions

How do I convert RGB to HEX?

Convert each RGB channel (0–255) to a 2-digit hexadecimal string and concatenate with a # prefix. For example: R=59→3B, G=130→82, B=246→F6 → #3B82F6. Our tool does this instantly as you drag the sliders.

What is HSL and how is it different from RGB?

HSL (Hue, Saturation, Lightness) separates color information in a way that matches human perception. Hue is the color angle (0–360°), Saturation is intensity (0–100%), Lightness is brightness (0–100%). It's much more intuitive for adjusting colors — you can lighten a color by changing just L, rather than adjusting all three RGB values.

What is CMYK and when do I need it?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used in professional print production. If you're preparing colors for a print job, use the CMYK output from this tool to specify the print-accurate color values for your printer or print shop.

What is CIE Lab and why is it perceptually uniform?

CIE Lab (L*a*b*) is a color space where equal numerical distances correspond to equal perceived color differences — unlike RGB or HSL where the same step can look different depending on the color region. It's used in color science, ICC profiles, and professional design software for accurate color comparisons.

What does "Tailwind match" show?

We compute the Euclidean distance between your RGB color and every color in the Tailwind v3 default palette (22 color families × 11 shades = 242 colors) and show the 5 closest matches with their class names (e.g. blue-500), HEX values, and distance scores. Click the copy button on any row to copy the class name.

How do I export a color palette?

Open the Harmonies or Shades feature tab, then click one of the export buttons: CSS Vars, Tailwind, SCSS, or JSON. The formatted code is copied to your clipboard.

Can I pick colors from an uploaded image?

Yes — open the Image tab, drag and drop or upload any image, then hover to see a magnifying loupe (zoomed pixel view) and click any pixel to load its exact color. The tool also automatically extracts up to 8 dominant colors as clickable swatches.

Are my saved favorites permanent?

Favorites and history are stored in your browser's localStorage and persist across sessions on the same browser. They are not synced across devices and will be lost if you clear your browser data. Nothing is stored on our servers.