Steal your homepage palette from a great photo
A worked tutorial: pick the right photo, extract a palette, and turn it into homepage sections with readable text and one clear accent.
Choose a photo with range
The photo is the palette, so choose like a colorist: you want a clear dominant tone, a secondary, and something dark for text grounds. Landscapes with sky, land, and shadow do this naturally; monochrome golden-hour shots collapse to one hue and leave you stranded. If the brand already uses photography, pick the hero image — the palette will then match the site's imagery for free.
Extract and take the top four colors by coverage. Immediately discard near-duplicates (two blues within a few degrees merge into one) — you want range, not a histogram.
Map colors to homepage sections
Assign before you decorate: darkest extraction becomes footer and text ink, the dominant mid-tone becomes section backgrounds and cards, the lightest becomes page ground, and the highest-chroma color becomes the accent for CTAs and highlights. A homepage reads as designed when each section's background was chosen, not decorated.
Generate proper scales from the two most-used colors so buttons get hover states and cards get borders — raw extraction points cannot do that work alone.
Protect readability over mood
Photo palettes fail at text first: mid-tone mood colors at 2:1 pretending to be text colors. Every headline and body pair gets measured, and anything under its threshold gets darkened without apology — mood lives in backgrounds and imagery, legibility lives in type, and the two budgets are separate.
The accent needs the same audit wherever it touches text. Dusty photo accents make lovely illustrations and terrible links; split the roles (vivid for decoration, darkened step for communication) and the palette keeps both its soul and its function.
Tip
Overlay test: place each text color directly on the photo at low opacity. If it survives the busiest part of the image, it survives anywhere.
Related free tools
Want to apply this right now? Open the color palette generator and try it with your own brand color — free, no sign-up.