Color Formats Demystified
Colors on the web are represented in multiple formats. They all describe the same colors — just from different perspectives. Understanding when to use each makes you a better developer.
HEX: The Developer Default
Format: #RRGGBB (e.g., #3b82f6)
HEX is just RGB written in hexadecimal. Each pair represents Red, Green, and Blue intensity from 00 (0) to FF (255). It's compact and easy to copy-paste, which is why it's the most common format in code.
#000000= Black (no light)#FFFFFF= White (all light)#FF0000= Pure red
Convert between any format instantly with our Color Converter.
RGB: The Machine Format
Format: rgb(59, 130, 246)
RGB maps directly to how screens work — mixing red, green, and blue light. It's intuitive for programmatic color manipulation (e.g., darkening by reducing all channels by 20%).
The rgba() variant adds an alpha channel for transparency: rgba(59, 130, 246, 0.5) = 50% transparent blue.
HSL: The Human Format
Format: hsl(217, 91%, 60%)
HSL stands for Hue, Saturation, Lightness — and it's how humans actually think about color:
- Hue (0-360°): The color itself on a color wheel. 0° = red, 120° = green, 240° = blue.
- Saturation (0-100%): How vivid the color is. 0% = gray, 100% = full color.
- Lightness (0-100%): How bright. 0% = black, 50% = pure color, 100% = white.
HSL is the best format for building color systems — you can create variations by just adjusting lightness or saturation while keeping the same hue.
Building Color Palettes Programmatically
With HSL, creating a harmonious palette is simple math:
- Complementary: Add 180° to the hue
- Triadic: Add 120° and 240°
- Shades: Keep hue and saturation, vary lightness (20%, 40%, 60%, 80%)
- Tints: Reduce saturation as you increase lightness
Experiment with our Color Picker to find your base color, then use the Color Converter to get it in any format.
When to Use Each Format
- HEX — CSS variables, design tokens, brand colors
- RGB/RGBA — When you need transparency, or programmatic manipulation in JS
- HSL/HSLA — Design systems, theming, generating color variations
- CMYK — Print design only (screens use RGB)
Need CMYK for print? Our Color Converter handles CMYK too, along with HSB/HSV for design tools like Figma.