Color Knowledge

1. What is a color space

A color space is a mathematical model for describing and reproducing colors. RGB is the most common additive model: red, green and blue primaries combine at different intensities. But the same RGB values can look different on different devices because their displayable range varies. Common spaces include sRGB, Display P3, Adobe RGB and DCI-P3, each defining color coordinates and a reproducible range.

2. What is gamut

Gamut is the range of colors a device, file or standard can show, usually drawn as an area on the CIE 1931 chromaticity diagram. The human eye sees a far wider range; sRGB covers only about 35% of it. Wide-gamut screens (Display P3, Adobe RGB) show more vivid, truer colors, especially in saturated reds, greens and oranges.

sRGB ≈ 35% 人眼可见色彩 · Display P3 ≈ 45% · Adobe RGB ≈ 50% · NTSC 92% ≈ 100% sRGB

3. Color accuracy (ΔE)

Accuracy is the deviation between a screen’s color and the reference, measured by ΔE (Delta-E): ΔE ≤ 2 is essentially invisible to the eye (pro grade); 2 < ΔE ≤ 5 is a slight shift; ΔE > 5 is clearly visible. It depends on panel type, factory calibration, white-point drift and viewing angle. Software self-checks (like the 24-color chart here) only give a rough comparison; precise calibration needs a hardware colorimeter.

4. Color temperature & white point

The white point describes how warm or cool “white” looks, in Kelvin (K). 6500K (D65) is the standard for most screens and web content (slightly cool); 5000K is warmer (more yellow). The same image looks different at different white points, so compare screens at matched brightness and tint. Night-light / blue-light filters change the white point — turn them off when testing.

5. How to test monitor color accuracy

Use this site’s Display Test page: check resolution and DPR, open solid colors full-screen for dead pixels, watch grayscale ramps for banding, and compare the 24-color chart side-by-side with another device. For print or retouch-grade accuracy, use a colorimeter (Spyder, Calibrite) to build an ICC profile.

6. Color theory in brief

Core schemes: monochromatic (one hue, varied lightness/saturation), analogous (neighbors on the wheel), complementary (opposites, high contrast), triadic / split-complementary (balanced three). Cool colors recede, warm colors advance; high lightness feels light, low feels heavy. For accessibility keep a lightness difference ≥ 30% between adjacent blocks and avoid red-green pairings.

7. Accessibility & contrast (WCAG)

Readability on the web comes down to the contrast between text and background. WCAG 2.1 requires body text ≥ 4.5:1 (AA) or ≥ 7:1 (AAA); large text (18pt+ or 14pt bold) ≥ 3:1; UI components (borders, icons) ≥ 3:1. Check values live with the Contrast tool here, and aim to meet AA at minimum for main text and key actions.

8. Color, emotion & culture

Colors carry emotion and cultural meaning: red often signals passion or warning (and festivity in many cultures); blue reads as professional, calm and trustworthy — common in tech and finance; green means nature, health and “go”; yellow means energy, caution and price. Meanings can flip across cultures (white implies mourning in some East-Asian contexts), so verify semantics for international audiences.

9. Light vs dark mode

The same palette looks different on light vs dark backgrounds: on dark surfaces use brighter, slightly less saturated primaries to avoid harsh pure colors; on light surfaces you can go more vivid. Designing dark mode is not a simple color inversion — re-establish the lightness hierarchy (background, card, text). This site toggles themes instantly so you can preview any palette in both.

10. Which color format to use

HEX is compact and CSS-friendly; RGB is intuitive for per-channel math; HSL/HSV make hue/lightness tuning easy; CMYK targets print (RGB→CMYK shifts darker); LAB/LCH match human perception, good for delta-E and gradients. Web uses HEX/RGB, design systems like HSL variables. The Converter here switches among all of them.

11. OKLCH: a perceptually uniform color space

HSL lightness is not visually uniform: yellow at 50% lightness looks far brighter than blue at the same value. OKLCH (built on OKLab) redesigns the axes so numbers match perception — colors with equal L look equally light, equal C equally vivid. It is part of CSS Color Level 4 (oklch()/oklab() work directly in stylesheets) and is the space of choice for modern scale generation. The Color Wheel and Color Scale tools here offer an OKLCH mode to compare both spaces side by side.

12. APCA: the next generation of contrast

The WCAG 2.1 ratio (e.g. 4.5:1) is a simplified metric from 1960s experiments: it rates black-on-white 21:1 but cannot explain why light-on-dark reads differently from dark-on-light. APCA (Accessible Perceptual Contrast Algorithm), the WCAG 3 draft replacement, outputs an Lc value (~0–108), is polarity-aware, and grades by how the eye actually responds to size and weight: body ≥ 75, large text ≥ 60, UI ≥ 45. Both the Contrast checker and Palette Audit here report WCAG and APCA side by side.

13. Blend modes: layer colors like design apps

Multiply darkens, Screen lightens, Overlay boosts contrast — these come from the W3C Compositing & Blending standard and match Photoshop layer blending. Predicting "brand color on background" with multiply is genuinely useful for brand extensions. Note that plain RGB averaging turns muddy and dark; interpolating in linear light (the Mixer default here) keeps saturation and matches real light mixing.

Further reading

• Pair this article with the palette generator, contrast checker and color-blindness simulator on this site.
• Related standards: sRGB (IEC 61966-2-1), Display P3 (Apple), Adobe RGB (1998), WCAG 2.1, CIE 1931 chromaticity diagram.