Web Development
Color Theory for Web Developers
Understanding hex, RGB, HSL, OKLCH, and how to build accessible, maintainable color systems for modern web applications.
Color Spaces a Developer Should Know
Hex (#ff6600) and RGB (rgb(255, 102, 0)) are device-dependent and describe color as light mixes. HSL (hsl(24, 100%, 50%)) maps to human perception: hue is the color family, saturation is intensity, and lightness is brightness. OKLCH (oklch(0.62 0.19 35)) is a newer perceptually-uniform space ideal for gradients and color interpolation — unlike HSL, a lightness of 50% in OKLCH is truly halfway between black and white visually.
Building a Color System with CSS Custom Properties
Define your palette using HSL so you can generate variants by adjusting lightness. For example: --primary-h: 220; --primary-s: 80%; --primary-l: 50%; then compute --primary-light: hsl(var(--primary-h), var(--primary-s), 75%). This approach keeps your design tokens maintainable and makes dark mode trivial — just flip the lightness values.
Accessible Color Contrast
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Use relative luminance (not just hex brightness) to compute this. Our color converter includes contrast ratio calculation so you can verify your palette meets accessibility standards before writing CSS.