Photo-to-color-palette tool

How to use the photo-to-color-palette tool

Turn a room inspiration photo into a usable color palette for walls, furniture, textiles, and accents. The tool extracts prominent colors, lets you sample areas from the photo, and suggests a 60/30/10 room split.

1. Choose an inspiration photo, or drop, paste, or select a supported image.
2. Review the extracted colors, their approximate image share, names, and color values.
3. Click an area of the photo to add a sampled color. Each sample averages a small neighborhood around the click.
4. Use the dominant, secondary, and accent selectors to assign colors to the 60/30/10 room roles.
5. Copy HEX, RGB, or HSL values, or use the available export controls for the palette.

What to enter

Choose an inspiration photo

Use a JPEG, PNG, WebP, AVIF, or GIF up to 20 MB. The image is processed on your device.

Use another image

Replace the current photo with another single image and create a new palette.

dominant

Choose the color for 60% of the room, such as walls and other large surfaces.

secondary

Choose the color for 30% of the room, such as furniture, textiles, and a rug.

accent

Choose the color for 10% of the room, such as cushions, art, and accessories.

Example: Build a palette from a living-room photo

Upload a JPEG of a living room you like. The tool shows a palette of the photo’s prominent colors, with each color displaying a rounded percentage, a name, HEX, RGB, and HSL values. Click a blue cushion in the photo to add a sampled color; the tool averages the pixels in the surrounding area rather than using one single pixel. In the room palette panel, keep the calmer common color as dominant for the walls, use a related color for the sofa and rug, and assign the blue sample as the accent. You can then copy the color values or export the palette.

How the photo palette is created

The image is prepared locally, with analysis limited to a maximum dimension of 1,600 pixels. The tool extracts up to six prominent swatches from the image, including vibrant, muted, dark, and light variations. Similar shades with a color difference value below 8 are merged, then the results are sorted by how much of the image they cover. The displayed percentage is rounded to a whole number. When you click the photo, the tool averages an up-to-5×5 pixel neighborhood around the click, skips pixels with alpha below 16, converts the channel averages to a HEX value, and avoids adding the same picked HEX value twice. Up to 12 picked colors are retained. The room suggestion assigns colors to dominant, secondary, and accent roles in a 60/30/10 split. By default, the calmer of the two most common colors is used for the walls, while the most saturated color is used for the accent.

Reading the results

The Palette panel shows the extracted colors in a color strip and a list. Each entry includes a rounded share of the image, a color name, its extraction source, and copy controls for uppercase HEX, RGB, and HSL values. The room panel shows a 60/30/10 strip and a simple room preview. Change any role with its selector; the same color can be selected for more than one role if needed. Picked colors appear separately and can be removed. Available palette export controls can create a PNG strip or provide CSS and JSON palette data.

Limitations and common mistakes

• A clicked color is an average of a nearby area, not a single exact pixel, so nearby details can affect the result.
• Lighting, shadows, reflections, image compression, and screen settings can change the extracted colors.
• The 60/30/10 arrangement is a room-planning suggestion, not a paint match or a requirement for how a room must be decorated.
• Screen colors differ from physical paint and materials. Test real samples before making a final selection.

Frequently asked questions