Color Codes for Web Design — HEX, RGB, HSL & CSS Guide
Color in web design is expressed through code, and understanding the different color formats helps you work more efficiently and build better color systems. Each format has distinct strengths — HEX for simplicity, RGB for programmatic manipulation, HSL for intuitive color relationships, and oklch for perceptually uniform modern design systems.
HEX Colors
HEX (hexadecimal) colors are the most common format in CSS and web design tools. A HEX color is a six-character string preceded by #, where each pair of characters represents red, green, and blue values in base-16 (0-9 and A-F).
#RRGGBB where each pair ranges from 00 (0) to FF (255)
#FF0000 = pure red · #00FF00 = pure green · #0000FF = pure blue
#000000 = black · #FFFFFF = white · #808080 = medium gray
A three-character shorthand exists when both characters in each pair are identical: #FF0000 → #F00, #AABBCC → #ABC. HEX also supports an optional two-character alpha: #FF000080 = 50% transparent red.
RGB and RGBA
RGB expresses colors as three values 0-255 for red, green, and blue. RGBA adds a fourth value (0-1) for opacity. RGB is useful when you need to manipulate color values programmatically or set transparency.
| Color | HEX | RGB |
|---|---|---|
| Pure red | #FF0000 | rgb(255, 0, 0) |
| Navy blue | #001F5B | rgb(0, 31, 91) |
| 50% transparent black | #00000080 | rgba(0, 0, 0, 0.5) |
| Coral | #FF6B6B | rgb(255, 107, 107) |
HSL — The Designer-Friendly Format
HSL (Hue, Saturation, Lightness) is the most intuitive format for designers building color systems. Hue is a position on the color wheel (0-360 degrees). Saturation is the intensity from gray (0%) to full color (100%). Lightness ranges from black (0%) to white (100%).
HSL makes it easy to create color variations: to darken a button on hover, just decrease L. To create a muted version, decrease S. To find a complementary color, add 180 to H. This predictability is why design systems like Tailwind CSS expose HSL-based color variables.
| Adjustment | Effect | Example |
|---|---|---|
| Change H | Different color, same mood | Blue → Purple |
| Decrease S | More muted/neutral | Vibrant → Muted |
| Decrease L | Darker shade | Medium → Dark |
| Increase L | Lighter tint | Medium → Light |
Color Accessibility
WCAG (Web Content Accessibility Guidelines) requires a minimum contrast ratio between text and background: 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Approximately 8% of men and 0.5% of women have some form of color vision deficiency, with red-green color blindness being most common. Always test color combinations for contrast and never rely on color alone to convey information.
Common CSS Color Tips
- Use CSS custom properties (variables) for your color system:
--primary: #3b5bdb; - currentColor inherits the element's color value — useful for icon SVGs
- transparent is equivalent to rgba(0,0,0,0)
- oklch() is the modern color format with perceptually uniform lightness — increasingly supported in modern browsers
Convert any color between HEX, RGB, and HSL instantly.
Open Color Code Converter →