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.
Reference guides
Color Models Explained
What each color model actually measures, where each one is the right choice, and why the same color has six different sets of numbers.
PalettesColor Harmony
The classic harmony schemes as hue arithmetic, what each one feels like in a real interface, and how to keep a palette from falling apart.
AccessibilityAccessible Color
How contrast ratio is calculated, what AA and AAA actually require, and how to design for color-vision deficiency without losing your brand.
Front-endColor in CSS
Every way CSS lets you write a color, when custom properties beat hard-coded values, and what the newer color functions change.
What each guide covers
Color models
How HEX, RGB, HSL, HSV, CMYK and LAB describe the same color in different ways, why HSL lightness is not perceived brightness, and which model to reach for when.
Accessible color
How a contrast ratio is calculated, what AA and AAA require for text and for UI components, and why passing contrast does not by itself mean color-blind readers can tell your states apart.
Palettes & harmony
Complementary, analogous, triadic and split-complementary as plain hue arithmetic — plus the saturation and lightness decisions that actually determine whether a palette works.
Front-end color
Every CSS color format, custom properties for theming and alpha, how gradients interpolate, and what color-mix() and OKLCH change.
Latest from the blog
Reading Brand Colors From a Screenshot Accurately
Anti-aliasing, JPEG artifacts, hidden gradients, transparency and color profiles all quietly corrupt a sampled color. How to spot each one and get a value you can trust.
PalettesExtracting a Usable Palette From a Photograph
Automatic extraction gives you the colors covering the most area — which is rarely the palette an interface needs. How to turn six photo swatches into three working colors.
Design SystemsDesigning a Dark Mode Palette, Not an Inversion
Why pure black is the wrong background, how elevation replaces shadow, and the saturation adjustment that stops brand colors vibrating on a dark surface.
Design SystemsNaming Colors in a Design System
Why gray-darkest is a dead end, how the two-layer primitive and semantic token pattern works, and what it takes to change a brand color in exactly one place.
Data VisualizationChoosing Chart Colors That Tell the Truth
Categorical, sequential and diverging scales, why rainbow colormaps mislead, how many series colors a reader can hold at once, and the contrast rules that apply to marks.
CSSCSS Gradients That Don't Turn Muddy in the Middle
Why interpolating between opposite hues passes through gray, three ways to fix it, the transparent-fade bug, and what causes visible banding on large gradients.
Frequently asked questions
Are the color guides free?
Yes. Every guide, article and tool on ColorDetector is free to use, with no account required.
Do I need design experience to follow them?
No. Each guide starts from first principles and builds up, with worked examples and links to the interactive tools so you can try each idea immediately.
Where should I start?
If you are new to working with color, start with Color Models Explained — it covers why the same color has six different sets of numbers. If you are fixing a specific problem, go straight to Accessible Color or Color in CSS.
What is the difference between the guides and the blog?
The guides are evergreen references we keep updated as standards change. The blog covers narrower, more situational problems — reading a color out of a screenshot, building a dark mode palette, choosing chart colors.
Can I use what I learn commercially?
Yes. The guides are free to read, and any color, palette or code snippet you generate with the tools is yours to use in personal or commercial work.
Ready to put it into practice?
Open an image in the detector and read its exact colors, or jump straight into a generator.