Extract palettes from photos, check WCAG contrast, convert color codes, and more — without image uploads or accounts. Image processing is local; page loads, analytics, and ads may still make network requests.
Explore eight photos and their reference palettes, then compare your own image in the Palette Extractor. Click any color to copy it, then see what movie color palettes teach us about color.
Your photos hide palettes too. Extract yours — free, in your browser
Choose a photo for local image processing. For a result you can check yourself, follow the solid-color PNG example in the palette workflow.
Dominant colors with themes, sorting, HEX/RGB/HSL, PNG export, and a local palette library
→ 02Pixel-zoom loupe — click to collect exact colors from any image at original resolution
→ 03Protanopia, deuteranopia, tritanopia, and achromatopsia — side by side
→ 04Map shadows and highlights to two colors — the classic poster look, as PNG
→Fast single-purpose helpers for design and code.
HEX, RGB, HSL, CMYK, and OKLCH with one-click copy for every format
→ 06Tailwind-style 50–900 scales as CSS variables or a config block
→ 07Complementary, analogous, triadic, tetradic, and monochromatic schemes
→ 08WCAG AA and AAA verdicts for any text/background pair, with live preview
→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.
Use the Photo Palette Extractor for a compact summary of an image. It averages groups of sampled pixels and aims to retain contrasting accents, but resizing and filtering can lose tiny details. Use the Image Color Picker when one coordinate matters, such as an opaque logo fill or a product midtone. Extraction describes a scene; an eyedropper reads a browser-decoded pixel. Neither is a substitute for the source file's color specifications.
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.
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.
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.
Short, practical reads on color — no fluff.
Why photos make great palette sources, the 60-30-10 rule, and how to turn five extracted colors into a usable design system.
What 4.5:1 actually means, the difference between AA and AAA, and common contrast mistakes that make text unreadable.
Protanopia to achromatopsia — what each type actually changes, how common they are, and the five rules that make palettes survive all of them.
What each format makes easy, why HSL lies about lightness, and why OKLCH is quietly replacing it in modern design systems.
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.
How to choose chart colors that read correctly: categorical vs sequential vs diverging palettes, lightness-first series, colorblind-safe pairs, and contrast.
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 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.
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.
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 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.