Color Models for Developers

Color on screens is numbers interpreted as light. Developers rarely “see” color directly—they manipulate values in CSS, SVG, design tokens, and API payloads.

Same color, many strings

These can describe the same sRGB color:

• #2563EB
• rgb(37, 99, 235)
• hsl(221, 83%, 53%)

Design tools, browsers, and spreadsheets pick different default formats. Conversion is routine work, not a one-time trick.

Channels and gamut

Most UI work uses sRGB—three channels (red, green, blue) each from 0–255 (or 0–100% in some functions). Wide-gamut displays (P3) can show more vivid colors than sRGB hex can name; that matters for marketing sites more than internal admin panels.

For typical product UI, sRGB + consistent tokens beats chasing exotic gamuts without a pipeline.

Perception vs measurement

Humans judge brightness non-linearly. Two colors with equal RGB average can look different in lightness. That is why HSL and Lab exist—they separate hue/lightness for design adjustments.

Developers still ship hex/rgb in CSS; HSL helps when you need “same hue, slightly darker hover state.”

Opacity is a separate channel

Alpha controls transparency. #2563EB is opaque; rgba(37, 99, 235, 0.5) is the same RGB at 50% opacity over whatever is behind it.

Contrast checks must use composited colors on real backgrounds—not the swatch alone on white.

Where color appears in code

• CSS custom properties (--color-primary)
• Tailwind/theme config
• Chart libraries and status badges
• PDF/email templates with limited CSS support

Key takeaway

Treat color as structured data with multiple views (HEX/RGB/HSL). Pick a source of truth for your design system, then convert for tools and platforms.