Brand palette builder

Extract colors from a product photo, refine five swatches, and try them in a simple ad preview.

Photos are processed locally in your browser. No upload or generation credits.

1. Choose a product photo

SEREIN is a fictional concept brand. The example is sampled from its photo.

2. Refine five colors

Choose a new role to swap the two colors.

#B87520

Use

#F3EBDD

Use

#D9AD69

Use

#30251E

Use

#8B7159

Use

Live color preview

THE COLLECTION

A little everyday beauty.

Choose a photo to preview your product.

A simple color study for your next campaign.

Text / background contrast 12.59:1

AA: passes for normal text.

AA thresholds: 4.5:1 normal text; 3:1 large text. This checks only the chosen text and background pair.

View / manually copy CSS

:root {
  --brand-primary: #B87520;
  --brand-background: #F3EBDD;
  --brand-accent: #D9AD69;
  --brand-text: #30251E;
  --brand-secondary: #8B7159;
}

Take your palette into your next creation: Open canvas