A photo can supply inspiration, but a production palette needs decisions: which colors represent the source, which jobs they perform, how their light and dark variants behave, and whether people can read the final combinations. ScanHue keeps those steps separate so you can measure each one instead of guessing.
1. Choose the kind of evidence
Use the Photo Palette Extractor when you need a compact summary of a whole image. It groups repeated image colors and preserves smaller accents that a simple average would lose. Use the Image Color Picker when one exact pixel matters, such as the center of a logo fill, a rendered button, or a product midtone. These are different questions: extraction describes a scene, while an eyedropper reports one coordinate. Starting with the right question prevents an accidental edge pixel or a dominant background from becoming your entire palette.
2. Give every color a role
A row of attractive swatches is not yet a system. Decide which value covers the largest surfaces, which one creates structure, and which scarce accent signals the action that matters. Add a near-white and near-black that share the palette's temperature when the source photo does not provide usable neutrals. The practical photo-to-palette guide shows how to assign those roles, while the 60-30-10 rule explains why unequal coverage produces clearer hierarchy than five colors used at equal strength.
3. Build only the variants you need
Interfaces usually need more than one strength of a hue: a light selected surface, a stable border, a base action, a pressed state, and a deep text color. Generate those candidates with the Shades & Tints Generator, then keep the steps that have a named job. Use the Color Harmony Generator when the system needs a related second hue, and the Color Code Converter when design or code calls for HEX, RGB, HSL, CMYK, or OKLCH. Converting notation does not change the color; adjusting its coordinates does.
4. Verify the combinations that ship
Test actual foreground and background pairs in the Contrast Checker; do not assume a vivid hue or a dark theme creates readable contrast. Then inspect the palette with the Colorblind Simulator and make sure status, selection, and chart meaning also use labels, icons, position, or patterns. Finally, place the colors in a real component rather than judging isolated swatches. A heading, paragraph, button, border, focus state, and error message expose hierarchy problems that a palette strip cannot. The result is a smaller, explainable set of colors with evidence behind every role.
Guides (10) — Practical color guides from ScanHue.
Recent articles
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.
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.
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.
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.
