UI/UX Atlas

Color

Color from perceptual fundamentals to OKLCH, accessible contrast, semantic tokens, and dark mode.

  1. Color Theory Foundations & Harmony

    Master perceptual color principles, harmony systems, and modern OKLCH workflows to build palettes that communicate, scale, and hold up under real constraints.

  2. Color Models: RGB, HSL, LCH & OKLCH

    Understanding color models — from the hardware-native RGB to the perceptually-uniform OKLCH — unlocks principled, accessible palette work that survives dark mode and scales.

  3. Palette Construction & Tonal Scales

    Build perceptually-even, accessible color palettes using OKLCH tonal scales and semantic token architecture that scales across themes and platforms.

  4. Contrast & Accessibility: WCAG 2.x and APCA

    Master the gap between passing a contrast ratio and actually being readable — covering WCAG 2.2 AA requirements, real-world limits, and how APCA reframes legibility.

  5. Color Tokens & Semantic Color Architecture

    Structured semantic token systems turn raw color values into a maintainable, scalable language that survives brand refreshes, dark mode, and multi-platform delivery.

  6. Dark Mode Design (luminance-based elevation)

    Craft dark themes that feel polished and accessible by using luminance steps to signal depth — not drop shadows that vanish on dark surfaces.

  7. Color Psychology & Cultural Context

    Choosing colors that feel right is harder than it looks — perception, emotion, and cultural meaning collide in ways that break any universal rulebook.

  8. Color Blindness & Inclusive Color Design

    Build interfaces that work for every user's visual system — from deuteranopia to achromatopsia — by designing with redundancy, semantic tokens, and tested simulations.

  9. Wide Gamut & Display Color Spaces (P3, OKLCH)

    Modern displays can render far more color than sRGB allows — learn how P3 and OKLCH unlock richer, more accessible, and future-proof color in production UI.

  10. Palette Tools & Generator Workflow

    Master modern palette tools and generator workflows — from OKLCH-based algorithmic scales to token-ready export pipelines that keep design and code in sync.