Educational Guides
Understand the color models behind the tools — from HEX basics to modern OKLCH.
HEX Color Codes
What HEX color codes are, how #RRGGBB works, 3-digit and 8-digit forms, and how to convert HEX to RGB, HSL and…
RGB Color Model
How the RGB additive color model works, why screens use it, bit depth, and the difference between sRGB, Displa…
HSL Explained
How the HSL color model works, why designers love it, HSL in CSS, and its perceptual pitfalls compared with OK…
HSV Explained
How the HSV (HSB) color model works, why design-tool color pickers use it, and how it differs from HSL.…
CMYK Printing
The CMYK subtractive model, why K exists, rich black vs plain black, and how to prepare screen colors for prin…
LAB Color Space
What the CIELAB (L*a*b*) color space is, why it approximates human perception, Delta E, and when to use LAB.…
LCH Color Space
The LCH color space: CIELAB in polar coordinates — Lightness, Chroma, Hue — and why it beats HSL for design sy…
OKLAB
Why Björn Ottosson's OKLab (2020) fixed CIELAB's flaws, how it works, and why CSS adopted it for color mixing …
OKLCH
OKLCH — the polar form of OKLab — explained: syntax, benefits for design systems, wide gamut support and pract…
Color Theory
The color wheel, hue/value/chroma, warm vs cool, color context effects, and the 60-30-10 rule — practical colo…
Color Harmony
Every classic color harmony explained — complementary, analogous, triadic, split-complementary, tetradic, mono…
Color Accessibility
WCAG 2.2 contrast requirements, color blindness statistics and design strategies, and how to build accessible …
Web Safe Colors
What the 216 web-safe colors were, why they existed, and what 'safe' means for color on the modern web.…
Digital vs Print Colors
RGB vs CMYK, gamut differences, color profiles, proofing and a practical workflow for keeping brand colors con…
Flexbox Guide
How CSS flexbox actually works — main axis vs cross axis, justify vs align, wrapping, gap, and the patterns yo…
CSS Grid Guide
CSS Grid explained practically: template columns, fr units, auto-fit vs auto-fill, named areas and responsive …
SVG Optimization
How to optimize SVG files: what bloats them, safe transformations, precision reduction, gzip realities and inl…
Image Optimization
A practical guide to web image optimization: choosing JPG/PNG/WebP/AVIF, responsive sizing, quality settings, …
Typography Scale
How modular type scales work — choosing a ratio, generating sizes, pairing with line height and spacing, and i…
Favicon Guide
Which favicon files you actually need today: ICO, PNG sizes, apple-touch-icon, web manifest icons and SVG favi…