Worked palette example
A photo-inspired collection needs deliberate text and surface choices.
Colors here are examples, not an automatic accessibility certificate. Test every foreground/background pair before using these values for text.
Open this example in the eight-role Theme Studio →Exact samples and dominant colors solve different problems
A single pixel gives you an exact value at the point you choose; a dominant-color extractor summarizes larger regions. When a photograph contains shadows, texture and highlights, those approaches may produce very different results. Use exact picking for a particular brand shade and automatic extraction when you want the overall atmosphere.
Use the magnifier deliberately
Upload a JPEG, PNG or WebP image, move over the image and click to lock the desired pixel. The pointer preview should not overwrite the selected swatch. Save several picks from different parts of the photograph: one dark, one light and two or three candidate accents. Avoid sampling near JPEG compression artifacts or blurred edges if exact visual identity matters.
Watch for transparency and compositing
Transparent PNG pixels may have RGB values that are not visible until layered over a background. An RGBA value captures opacity as well as color. When exporting a theme, choose a real background for the final interface rather than relying on transparent pixels alone. Blended colors can change substantially on light versus dark surfaces.
Map inspiration to purpose
The most saturated sampled pixel often makes a useful accent, not a large background. The lightest shade might work as a surface, while a sufficiently dark sampled shade can become text. The Image-to-Theme workflow suggests eight roles, but you should still review its choices and edit values when text contrast is too weak.
Finish with a device preview and code export
Preview your palette on a website, a dashboard, a mobile application and a shop before copying CSS. Inspect small body text and buttons—not only headlines. Keep the original photograph as mood inspiration, not a guarantee that every pixel will become a usable interface color.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio