RGB to HEX Converter
Convert RGB and RGBA color values to HEX instantly. Also outputs HSL, HSLA and CSS variables. Use the color picker or type any value — all formats update in real time. WCAG contrast check against white and black included. Everything runs in your browser.
Color Picker
Related Tools
Frequently Asked Questions
How do I convert RGB to HEX manually?▾
Convert each RGB channel (0–255) to a 2-digit hexadecimal value and concatenate:
rgb(59, 130, 246) → R: 59 = 3b, G: 130 = 82, B: 246 = f6 → #3b82f6
To convert a decimal number to hex: divide by 16 repeatedly and map remainders to 0–9, a–f. Or use JavaScript: (59).toString(16) → '3b'.
Always pad to 2 digits: 9 → '09', not '9'.
How do I convert RGB to HEX in JavaScript and CSS?▾
JavaScript: const rgbToHex = (r, g, b) => '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
rgbToHex(59, 130, 246); // '#3b82f6'
CSS — you cannot convert at runtime, but you can use rgb() directly anywhere HEX is accepted: color: rgb(59, 130, 246); /* identical to color: #3b82f6 */
For dynamic colors in CSS, use custom properties with separate channel values: --color-r: 59; --color-g: 130; --color-b: 246; color: rgb(var(--color-r), var(--color-g), var(--color-b));
How do I convert RGBA to HEX (with alpha / transparency)?▾
Append the alpha channel as a two-digit hex value to the 6-digit HEX:
rgba(59, 130, 246, 0.5) → alpha: 0.5 × 255 = 127.5 ≈ 128 = 80 hex → #3b82f680
The formula: Math.round(alpha * 255).toString(16).padStart(2, '0')
8-digit HEX (#RRGGBBAA) is supported in all modern browsers. Our tool generates both RGBA CSS and 8-digit HEX output automatically.
What is the difference between RGB and HSL for CSS?▾
RGB (red, green, blue) maps directly to how screens emit light — intuitive for developers mixing colors numerically.
HSL (hue, saturation, lightness) is more intuitive for humans. To make a color lighter, increase L. To desaturate, decrease S. To create a hover state: hsl(217, 91%, 60%) → hsl(217, 91%, 50%).
For design systems and theme generation, HSL is far more practical. Both are valid in CSS and supported everywhere.
Can I use RGB values directly in CSS without converting to HEX?▾
Yes — RGB and HEX are interchangeable in CSS. All these declarations produce the same color:
color: #3b82f6; color: rgb(59, 130, 246); color: rgba(59, 130, 246, 1); color: hsl(217, 91%, 60%);
Modern CSS also supports the new color() function and oklch() for wider gamuts (P3 displays), but for standard sRGB colors all four formats above are equivalent.