Extract Color Scheme from Image

Extract color scheme from image with the Color Scheme Stealer

The Color Scheme Stealer lets you extract a color scheme from an image in a few seconds. Drop in a photo, logo, artwork or screenshot and the tool returns 6 to 10 dominant colors with names, HEX, RGB and HSL values and each color's share of the image. You can then assign roles and export code. It is free, runs in your browser and needs no signup.

How to steal a color scheme from a picture

You need one image and about a minute. These steps cover the full workflow from upload to export.

1. Drop an image onto the upload area, click it to browse, or paste an image from your clipboard. Files up to 25 MB are accepted.
2. Wait for the palette to appear under Stolen Color Palette. Each card shows a swatch, HEX code, color name, RGB and HSL values, and a percentage.
3. Move the Number of colors slider between 6 and 10 to get a tighter or richer palette. The default is 8.
4. Choose Sort palette by Dominance, Hue or Lightness.
5. Refine the list: drag colors to reorder them, edit a HEX value, remove colors you do not need or use Add color.
6. Pick the Background, Text, Primary and Accent colors, or press Auto-assign roles, and read the contrast checks.
7. Copy a swatch's HEX by clicking it, then export with the CSS, SCSS, Tailwind or JSON tabs.

Color scheme settings and exports you can control

The tool keeps the extraction simple and gives you control over what happens afterwards. Here is what you get on the page.

• Dominant colors with shares: every color shows the percentage of image pixels closest to it, so you can see which colors carry the image and which are small accents.
• Color names: each swatch is matched to a name from the site's color name library, which makes a palette easier to discuss with a team.
• Editable palette: change any HEX value by typing it or using the color picker. The list holds between 2 and 10 colors.
• Role assignment: map palette colors to Background, Text, Primary and Accent, with a live preview card of a headline, body copy, button, link and tag.
• Quick actions: Copy palette copies all HEX values, Copy CSS copies custom properties, Export JSON and Download PNG save files, and Open palette opens the colors on a custom palette page.
• Share link: the link restores your colors and roles. The image itself is not shared.

How does image color extraction find dominant colors?

Image color extraction groups similar pixels together and reports the center of each group as one palette color. The Color Scheme Stealer starts by splitting the image's colors into evenly spread groups with the median cut method. It then refines each group with k-means clustering in the OKLab color space, where distances match perceived difference better than in plain RGB.

Colors that end up almost identical are merged, so you may see fewer colors than the slider value on a flat or limited image such as a logo. That is expected. A two-color logo has no eight distinct colors to find.

Why the dominant color is not always the most noticeable one

Dominance measures area, not attention. A white page background can take 60 percent of a screenshot while a small orange button is what people remember. Check the percentages, then use the Accent role for small but important colors.

How do you assign background, text, primary and accent colors?

You assign a role by choosing a palette color in each of the four role menus. A color scheme is more useful than a loose palette because every color has a job. Auto-assign roles proposes a starting point: a low-chroma, high-share color as background, the color with the best contrast against it as text, a strong color as primary, and a differently hued color as accent.

Treat the automatic result as a draft. Change any menu and the preview card, the checks and the exported code update together.

Worked example: checking a stolen color scheme for contrast

Suppose a photo gives you the cream #F5F1E8, the navy #1E3A5F and the orange #E4572E. The orange converts to rgb(228, 87, 46) and hsl(14, 77%, 54%). Here is how each pairing scores against the cream background.

The tool picks the better of black or white for the button label automatically, which is why it shows black on this orange. The orange works for a tag outline or icon but not for small body links on cream.

WCAG contrast thresholds used in the scheme checks

The checks follow WCAG 2.x contrast ratios. Under the WCAG 2.2 Contrast (Minimum) criterion, normal text needs at least 4.5:1 and large text needs at least 3:1. Level AAA raises normal text to 7:1.

Interface parts such as button borders and icons fall under Non-text Contrast, which asks for 3:1. The tool reports text on background (AA, AAA and AA large), the button label on the primary color, and the accent against the background (AA text and 3:1 UI). For a full ratio breakdown of any two colors, use the contrast checker.

Color scheme export formats compared

The Color Scheme Stealer outputs the same scheme in four code formats. Pick the one that matches where the colors will live.

CSS output uses CSS custom properties, which you can reuse anywhere with var(--scheme-primary). Roles are included, so you can reference meaning instead of a number.

Tips for a better color scheme from a screenshot or photo

Good input gives a good scheme. These habits help the most.

• Crop first: a screenshot with browser chrome or a white margin adds colors you do not want. Crop to the part whose look you like.
• Start with 8 colors: if two swatches look nearly the same, lower the count. If an important accent is missing, raise it.
• Use sharp, well-lit images: heavy filters, shadows and compression artifacts shift pixel colors and the extracted HEX values with them.
• Sort by Lightness for UI: a light-to-dark order makes it easy to pick background and text colors.
• Test before shipping: a palette that looks good in a photo can fail on a button. Run the role checks, then simulate color blindness to see whether roles stay distinguishable.
• Respect the source: logos and brand identities may be legally protected. Use extracted colors as inspiration, not as a copy of someone's brand.

When should you extract a color scheme from an image?

Extract a scheme whenever an image already holds the mood you want to reuse. Common cases include these.

• Building a website theme from a hero photo or product shot.
• Matching a slide deck, newsletter or social post to a brand image.
• Turning a design screenshot or mood-board image into starting tokens.
• Building a palette from a painting, a place or a fabric for interiors and illustration.
• Documenting the colors of an existing interface for a redesign.

The tool does not read a color at one exact pixel. When you need a single sampled value, use the image color picker. For a deeper breakdown of how much of each color is present, try the dominant color extractor.

Where to use your extracted color scheme next

Once your scheme looks right, copy the CSS and drop it into your stylesheet. If you need each color in another notation, the color converter handles HEX, RGB and HSL, and the Tailwind scale generator turns your primary into a full 50 to 950 scale. To wire the roles into a light and dark theme, continue with the CSS variable theme generator.