Color Picker

Color Models Explained: HEX, RGB, HSL, and Accessibility

Colors on screens are defined mathematically using color models. Understanding the three main models - HEX, RGB, and HSL - helps you work effectively in web design, branding, and UI development. Each model represents the same colors in a different way.

RGB (Red, Green, Blue)

RGB is an additive color model where red, green, and blue light are combined. Each channel ranges from 0 to 255. Mixing all three at full intensity produces white; all at zero produces black.

• Red: rgb(255, 0, 0)
• White: rgb(255, 255, 255)
• A medium gray: rgb(128, 128, 128)

RGB is the native model for screens but not intuitive for humans. It is hard to look at rgb(64, 128, 192) and visualize the color.

HEX (Hexadecimal)

HEX is simply RGB written in hexadecimal notation. Each pair of hex digits represents one channel (00-FF = 0-255). It is the most common format in web development because it is compact.

• #FF0000 = Red (255, 0, 0)
• #00FF00 = Green (0, 255, 0)
• #336699 = A steel blue (51, 102, 153)

Shorthand: #369 expands to #336699.

HSL (Hue, Saturation, Lightness)

HSL is the most human-intuitive model:

• Hue: The color itself, as an angle on the color wheel (0-360). 0 = red, 120 = green, 240 = blue.
• Saturation: How vivid the color is (0% = gray, 100% = pure color).
• Lightness: How bright (0% = black, 50% = pure color, 100% = white).

HSL makes it easy to create variations: keep the hue, adjust saturation for muted/vivid variants, adjust lightness for dark/light variants.

Color Accessibility (WCAG)

Web Content Accessibility Guidelines require minimum contrast ratios between text and background:

Always check contrast ratios when choosing text and background colors. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, so never rely on color alone to convey information. Convert between color formats instantly with our hex converter.

Building a Color Palette

• 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent. This creates visual hierarchy.
• Complementary colors: Opposite on the color wheel (180 degrees apart). High contrast, energetic.
• Analogous colors: Adjacent on the wheel (within 60 degrees). Harmonious and calm.
• Use HSL for systematic palettes: Pick a hue, then generate shades by varying lightness from 10% to 90%.