Color Formats Guide - HEX, RGB, HSL Differences and Conversion
Understanding color formats helps you work more efficiently in web development and design. This guide covers the three main formats.
Three Mainstream Formats
HEX (Hexadecimal)
color: #4f46e5;
- Format:
#+ 6 hex digits (RR GG BB) - Shorthand:
#fff=#ffffff - Most common in CSS, compact and readable
RGB (Red Green Blue)
color: rgb(79, 70, 229);
- Each channel: 0-255
- Variant:
rgba(79, 70, 229, 0.5)for transparency - Intuitive for additive light mixing
HSL (Hue Saturation Lightness)
color: hsl(244, 76%, 59%);
- H: Hue 0-360 (angle on color wheel)
- S: Saturation 0-100%
- L: Lightness 0-100%
- Most human-friendly: Change H to shift hue, keep S and L for harmony
When to Use Which Format
| Scenario | Recommended | Reason |
|---|---|---|
| General CSS | HEX | Compact, widely used |
| Need transparency | rgba / hsla | HEX 8-digit has compatibility issues |
| Programmatic colors | HSL | Easy to generate palettes by shifting H |
| Design specs | RGB | Design tools commonly use it |
How Conversion Works
HEX to RGB
Split hex into 3 pairs, convert each to decimal: #4f46e5 → R=0x4f=79, G=0x46=70, B=0xe5=229
RGB to HSL
- Normalize R/G/B to 0-1
- Find max and min values
- L = (max + min) / 2
- If max = min: S = 0, H = 0 (grayscale)
- Otherwise calculate S and H based on which channel is max
HSL to RGB
Calculate based on which sixth of the hue circle H falls into. See ToolNest Color Converter for implementation.
Modern CSS Color Functions
CSS Color Module Level 4 introduced new syntax:
/* Modern space-separated syntax */
color: rgb(79 70 229 / 50%); /* replaces rgba */
color: hsl(244 76% 59% / 50%);
/* color-mix for blending */
background: color-mix(in srgb, #4f46e5 50%, white);
/* oklch - perceptually uniform */
color: oklch(60% 0.2 260);
Practical Color Tips
- Use HSL for palettes: Fix S and L, vary H to get harmonious colors
- 60-30-10 rule: 60% primary color, 30% secondary, 10% accent
- Contrast matters: Text-background contrast should be at least 4.5:1 (WCAG AA)
Use ToolNest Color Converter to convert between formats with real-time preview.