Practical guides on color palettes, color theory, website color systems and WCAG contrast — written for designers and developers who ship real interfaces.
Every guide below comes from the same question: how do you get from an idea — "calm", "premium", "energetic" — to a set of colors that works on a real page, with real text, on real screens? If you'd rather skip the theory and start from colors, the free AI color palette generator turns a prompt like "ocean blue" or "luxury gold" into a matching palette you can test, preview and export in one sitting. If you want the reasoning behind good palettes, start with the guides.
A step-by-step workflow for a website palette that survives contact with real content: choose a primary color, build harmony around it, add tinted neutrals and test contrast. Includes the mistakes that make most palettes fall apart.
Read guideHue, saturation and lightness explained for interface work, plus the six harmony rules with concrete examples and when to use HEX, RGB or HSL. Everything you need to move from the color wheel to a working palette.
Read guideTurn a raw palette into a professional UI color system with the 60-30-10 rule, semantic roles, interactive states and design tokens. Includes a ready-to-copy CSS variables example and a practical approach to dark mode.
Read guideWhat 4.5:1 actually means, where AA ends and AAA begins, and why #777 on white just barely fails. Covers the thresholds, the most common failures and concrete ways to fix a low-contrast palette.
Read guide