HEX to RGB Converter

HEX color codes are a compact way to represent RGB colors using hexadecimal notation. A 6-digit hex code like #3b82f6 encodes three channels: red (3b = 59), green (82 = 130), and blue (f6 = 246). The # prefix is conventional but not always required.

CSS supports several hex formats: 3-digit (#rgb), 4-digit (#rgba), 6-digit (#rrggbb), and 8-digit (#rrggbbaa). The 3-digit format is shorthand where each digit doubles (#f0c → #ff00cc). The 8-digit format includes alpha transparency.

The RGB color model defines colors by mixing Red, Green, and Blue light at different intensities from 0 to 255. It's an additive model — combining all channels at full intensity produces white (255, 255, 255), while all zeros produce black (0, 0, 0).

RGBA extends RGB with an Alpha channel ranging from 0 (fully transparent) to 1 (fully opaque). In CSS, this is written as rgba(59, 130, 246, 0.8). RGBA is essential for creating overlays, frosted glass effects, and translucent UI elements.

HSL represents color using Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). The hue is the color's position on the color wheel: 0° is red, 120° is green, 240° is blue. Saturation controls vividness, and lightness controls brightness.

HSL is particularly useful for design systems because you can create consistent palettes by fixing the hue and varying saturation and lightness. For example, a brand color at hsl(217, 91%, 60%) can generate lighter tints (higher L) and darker shades (lower L) while maintaining the same hue.

Modern CSS supports all color formats interchangeably: hex (#3b82f6), rgb(59, 130, 246), hsl(217, 91%, 60%), and the newer oklch() for perceptually uniform colors. Each format has its strengths.

HEX is the most compact and widely used in design tools. RGB is natural for programmatic color manipulation. HSL is ideal for design tokens and theme generation. When building CSS custom properties for a design system, consider using HSL so theme variants can easily adjust lightness and saturation.