Guide to Color Codes: Hex, RGB, HSL & Conversion
Understand hex, RGB, and HSL color codes for web design. Learn conversion methods, CSS color functions, and how to choose accessible color combinations.
Hex Color Codes
Hexadecimal color codes represent colors using six characters after a hash symbol: #RRGGBB, where each pair represents the red, green, and blue channel intensity from 00 (none) to FF (maximum, 255 in decimal). For example, #FF0000 is pure red (255 red, 0 green, 0 blue), #00FF00 is pure green, #0000FF is pure blue, #FFFFFF is white, and #000000 is black. Shorthand notation uses three characters when each pair is identical: #FF8800 can be written as #F80. Eight-digit hex (#RRGGBBAA) adds an alpha channel for transparency, where 00 is fully transparent and FF is fully opaque. Hex codes are the most common color format in web design and CSS.
RGB and RGBA Color Values
RGB notation expresses colors as three values from 0 to 255 or 0% to 100%: rgb(255, 128, 0) produces orange. RGBA adds an alpha channel from 0 (transparent) to 1 (opaque): rgba(255, 128, 0, 0.5) is semi-transparent orange. In modern CSS, the new syntax uses spaces without commas: rgb(255 128 0) and rgb(255 128 0 / 0.5) for transparency. RGB maps directly to how screens produce color — each pixel has red, green, and blue sub-pixels. To convert hex to RGB, convert each hex pair to decimal: #3498DB becomes rgb(52, 148, 219). The reverse conversion changes each decimal value to a two-digit hex number.
HSL Color Model
HSL (Hue, Saturation, Lightness) describes colors in a way that maps to human intuition. Hue is the color angle on a 360-degree wheel (0/360 = red, 120 = green, 240 = blue). Saturation is the color intensity from 0% (gray) to 100% (vivid). Lightness goes from 0% (black) to 100% (white), with 50% being the pure color. For example, hsl(210, 79%, 53%) produces a medium blue. HSL excels at creating color palettes: keep hue constant and vary saturation and lightness for harmonious variations, or keep saturation and lightness constant and rotate hue for a vibrant multi-color palette. HSLA adds alpha: hsla(210, 79%, 53%, 0.5).
Recommended Resources
Sponsored · We may earn a commission at no cost to you
Color Accessibility and Contrast
WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios between text and background: 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Use contrast checker tools to verify your color combinations. Dark text on light backgrounds generally provides better readability than light on dark. Avoid conveying information through color alone — colorblind users (approximately 8 percent of men) may not distinguish red from green. Pair color with other indicators like icons, patterns, or labels. The CSS function color-contrast() (emerging specification) can automatically select the highest-contrast option from a list of colors against a given background.
Related Free Tools
Related Articles
Frequently Asked Questions
How do I convert hex to RGB?
Split the hex code into three pairs (RR, GG, BB) and convert each from base-16 to base-10. For #3498DB: 34 hex = 3*16+4 = 52, 98 hex = 9*16+8 = 152, DB hex = 13*16+11 = 219. The result is rgb(52, 152, 219). For shorthand hex like #F80, expand to #FF8800 first, then convert. Online converters and JavaScript's parseInt('FF', 16) make this easy to automate.
Which color format should I use in CSS?
Use HSL when creating and adjusting color palettes because it is intuitive to modify hue, saturation, and lightness independently. Use hex for its brevity when specifying specific known colors. Use RGB when working with design tools that output RGB values. In modern CSS, CSS custom properties (variables) with HSL values offer the most flexibility: --primary-h: 210; then hsl(var(--primary-h), 79%, 53%) allows easy theme adjustments.
What are CSS named colors?
CSS defines 148 named colors like 'red', 'blue', 'coral', 'slategray', and 'rebeccapurple'. They are convenient for prototyping and readable code but offer limited precision. Named colors map to specific hex values (e.g., 'coral' = #FF7F50). For production code, explicit hex, RGB, or HSL values give you exact control over your design's color palette.