Color Theory for Developers: HEX, RGB, HSL Explained
Understanding color models is essential for web development. This guide covers the three most common formats used in CSS and how to convert between them. Use our Color Converter to convert colors instantly.
Understanding HEX Colors
HEX (hexadecimal) is the most widely used color format in web development. A HEX color is a six-character string prefixed with a hash sign, where each pair of characters represents the red, green, and blue channels in base-16 notation. Values range from 00 (no intensity) to FF (full intensity).
For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. White is #FFFFFF and black is #000000.
Three-character shorthand is available when each pair has identical digits. So #FF6633 can be written as #F63. Modern CSS also supports eight-digit HEX with an alpha channel for transparency.
RGB and RGBA
RGB stands for Red, Green, Blue and uses decimal values from 0 to 255 for each channel. The CSS syntax is rgb(255, 0, 0) for red. RGBA adds an alpha channel from 0 (transparent) to 1 (opaque) for controlling opacity.
RGB is intuitive for programmatic color manipulation because each channel is a simple integer. If you need to darken a color, reduce all three values proportionally. To lighten, increase them toward 255. Mixing colors is straightforward addition and averaging of channel values.
Converting from HEX to RGB is simple: split the six-character string into three pairs and convert each from base-16 to base-10. For example, #4A90D9 becomes rgb(74, 144, 217).
HSL: The Human-Friendly Model
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel from 0 to 360 (red at 0, green at 120, blue at 240). Saturation is a percentage from 0% (gray) to 100% (full color). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure color.
HSL is often preferred by designers because it maps to how humans think about color. Want a lighter shade? Increase lightness. Want a muted version? Decrease saturation. Creating harmonious color palettes is easier because related colors share similar hue values.
In CSS, HSL is written as hsl(210, 70%, 57%). Like RGBA, HSLA adds an alpha channel for transparency. Modern CSS allows the newer syntax hsl(210 70% 57% / 0.8) with a slash for opacity.
Color Conversion Tips
Converting between HEX and RGB is straightforward arithmetic, but converting to and from HSL involves more complex formulas. Rather than memorizing the math, use a conversion tool to switch formats instantly. Our Color Converter handles all three formats and shows the result in real time.
When choosing a format for your CSS, consider the context. HEX is compact and familiar. RGB is best when you need to manipulate channels programmatically. HSL is ideal for creating color variations like hover states, shadows, and palettes because you can adjust a single property.
CSS custom properties (variables) make it easy to define a base color in HSL and derive variants. For example, define --brand-hue: 210 and reuse it across your palette with different saturation and lightness values for a cohesive design system.
Accessibility and Contrast
Color accessibility means ensuring sufficient contrast between text and its background so all users can read your content. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular).
Contrast ratio is calculated from the relative luminance of the foreground and background colors. Tools like our color converter can help you check whether a color combination meets accessibility standards before you commit to a design.
Beyond contrast, avoid conveying information through color alone. Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Always use additional visual cues such as icons, patterns, or text labels alongside color to communicate meaning.
CSS Gradients and Beyond
Gradients are smooth transitions between two or more colors. CSS supports linear, radial, and conic gradients. A simple linear gradient can be written as background: linear-gradient(to right, #4A90D9, #7B68EE). Multiple color stops give you fine control over the transition points.
Our CSS Gradient Generator lets you visually create gradients by picking colors and adjusting direction, then copies the CSS code for immediate use in your project.
Newer CSS color features like oklch() and color-mix() are gaining browser support and offer even more powerful color manipulation capabilities. These perceptually uniform color spaces produce more natural-looking gradients and transitions.
Convert Colors Instantly
Switch between HEX, RGB, and HSL formats with our free color converter tool.