Color Theory
Color theory is the study of how colors interact, communicate meaning, and affect perception. For UI designers, mastering color means creating accessible, consistent, and emotionally resonant interfaces.
Contents 2 Sections
1Color Fundamentals
- Properties:
- Hue the pure color (red, blue, green, yellow)
- Saturation intensity/purity (vivid vs muted)
- Value/Lightness brightness (dark vs light)
Color Harmonies: | Harmony | UI Use | |---|---| | Monochromatic | Clean, minimal UIs | | Analogous | Harmonious, natural flows | | Complementary | High-contrast CTA vs background | | Triadic | Vibrant, balanced dashboards |
- Semantic Colors:
- Red → danger, error, delete
- Green → success, confirm, active
- Yellow/Amber → warning, caution, pending
- Blue → information, links, primary action
- Gray → disabled, secondary, neutral
WCAG Contrast Requirements: | Text Type | Min Ratio | |---|---| | Normal body text | 4.5:1 | | Large text (≥ 18px or 14px bold) | 3:1 | | UI components / graphics | 3:1 |
2Building a Color System
/* Design token color system */
:root {
/* Brand scale 10-step (50-900) */
--color-blue-50: #eff6ff;
--color-blue-500: #3b82f6;
--color-blue-900: #1e3a8a;/* Semantic tokens */ --color-primary: var(--color-blue-500); --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-neutral-50: #f9fafb; --color-neutral-900: #111827; }
/* Example accessible pairs */ .body-text { color: #374151; /* on white: ~10.5:1 ✓ */ } .btn-primary { background: #1d4ed8; /* on white: ~8.5:1 ✓ */ color: #ffffff; }
/* Never rely on color alone reinforce with icons/patterns */ .error { color: #dc2626; border: 2px solid #dc2626; } .error::before { content: "✕ "; } ```
Explore the Full Portfolio
This is the complete portfolio of Sufi Khan Sulaiman, a technology leader specialising in B2B commerce and digital automation. Start from the Home page for the overview, then move through two decades of career experience across FLIR Systems, Lorex Technology, and 1c Platform, and the full catalogue of project case studies spanning headless commerce migrations, AI recommendation engines, and multi-channel fulfilment systems.
The skills and certifications page maps the technical and leadership capabilities behind the work, while the articles and the knowledge base break down the thinking into actionable frameworks. For hands-on learning, the tutorials and applications sections cover practical builds from front-end fundamentals to full-stack web apps.
For consulting engagement, the expertise page outlines service offerings, the ecommerce hub covers platform architecture and automation strategy, and the ecommerce guide (PDF) is a downloadable 55-page field manual. When you are ready to talk, the contact page is the direct line.