Color guides
Practical articles for people who work with color in design, web development and marketing.
- Color codes explained: HEX, RGB and HSLLearn what color codes are, how to read HEX, RGB and HSL, how to convert between them and when to use each format in CSS and design.
- RGB vs CMYK: differences and when to use eachWhy do screen colors change when printed? See the difference between RGB and CMYK, how to convert files and avoid surprises at the printer.
- Color theory and the color wheel: a practical guidePrimary, secondary and tertiary colors, hue, saturation and lightness, warm and cool colors: the essentials of color theory with examples.
- Color harmony: 6 schemes for combining colorsComplementary, analogous, triadic, tetradic, split-complementary and monochromatic: how each color harmony works and when to use it.
- Color psychology in marketing and brandingWhat each color communicates, how culture shifts its meaning and how to choose colors for brands, ads and buttons based on evidence.
- How to choose a color palette for your websiteStep-by-step guide to building a website palette: primary color, neutrals, states, the 60-30-10 rule, dark mode, contrast and CSS tokens.
- Color contrast and accessibility: a WCAG guideUnderstand the WCAG 2.2 contrast criteria, AA and AAA levels, how to measure contrast ratio and how to fix colors that fail.
- How to find the color of an image (5 methods)Find the HEX or RGB code of any image: online tool, browser eyedropper, Photoshop, Figma and mobile, step by step.
- Modern CSS colors: oklch(), color-mix() and moreA guide to the new CSS color functions: oklch, oklab, color-mix, relative colors, light-dark() and how to migrate a HEX palette safely.
- Color blindness and inclusive design: adapting colorsTypes of color blindness, problematic color pairs and practical techniques to build interfaces, charts and maps that work for everyone.