Color on screens: light, not paint
Every color in a digital interface is emitted light. Your display sends out red, green, and blue light (RGB) at different intensities. The combination determines which color you see.
What this means for UI design
- A "color" is always tied to a particular display and environment — the same hex code can look different on different screens.
- Changing display brightness or contrast changes how a color feels, even though the code is identical.
- That's why we work with standardized color spaces, so that as many displays as possible show roughly the same result.
sRGB — the practical standard
sRGB is the de‑facto color space of the web. Most browsers, design tools, and image formats assume sRGB unless you explicitly say otherwise.
Why it matters
- If you design in another space (for example Display‑P3 in Figma) but export as if it were sRGB, colors can look washed‑out or off in the browser.
- For UI that has to work "everywhere", the safest approach is:
- design in sRGB, or
- be very deliberate about converting to sRGB on export.
On Colorr you can think of sRGB as the baseline: hex codes and RGB values reflect how colors appear on a typical sRGB display.
RGB, HSL and other ways to describe color
RGB specifies how much red, green and blue light each pixel emits. It's great for hardware, but not always intuitive for humans: small changes in RGB can create big, non‑obvious jumps in perceived color.
That's why we often use alternative models when working with UI:
HSL (Hue, Saturation, Lightness)
- Hue = which "color" (position around the color wheel)
- Saturation = how intense or muted it is
- Lightness = how light or dark it is
- Useful for building ordered palettes where you control lightness, e.g. blue‑100 → blue‑900.
Perceptual models (LAB, LCH, OKLCH, etc.)
- Aim to match how we actually perceive differences in color.
- Gradients and shadows built in these spaces tend to look smoother and less "muddy".
In practice
- Use RGB/hex for representation (
#1c1917,rgb(28, 25, 23)). - Use HSL or a perceptual model when you want to construct and tweak palettes in a controlled way.
Lightness and contrast — more important than exact hue
For readability and structure, lightness is often more important than the exact hue.
Key points
- Two colors can have very different hues but similar lightness — they'll have poor contrast against each other.
- The same color can feel completely different depending on background:
- A medium blue on a light background feels bold and clear.
- The same blue on a dark background can feel dull or low‑contrast.
For UI work
- Ensure body text sits on backgrounds with sufficient lightness difference.
- Make interactive elements (buttons, links) stand out both from the background and from surrounding text.
- When building scale palettes (50–900 etc.), strive for even steps in lightness, not just "nice looking" hex values.
Contrast and accessibility (WCAG in brief)
Contrast is a measure of how different two colors are in lightness. WCAG 2.1 specifies minimum contrast ratios for text vs background:
This isn't only about compliance; it's a very good baseline for real‑world readability, especially on poor displays or in strong ambient light, and for users with low vision or temporary impairments (tired eyes, sun glare, small phones).
Practical guidelines
- Avoid low‑contrast "color on color" for body text (e.g. light green on white).
- Prefer muted backgrounds (neutrals or soft colors) and high‑contrast text colors.
- Always test key text colors against their real backgrounds, not just on plain white.
How humans perceive color in UI
Eyes and brain simplify aggressively. We never see a color in isolation — only in context.
Some perception effects that matter in interfaces:
Simultaneous contrast
- A neutral gray can look warm next to blue and cool next to orange. Surrounding colors influence how each color appears.
After‑images and visual fatigue
- Large, highly saturated blocks (pure red, neon green) are tiring over time. That's why many design systems use muted backgrounds and reserve strong saturation for small accents.
Signaling and semantics
- Many colors carry learned meanings:
- Red → error, danger, destructive action
- Green → success, done, positive
- Yellow/Orange → warning, caution
- Respecting these conventions makes interfaces faster to understand.
Color vision deficiencies
- Some users see colors differently or struggle to distinguish them. Good practice:
- Never rely on color alone — add icons, text, underline, patterns.
- Avoid critical red–green distinctions without additional cues.
Practical principles for better color in interfaces
To tie it all together, here are some concrete principles:
- 1
Treat sRGB as your baseline. It keeps colors predictable across browsers and standard tools.
- 2
Construct palettes with controlled lightness. Use HSL or a perceptual model when you create 100–900 steps so contrast increases in a predictable way.
- 3
Prioritise text contrast over pure aesthetics. Body text should have high contrast, especially at small sizes and on mobile.
- 4
Use high saturation sparingly. Let strong colors highlight important elements (primary buttons, status badges), not dominate large background areas.
- 5
Follow established semantics for status colors. Users should instantly recognise error, warning, success, and neutral states.
- 6
Test in realistic conditions. Check your palette on multiple screens, in light and dark mode, and in different environments. Small tweaks in lightness will often make a big difference.