Color Converter
Convert colors between HEX and RGB for CSS, design systems and branding.
Back to all tools on ToolForge
HEX to RGB
RGB:
RGB to HEX
R: G: B:HEX:
About Color Converter
The Color Converter tool lets you convert colors between HEX and RGB for CSS, design systems and branding.
It is useful for quick browser-based image processing, asset cleanup, color work and lightweight visual tasks without extra software.
Understanding HEX Color Notation
HEX colors use hexadecimal (base-16) notation to represent RGB values:
- Format: #RRGGBB where RR=red, GG=green, BB=blue
- Range: 00-FF in hex equals 0-255 in decimal
- Shorthand: #RGB expands to #RRGGBB (e.g., #f00 → #ff0000)
- Alpha: #RRGGBBAA adds transparency (00=transparent, FF=opaque)
- Case: Hex digits are case-insensitive (#ABC = #abc)
HEX to RGB Conversion Algorithm
// Convert HEX to RGB
function hexToRgb(hex) {
// Remove # prefix
hex = hex.replace(/^#/, '');
// Expand shorthand (e.g., "03F" → "0033FF")
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
// Parse hex pairs to decimal
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return { r, g, b };
}
// Example: #3498db → rgb(52, 152, 219)
// 0x34 = 52, 0x98 = 152, 0xdb = 219
RGB to HEX Conversion Algorithm
// Convert decimal to 2-digit hex
function toHex(n) {
// Clamp to valid range (0-255)
const clamped = Math.max(0, Math.min(255, n));
const hex = clamped.toString(16).toUpperCase();
return hex.length === 1 ? '0' + hex : hex;
}
// Convert RGB to HEX
function rgbToHex(r, g, b) {
return '#' + toHex(r) + toHex(g) + toHex(b);
}
// Example: rgb(52, 152, 219) → #3498DB
// 52 → "34", 152 → "98", 219 → "DB"
Color Format Comparison
| Format | Syntax | Alpha Support | Use Case |
|---|---|---|---|
| HEX | #RRGGBB | #RRGGBBAA | CSS, web design, HTML |
| RGB | rgb(r, g, b) | rgba(r, g, b, a) | CSS with transparency |
| HSL | hsl(h, s%, l%) | hsla(h, s%, l%, a) | Intuitive color adjustment |
| CMYK | cmyk(c, m, y, k) | N/A | Print design |
| LAB | lab(l, a, b) | lab(l, a, b / alpha) | Color science, perceptual uniformity |
Common Web Colors
| Color Name | HEX | RGB | CSS Name |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | black |
| White | #FFFFFF | rgb(255, 255, 255) | white |
| Red | #FF0000 | rgb(255, 0, 0) | red |
| Green | #008000 | rgb(0, 128, 0) | green |
| Blue | #0000FF | rgb(0, 0, 255) | blue |
| Yellow | #FFFF00 | rgb(255, 255, 0) | yellow |
| Cyan/Aqua | #00FFFF | rgb(0, 255, 255) | aqua, cyan |
| Magenta/Fuchsia | #FF00FF | rgb(255, 0, 255) | fuchsia, magenta |
| Gray | #808080 | rgb(128, 128, 128) | gray |
| Navy | #000080 | rgb(0, 0, 128) | navy |
| Purple | #800080 | rgb(128, 0, 128) | purple |
| Lime | #00FF00 | rgb(0, 255, 0) | lime |
CSS Color Best Practices
- Use HEX for solid colors: Shorter syntax, widely supported
- Use RGBA for transparency: Better browser support than #RRGGBBAA
- Use HSL for dynamic colors: Easier to adjust saturation and lightness programmatically
- Name colors semantically: Use CSS custom properties (--primary-color: #3498db)
- Ensure accessibility: Maintain WCAG contrast ratios (4.5:1 for text)
- Test on multiple displays: Colors vary across monitors and phones
Frequently Asked Questions
- What is the difference between HEX and RGB color formats?
- HEX colors use hexadecimal notation (#RRGGBB) where each pair represents red, green, and blue values from 00-FF (0-255). RGB uses decimal notation rgb(red, green, blue) with values 0-255. HEX is compact and common in CSS; RGB is readable and supports alpha channel (RGBA). Both represent the same additive RGB color space.
- How do you convert HEX to RGB mathematically?
- Split the 6-digit HEX into three 2-digit pairs. Convert each hexadecimal pair to decimal: R = hex[0-1] to decimal, G = hex[2-3] to decimal, B = hex[4-5] to decimal. Example: #3498db → R=0x34=52, G=0x98=152, B=0xdb=219 → rgb(52, 152, 219). For 3-digit HEX (#RGB), double each digit first.
- What is the purpose of the alpha channel in colors?
- The alpha channel controls transparency from 0 (fully transparent) to 1 or 100% (fully opaque). RGBA format: rgba(255, 0, 0, 0.5) for semi-transparent red. HEX equivalent: #RRGGBBAA where AA is hex alpha (00-FF). Alpha enables layering effects, overlays, and subtle visual treatments without full opacity.
- What are common color spaces and when are they used?
- RGB/HEX for screens and web design (additive light model). CMYK for print (subtractive ink model). HSL/HSV for intuitive color selection (hue, saturation, lightness/value). LAB for perceptual uniformity and color science. XYZ as device-independent reference. Use RGB for digital, CMYK for print, HSL for color pickers.
- Why do colors look different on different screens?
- Monitor calibration, panel technology (IPS, TN, OLED), color gamut (sRGB, Adobe RGB, DCI-P3), brightness settings, and ambient lighting all affect color appearance. Manufacturers tune displays differently. Professional work requires calibrated monitors with ICC profiles. Web colors assume sRGB color space as the standard.
- What is color gamut and why does it matter?
- Color gamut is the range of colors a device can display or reproduce. sRGB is the web standard (~35% of visible spectrum). Adobe RGB covers ~50%, DCI-P3 ~45%. Wide-gamut displays show more vibrant colors but may oversaturate sRGB content. Gamut mapping ensures colors translate correctly between color spaces.