A pragmatic guide to modern CSS colours - part one
🔗 **Source:** [A pragmatic guide to modern CSS colours - part one](https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/)
> [!note]+ Document Notes
> tags: [CSS, Color, Web Design]
> author: Kevin Powell
> source: Piccalilli
> reference: [https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/]
> date created: 2025-10-08 00:00
>
> # 🏷️ Title: A pragmatic guide to modern CSS colours - part one
>
<!-- deep-read:sections start -->
## 🧭 Table of Contents
- [📝 Summary](#-summary)
- [📖 Main Content](#-main-content)
- [🗒️ Notes](#️-notes)
- [📚 References](#-references)
- [🗣️ Paraphrase](#️-paraphrase)
- [📰 Newsletter](#-newsletter)
- [✅ Action Items](#-action-items)
- [🧪 Hypotheses](#-hypotheses)
- [📊 Methodology](#-methodology)
- [❓ Questions](#-questions)
- [🔮 Future Research](#-future-research)
- [💡 Implications](#-implications)
- [🧠 Learning Styles Assessment](#-learning-styles-assessment)
- [📊 Accessibility Assessment](#-accessibility-assessment)
- [🌍 DEIB Assessment](#-deib-assessment)
- [✅ Logical Validity](#-logical-validity)
- [🛡️ DARVO Analysis](#-darvo-analysis)
- [🎯 Conclusion](#-conclusion)
### 🔗 References
- Include links cited in or relevant to the article.
## 📝 Summary
- What happened: A pragmatic intro to modern CSS color spaces (OKLCH/LCH/Lab, P3), why they’re better than sRGB, and how to adopt them safely.
- Why it matters: More consistent, perceptually uniform colors; wider gamuts on modern displays; easier scaling of design systems.
- Key stakeholders: Front-end developers, designers, accessibility specialists, design system maintainers.
- Risks and tradeoffs: Browser support gaps; gamut clipping; tooling/hand-off changes; need for fallbacks.
- Bottom line: Prefer OKLCH (or LCH) with progressive enhancement and keep sRGB fallbacks; use color-mix() and relative color syntax where available.
## 📖 Main Content
- Core arguments:
- sRGB is limited; modern displays support wider gamuts like Display-P3.
- Perceptually uniform spaces (OKLCH/LCH) make predictable lightness/chroma adjustments.
- Modern CSS adds OKLCH/LCH/ Lab notations, relative color syntax, and color-mix() for robust theming.
- Use progressive enhancement: ship sRGB fallback, enhance with OKLCH/P3 when supported.
- Context and definitions:
- Perceptual uniformity: equal numeric steps ≈ equal visual change.
- Gamut: range of colors a device can show (e.g., sRGB vs Display-P3).
- OKLCH: coordinates are lightness (L), chroma (C), hue (H); great for design tokens.
- Uncertainties:
- color-contrast() remains in flux; rely on established contrast methods.
- P3 authoring via color() support varies; test and provide fallbacks.
### 🗒️ Notes
- sRGB isn’t enough for modern devices; P3 yields richer colors on supported screens.
- OKLCH/LCH improve predictability when adjusting lightness and saturation.
- Practical approach: define tokens in OKLCH, provide hex/rgb fallbacks.
- Use color-mix() for generating scales and states from a base token.
- Check gamut and contrast; avoid over-saturated out-of-gamut picks.
## 📚 References
- CSS Color Module Level 4 (W3C) — definitions and notations: https://www.w3.org/TR/css-color-4/
- CSS Color Module Level 5 (W3C) — color-mix and more: https://www.w3.org/TR/css-color-5/
- MDN: OKLCH color() function and notations: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
- MDN: color-mix() function: https://developer.mozilla.org/en-US/docs/Web/CSS/color-mix
- “OKLCH in CSS: why we moved from HSL” by Evil Martians: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
- APCA (advanced contrast) overview: https://apcacontrast.com/
## 🗣️ Paraphrase
- Paragraph A: Modern CSS color spaces provide broader color ranges and more predictable visual changes than legacy sRGB, improving consistency across devices.
- Paragraph B: Adopt them incrementally with sRGB fallbacks, using OKLCH for tokens and tools like color-mix() to generate accessible, scalable palettes.
## 📰 Newsletter
Discover why OKLCH/LCH are reshaping CSS color. Kevin Powell’s new primer shows how perceptually uniform spaces make token-based themes and state colors predictable—plus safer progressive enhancement with sRGB fallbacks. Try color-mix() to derive hover/active states, and test P3 benefits on supported screens. Handy reads: MDN on color-mix(), W3C CSS Color 4/5, and the Evil Martians OKLCH guide.
## ✅ Action Items
#### DevRel
- Publish a “From HSL to OKLCH” code lab and sample repo; measure adoption via GitHub stars and workshop NPS.
- Office hours: migrating design tokens to OKLCH with sRGB fallbacks.
- Add examples to docs: color-mix() with progressive enhancement.
#### OSPO
- Policy: approve OKLCH and color-mix() in style guides with fallback requirements.
- Compliance: update scanning to flag non-compliant contrast ratios.
- Security: standardize signed design tokens distributions.
#### Community
- Maintainer clinics: palette governance and semver for tokens.
- Contributor pairing: convert components to OKLCH with tests.
- Sponsors: fund accessibility audits tied to color upgrades.
#### WordPress
- Core: evaluate OKLCH tokens; keep hex/rgb fallbacks.
- Design: introduce design tokens with perceptual steps.
- Documentation: examples-first patterns for color-mix() usage.
- Accessibility: automate contrast checks against tokens.
#### The WPOCC
- Programs: microgrants for accessibility-first color refactors.
- Projects: documentation sprints for token standards.
- Funding experiments: milestone-based payouts for theme conversions.
### FAIR
- Independence: include provenance and signatures for token files.
- Policies: transparency on color decisions; sunset legacy palettes.
- Governance artifacts: publish token charters and scorecards.
## 🧪 Hypotheses
- Using OKLCH tokens reduces color-related accessibility regressions by ≥30%.
- color-mix()-derived states improve design consistency scores by ≥20%.
- Progressive enhancement with P3 + sRGB fallback reduces visual discrepancies on mixed fleets by ≥25%.
- Teams ship palettes faster (≥15%) when using perceptual steps vs HSL.
### 📊 Methodology
- A/B component libraries (HSL vs OKLCH); track contrast issues and review time.
- Visual diff tests across sRGB-only and P3 displays.
- Developer surveys on predictability/effort; UX audits for consistency ratings.
### ❓ Questions
- Where do current browsers still clip OKLCH or P3 notably?
- What token naming best maps to perceptual steps?
- How to encode contrast rules directly into token pipelines?
### 🔮 Future Research
- Automated gamut-aware token linters.
- APCA-integrated color selection workflows.
- Authoring P3 assets with fallback previews in design tools.
### 💡 Implications
- Practice: simpler theming, safer scaling across brands.
- Policy: codify fallback and contrast requirements.
- Education: train on perceptual spaces and progressive enhancement.
### 🧠 Learning Styles Assessment
- Reading level: ~10–11th grade (FKGL ≈ 10.5)
#### 👀 Visual learners
- Present: conceptual contrasts (sRGB vs P3), code examples.
- Improve: before/after swatches and chroma/lightness plots.
#### 🔊 Aural learners
- Improve: 3-minute audio summary and TTS.
#### 🗣️ Verbal learners
- Present: clear definitions and analogies.
- Improve: glossary of color terms.
#### 🧩 Kinesthetic learners
- Present: try-it code snippets.
- Improve: sandbox with toggles for fallbacks/gamut.
#### 🧠 Logical learners
- Present: stepwise token migration.
- Improve: decision tree for color choices.
#### 🧑🤝🧑 Social learners
- Improve: forum thread for palette reviews.
#### 🧘♀️ Solitary learners
- Present: self-paced reading.
- Improve: reflection prompts and quick checks.
#### 🌿 Naturalistic learners
- Improve: tie color choices to energy/contrast efficiency.
### 📊 Accessibility Assessment
#### Screen reader semantics
- Present: headings; clear structure.
- Improve: descriptive alt text guidance for palettes.
#### Keyboard navigation
- Improve: include focus state token examples.
#### Contrast and readability
- Present: emphasis on contrast.
- Improve: APCA guidance and thresholds.
#### Text resizing and reflow
- Improve: note on prefers-reduced-motion and reflow tests.
#### Media and captions
- Improve: provide transcript/audio alternatives.
#### Forms and interactions
- Improve: inline validation color patterns with non-color cues.
#### Standards reference
- Map to WCAG 2.2 AA: 1.4.3, 1.4.11, 1.4.12, 2.4.x.
### 🌍 DEIB Assessment
- Cultural breadth: improve multilingual references and examples.
- Inclusive language: mostly neutral; add plain-language callouts.
- Neurodiversity: consistent structure; add icon+text labels.
- Representation: improve inclusive imagery guidance.
- Psychological safety: add community guidelines for feedback.
### ✅ Logical Validity
#### Strong reasoning
- Inductive: perceptual uniformity → predictable adjustments; supported by OKLCH properties.
- Causal: wider gamut support → richer colors on capable devices when enhanced progressively.
#### Fallacies
- Avoid overstating support; always pair with fallbacks.
#### Tone of voice
- Pragmatic, instructional, encouraging.
### 🛡️ DARVO Analysis
- No denial/attack/reversal patterns; instructional content without adversarial framing.
## 🎯 Conclusion
- Bottom line: Use OKLCH (or LCH) for tokens with sRGB fallbacks, apply color-mix() for states, and progressively enhance for P3. Test contrast and gamut.
- Next steps: Audit tokens, define OKLCH scale, add fallbacks, implement color-mix(), and integrate automated contrast checks.
## 🧱 Refactor Appendix (append after 🎯 Conclusion)
```
### 📚 Literature Split Pad
- Purpose: Stage Konik CEE units that become per-source Literature notes.
- Split level: H3.
- Include verbatim quotes under 25 words and a [view highlight] link.
### [H1] 5–10-word present-tense claim
> [!quote] [A pragmatic guide to modern CSS colours - part one](https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/) by [[Kevin Powell]] via [[Piccalilli]]. Published 2025-10-07. Accessed 2025-10-08.
> “Perceptually uniform spaces make color adjustments predictable.”
Two lines: context and use. Cite data if relevant.
[view highlight](https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/#H1) #xref #articleseed ID:rw_[MISSING]
### [H2] 5–10-word present-tense claim
> [!quote] [A pragmatic guide to modern CSS colours - part one](https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/)
> “Ship sRGB fallbacks; progressively enhance with OKLCH/P3.”
Two lines: context and use.
[view highlight](https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/#H2) #xref ID:rw_[MISSING]
---
### 🔖 Atomic Split Pad (Zettel Candidates)
- Purpose: Promote reusable claims into Atomic notes.
- Split level: H4.
- Each item: one idea, present tense, specific, testable.
#### [Z1] OKLCH tokens improve predictability of scales
- Applies to design systems migrating from HSL.
- Pointer: “Part one” guide, section on perceptual uniformity.
- Links: [[Design Tokens]] [[CSS Color]]
#### [Z2] Progressive enhancement reduces color discrepancies
- Mixed device fleets with partial P3 support.
- Links: [[Progressive Enhancement]] [[Display-P3]]
---
### ✏️ Fleeting Queue (Extract by Selection)
- Purpose: Capture quick actions or sparks for Fleeting notes.
- Extraction: Select one line → Refactor.
- [F1] Draft OKLCH token scale for brand — context/https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/ #fleeting #inbox
- [F2] Add color-mix() utilities to CSS framework — context/https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/ #fleeting #inbox
- [F3] Set up P3 preview QA on Mac devices — context/https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/ #fleeting #inbox
---
<!-- deep-read:sections end -->