💻 Text & Dev

🎨 🎨 HEX to RGB Color Converter: How Color Codes Work

Learn how HEX and RGB color codes work and how to convert between them. Covers the RGB model, hex notation, alpha transparency, HSL colors, and CSS color formats.

⏱️ 7 min read🦉 365tool.net🌍 For everyone worldwide

Web colors are expressed in several formats — HEX, RGB, HSL, and HSB — and each serves a different purpose. HEX codes are compact and copy-pasteable; RGB values are intuitive for mixing; HSL maps to how humans perceive color. Knowing how to convert between them makes you a more effective designer and developer.

The RGB Color Model

Digital screens produce color by mixing Red, Green, and Blue (RGB). Each channel ranges from 0 to 255. The format is rgb(red, green, blue).

rgb(255, 0, 0) = pure red
rgb(0, 255, 0) = pure green
rgb(0, 0, 255) = pure blue
rgb(255, 255, 255) = white
rgb(0, 0, 0) = black

HEX Color Codes

A HEX color code is the RGB values written in hexadecimal: #RRGGBB. Each pair represents one channel (00–FF = 0–255 in decimal).

HEX to RGB

Convert each two-character HEX pair from base-16 to base-10:

#FF5733: FF=255, 57=87, 33=51 → rgb(255, 87, 51)
#1A2B3C: 1A=26, 2B=43, 3C=60 → rgb(26, 43, 60)

RGB to HEX

Convert each decimal channel to a two-digit hex string:

rgb(200, 100, 50): 200=C8, 100=64, 50=32 → #C86432
rgb(0, 128, 255): 0=00, 128=80, 255=FF → #0080FF

Shorthand HEX

When each pair uses the same digit twice, a 3-character form works: #FFF = #FFFFFF, #000 = #000000, #F00 = #FF0000.

Alpha Transparency: RGBA and 8-Digit HEX

rgba(255, 0, 0, 0.5) = 50% transparent red
#FF000080 = 8-digit HEX (80 hex ≈ 50% opacity)

HSL: Hue, Saturation, Lightness

Hue: 0–360° on the color wheel (0=red, 120=green, 240=blue)
Saturation: 0–100% (0%=grey, 100%=full color)
Lightness: 0–100% (0%=black, 50%=normal, 100%=white)

HSL is useful for generating color palettes: keep hue constant, vary lightness and saturation for harmonious shades.

Common Web Colors

Color	HEX	RGB
Black	#000000	rgb(0,0,0)
White	#FFFFFF	rgb(255,255,255)
Red	#FF0000	rgb(255,0,0)
Blue	#0000FF	rgb(0,0,255)
Yellow	#FFFF00	rgb(255,255,0)

Try It Yourself! ✨

Use our free HEX to RGB Color Converter — results appear as you type. No sign-up needed!

🚀 Open HEX to RGB Color Converter Free

❓ Frequently Asked Questions

How do I convert HEX to RGB?▼

Split the 6-character HEX into pairs (RR, GG, BB) and convert each from base-16 to base-10. #FF5733: FF=255, 57=87, 33=51 → rgb(255, 87, 51). In JavaScript: parseInt("FF", 16) = 255.

How do I convert RGB to HEX?▼

Convert each decimal channel (0–255) to two-digit hexadecimal, padding with a leading zero if needed. rgb(200, 100, 50): 200=C8, 100=64, 50=32 → #C86432. In JavaScript: n.toString(16).padStart(2,"0").

What is the difference between HEX and RGB?▼

HEX (#FF5733) and RGB (rgb(255, 87, 51)) represent the exact same color — different notations for the same values. HEX is compact and common in CSS/design tools; RGB is more readable for individual channel values and easier to use in programmatic color manipulation.

What is HSL color?▼

HSL (Hue, Saturation, Lightness) describes color as humans perceive it. Hue is the color angle (0–360°); Saturation how vivid (0–100%); Lightness how dark or light (0–100%). hsl(0, 100%, 50%) = pure red. HSL makes it easy to create color variations by adjusting lightness or saturation of the same hue.

What does the alpha value in RGBA mean?▼

Alpha controls transparency: 0 = fully transparent, 1 = fully opaque. rgba(255, 0, 0, 0.5) is 50% transparent red. In 8-digit HEX (#RRGGBBAA), the last two digits represent alpha: 00=transparent, FF=opaque, 80≈50% opacity.