Color Design Blog
Guides, tutorials, and practical tips on color for designers and developers. 28 articles.
The color wheel, the five harmonies, warm vs cool, the 60-30-10 rule, and how to apply color theory to real web design, with accessibility built in.
How to meet WCAG contrast, design for color blindness, and test your colors, backed by WebAIM and color blindness data. Make your site work for everyone.
The five free tools that cover choosing colors, building palettes, checking contrast, and converting values.
Convert hex to RGB and HSL, manage CSS color variables, and check WCAG contrast, all in the browser.
Keep brand colors consistent, build social palettes, and use color psychology to lift engagement.
Pantone chose Cloud Dancer, a soft white, for 2026. What it means and how to use it in your design work.
WCAG contrast ratios, AA vs AAA, color blindness types and statistics, how to check your design, and common failures and fixes.
What HEX and RGB codes are, how to convert between them, when to use HEX vs RGB vs HSL, and a common color reference table.
WCAG contrast ratios explained, AA versus AAA compliance, the tools that check contrast, and the most common mistakes to avoid.
Color psychology, how many colors to use, the role of each color, the research on recognition and sales, and how to test your palette.
Why dark UI needs its own palette, elevation and surface colors, avoiding pure black, the contrast rules, whether people prefer it, and how to test.
Why color consistency matters, how to create a color system for your posts, and platform-specific tips.
The difference between tints, tones, and shades, how to create each, and when to use them in your design work.
Why color names matter, how color naming systems work, and how to find a color name from a hex code.
Warm off-whites replacing stark white, bold colors balanced with generous neutral space, softer dark mode, and full color systems replacing single brand colors. What is driving each trend.
How red, blue, green, yellow, orange, purple, and black signal different things to customers. SEA brand examples, cultural color differences, and practical selection guidance.
Does color really lift website conversions? The real A/B test data on button color, why contrast beats hue, and how brand colors drive recall and trust.
Recommended palettes with HEX codes for seven industries: finance, healthcare, technology, food, fashion, education, and SEA e-commerce. Reasoning behind each palette choice.
A 7-step process: brand personality, competitive research, primary color selection, full color system, tints and shades, accessibility testing, and style guide documentation.
Why most cultural colour advice is overstated, the colour categories Japanese, Korean and Mandarin split differently from English, why red on a finance chart both inverts and changes what people predict next, why red is also the worst text colour in dark mode, whether men and women in the region really prefer different colours, and where accessibility is actually the law.
How to get depth from a single hue without the result going flat, why lightness steps beat saturation steps, where monochrome quietly fails accessibility, how to widen the ramp when a reader asks for more contrast, and the adjustments that keep it from looking like a filter.
What the conversion is actually doing, how to do it by hand when you need to, where alpha and 8-digit hex fit in, the rounding traps that make two tools disagree about the same colour, and why the value you picked off your screen may not be the value anyone typed.
Which colors blend cleanly, which way a gradient should run and why light at the top reads as raised, the interpolation fix for muddy gradients, the bare percentage that moves a midpoint without adding a color, why a passing contrast ratio can still read badly on a blend, how to fill text with a gradient without making it invisible, why it vanishes entirely in forced colors mode, why a repeating gradient gets a hard seam and how the spec says to close it, and the one-line registration that makes gradient colors animate instead of snapping.
Linear, radial, and conic gradients with copy-paste code, gradient text, useful patterns, browser support, and performance tips, all up to date for 2026.
Every CSS color format in 2026 explained: HEX, RGB, RGBA, HSL, HSLA, and oklch. What each is best for, CSS custom property patterns, and when to switch formats.
Step-by-step guide to choosing your website's color palette. Color psychology, real examples from Stripe, Notion, and Airbnb, and 5 practical steps with free tools.
Complete guide to HEX color codes. How to read #RRGGBB, shorthand notation, 8-digit HEX for opacity, CSS usage, and where to find color codes in design tools.