Color Guides
Clear, practical writing on how color works — and how to use it well. Each guide pairs with a free tool so you can apply the idea immediately.
01
Start here
Guide
Understanding HEX, RGB & HSL
How the three color models relate.
GuideWCAG Contrast, Made Simple
Hit AA and AAA without guesswork.
GuideBuild a Tailwind Palette
One brand color to a full scale.
02
Guides by topic
Color models
How HEX, RGB, HSL, HSV, CMYK and LAB describe the same color in different ways — and when to use each.
Accessibility
Contrast ratios, WCAG AA and AAA, and designing for color-vision deficiencies without losing your brand.
Palettes & harmony
Complementary, analogous and triadic schemes, and how to turn one color into a balanced set.
Front-end color
Exporting CSS variables, Tailwind scales and Bootstrap themes that stay consistent across a project.
Ready to put it into practice?
Open an image in the detector and read its exact colors, or jump straight into a generator.