Practical color knowledge for designers — from foundational theory to real-world application, accessibility standards to CSS engineering.
Define brand personality, understand color associations, build a primary/secondary structure, and test across print and digital.
Design FundamentalsColor wheel, harmonies, warm/cool contrast, HSL — master the fundamentals to make faster, more confident color decisions.
AccessibilityUnderstand AA/AAA requirements, contrast ratio calculations, and how to fix the most common accessibility failures.
Print & ProductionPMS numbers, coated vs uncoated, Pantone vs CMYK vs RGB — and when you actually need to specify spot colors.
CSS & DevBuild a three-layer token system with CSS custom properties, implement dark mode, and maintain consistency at scale.
Design SystemsGenerate a balanced 50–950 scale from any base color — understanding lightness curves, saturation compensation, and hue shift.
Color & EmotionRed creates urgency, blue builds trust — understand how color affects consumer decisions, and how to avoid category clichés.
Color HarmonyComplementary, split-complementary, triadic, tetradic — master high-contrast color combinations with the right proportions.
Interactive TheoryExplore hue, light-dark, warm-cool, complementary, simultaneous, saturation, and quantity contrast — hands-on.
Interactive TheoryMap colors on warm–cool and hard–soft emotion axes to find palettes that match your design's intended tone.
Interactive TheorySee how the same color appears different against different backgrounds — a foundational effect in color perception.
Color HarmonyAsk ten designers what navy pairs with and you’ll get ten confident, slightly different answers.
Color & CodeA HEX code and an RGB triplet describe the exact same color in two different notations.
Print & ProductionRGB and CMYK build color for two different physical media, light and ink, and mixing them up is the single most common reason a design "changes color" the moment it goes to print.
Color HarmonyPalettes that look intentional instead of random usually have one thing in common: controlled proportion.
CSS & DevOKLCH is the color format modern design systems are moving to.
Tools & WorkflowA photograph already contains a finished color palette; pulling it out just takes the right process.
Color HarmonyA monochromatic scheme uses one hue at many lightness and saturation levels.
AccessibilityContrast is the difference in luminance between text and its background.
Color HarmonySage gets treated like a safe, boring green, and that reputation is only half deserved.
Color HarmonyIf there is a color trend of the last few years that actually earned its popularity, terracotta is it — a warm, earthy red-orange that photographs well, ages well on a wall, and somehow avoids feeling dated the way most trend colors eventually do.
Color HarmonyBeige has a bad reputation it does not entirely deserve.
Web & UIA good website palette is not really about picking pretty colors; it is about assigning roles.
BrandingThe strongest logos use one or two colors, not a rainbow.
Color HarmonyAnalogous colors sit next to each other on the color wheel, which makes them one of the fastest routes to a calm, cohesive palette.
Color HarmonyA triadic scheme uses three hues spaced evenly around the color wheel.
Color HarmonyNobody asks "what goes with red" and expects one answer, because everyone can picture how different a brick red is from a fire-engine red.
Color HarmonyEvery color has one pairing that everyone lands on independently, and for mustard it is navy.
Web & UISlides have a problem websites don’t: projectors wash out color and the room may be bright.
Color BasicsIn paint, blue and yellow make green.
Color HarmonySome colors need help to look expensive.