The color blog

Practical guides on color formats, accessibility, palettes, OKLCH and modern CSS — for designers and developers.

What Colors Go With Sage Green? 20 Palettes (Hex Codes)

What colors go with sage green? 20 designer-approved palettes with hex codes, live swatches and tips for web, branding and interiors.

Build a custom Tailwind CSS color palette with 50–950 shades. Step-by-step using OKLCH, @theme and design tokens for v3 and v4.

Complementary, analogous, triadic, monochromatic and more — every color scheme explained with examples, hex codes and CSS you can copy.

What are complementary colors? A practical guide to opposite colors on the wheel, real hex pairs, and how to use them without the clash.

Learn to create linear, radial and conic CSS gradients — syntax, multi-stop recipes, modern OKLCH interpolation and copy-paste examples.

How to design a dark mode color palette that is easy on the eyes — surfaces, desaturation, elevation and accessible contrast, with CSS.

How to choose a website color scheme using the 60-30-10 rule — pick a base, build harmony, check contrast and ship it as CSS variables.

What colors make brown? How to mix brown in paint (red+yellow+blue), plus how brown works in RGB and CSS hex for screens. With recipes.

What each color means in design and branding — the psychology of red, blue, green and more, with a quick-reference table and palette tips.

OKLCH is CSS Color 4's perceptually uniform color space. Learn what it is, how it beats HSL, browser support, and how to use it today.

Make text readable for everyone: WCAG AA/AAA contrast ratios, the new APCA method, non-text contrast and a fast color-pairing workflow.

HEX, RGB, HSL or OKLCH? A developer guide to CSS color formats — what each does, when to use it, and how to convert between them.