Guides & Articles
ScanHue is a set of browser-based color tools, and these guides are the reasoning behind them. Every article answers a question that comes up while you are actually picking colors: which format to work in, how far a tint can travel before it stops being readable, why a palette that looked balanced in a mockup falls apart on a dark background, and what a contrast number really certifies.
They are written to be used next to the tools rather than instead of them. Where a guide describes a calculation — a contrast ratio, a 50–900 scale, a color vision simulation — you can run the same calculation on your own colors in one click, and every example we publish is a value we measured rather than an approximation. Nothing you upload leaves your browser, so the examples in these articles were produced the same way yours will be.
The three groups below run from vocabulary to application. If you are new to the subject, the fundamentals set explains the relationships that everything else depends on. The accessibility set covers the thresholds that are not a matter of taste. The practice set applies both to specific surfaces: interfaces, charts, dark themes, photographs, and film frames. How these guides are researched, verified, and corrected is documented in our editorial standards.
Start here — color fundamentals
The vocabulary and the relationships. Read these first if you are building a palette from scratch.
-
How to Choose a Color Palette from a Photo
Why photos make great palette sources, and how to turn five extracted colors into a usable design system.
-
Complementary vs Analogous vs Triadic: Color Harmony Basics
Complementary, analogous, triadic, split-complementary, tetradic, monochromatic — what each color scheme actually does, when to use which, and the 60-30-10 rule that keeps them from turning into a rainbow.
-
Tints, Shades, and Tones: What’s the Difference?
Tint adds white, shade adds black, and tone adds gray. Learn how each changes a hue and where each belongs in a practical 50–900 color scale.
-
Warm vs. Cool Colors: How Color Temperature Shapes a Palette
Red, orange, and yellow feel warm; blue, green, and violet feel cool. Learn why temperature is relative, what the Kelvin paradox means, and how to balance warm and cool in one palette.
-
HEX vs RGB vs HSL vs OKLCH: Which Should You Use?
What each format makes easy, why HSL lies about lightness, and why OKLCH is replacing it in modern design systems.
Accessibility
Color choices that still work for readers with low vision or color vision deficiency, and the numbers that decide it.
-
WCAG Contrast Ratios Explained: AA vs AAA
What 4.5:1 actually means, the difference between AA and AAA, and the contrast mistakes that make text unreadable.
-
Color Blindness Explained: The 4 Types Designers Should Know
Protanopia to achromatopsia — what each type changes, how common they are, and the rules that make palettes survive all of them.
Palettes in practice
Applying a palette to real work: interfaces, charts, dark themes, and images.
-
How to Pick an Exact Color from Any Image
Learn how to sample an exact pixel color from an image: choose a clean source, zoom past anti-aliasing and compression, compare nearby readings, and validate the value.
-
The 60-30-10 Rule: Balance Any Color Palette
The 60-30-10 rule gives your dominant color 60% of a design, a secondary color 30%, and an accent 10%. Learn why the ratio works, how to map it onto UI, and when to bend it.
-
Dark Mode Color Palettes: What Actually Works
Dark mode is not an inverted light palette. Why #121212 beats pure black, how far to dim text, when brand colors need lightening, and why contrast has to be re-measured in dark themes.
-
Data Visualization Color Palettes: Categorical, Sequential, Diverging
How to choose chart colors that read correctly: categorical vs sequential vs diverging palettes, lightness-first series, colorblind-safe pairs, and contrast.
-
What Is a Duotone? Design History + How to Make One
Duotone reduces a photo to two inks — one for shadows, one for highlights. Where the technique came from (halftone printing to Spotify), how the effect works, and how to make one free in your browser.
-
What Movie Color Palettes Teach Us About Color
Learn how movie color palettes use temperature, value, proportion, repetition, and accents—and how to turn a film frame into a usable design system.
-
How to Choose a Neutral and Gray Color Palette
Every gray carries an undertone. Learn how to choose between warm, cool, and true grays, build a usable neutral scale, and pair it with your accent palette.
Use the tools
Pull colors out of an image with the Photo Palette Extractor or the Image Color Picker, expand one color into a full scale in the Shades & Tints Generator, build a scheme in the Color Harmony Generator, then verify the result in the Contrast Checker and the Colorblind Simulator. Ready-made starting points live in Color Palettes by Theme.