Every web developer works with colors daily, but few understand the underlying color models well enough to make confident decisions. Understanding hex, RGB, HSL, and newer formats like oklch makes you faster at choosing and adjusting colors.
Hex Colors (#RRGGBB)
Hexadecimal color codes represent RGB values in base-16. #FF0000 is pure red (FF=255 for red, 00 for green, 00 for blue). The shorthand #F00 expands each digit: F→FF, 0→00, 0→00. Eight-digit hex (#RRGGBBAA) adds alpha transparency.
Best for: Quick color specification, design tokens, brand guidelines. Hex is the most universally recognized color format.
RGB / RGBA
rgb(255, 0, 0) specifies red, green, and blue channels as 0-255 integers. rgba(255, 0, 0, 0.5) adds 50% transparency. Modern CSS also accepts rgb(255 0 0 / 50%) syntax.
Best for: Programmatic color manipulation, calculating color blends, and any scenario where you're computing colors mathematically.
HSL / HSLA
hsl(0, 100%, 50%) specifies hue (0-360 degrees on the color wheel), saturation (0-100%), and lightness (0-100%). This is the most intuitive model for humans — want a darker blue? Reduce lightness. Want a muted blue? Reduce saturation.
Best for: Creating color palettes, adjusting colors intuitively, generating theme variations. HSL makes it easy to create harmonious color schemes by rotating the hue value.
Modern: oklch and oklab
The newest CSS color formats (oklch and oklab) are perceptually uniform — meaning equal numeric changes produce equal perceived color changes. This fixes issues where HSL's "50% lightness" looks dramatically different across hues. oklch is increasingly preferred for design systems.
Choosing the Right Format
Use hex for static color definitions and brand colors. Use HSL for building color palettes and theme systems. Use RGB for programmatic manipulation. Use oklch for perceptually uniform design systems.
Convert between all color formats instantly with our Color Converter.