Color guides

3 practical guides on color topics. Each one ends with a free tool that runs entirely in your browser.

• How to Check Color Contrast for Accessibility (WCAG Explained)

  What WCAG contrast ratios mean, the 4.5:1 and 3:1 thresholds for text and UI, how contrast is calculated, and practical ways to fix low-contrast designs.

  3 min read · Contrast Checker

• HEX vs RGB vs HSL: Which Color Format Should You Use in CSS?

  How hex, RGB, and HSL describe the same colors, how to convert between them, and why HSL is easiest for building palettes and hover states.

  2 min read · Color Picker & Palette

• How to Choose a Color Palette for a Website or App (A Simple Method)

  A practical, repeatable way to build a palette: pick a brand color, add neutrals and accents, create shade scales, and check contrast so it's accessible.

  2 min read · Color Shade Scale Generator

← All guides