You have a website that already looks the way you want it to look, and now you need pictures for it. That is the exact moment most people discover a small problem: the images you generate come out in whatever colors the model felt like using, and they fight with everything around them. Here is how to close that gap without starting over.
Start With the Palette, Not the Image
Open your stylesheet or design file and write down the four or five colors that actually do the work. Not the whole brand book — just the hex codes that show up on the buttons, the headings, the background, and the accent. If you are working on a site built with an AI image generator, these are the codes you want visible on the screen while you write prompts, because you will be referencing them by name.
Name the colors out loud in plain language: warm terracotta, dusty sage, off-white cream, near-black charcoal. Models handle the everyday words better than hex codes. "Terracotta and sage with a cream background" gets you closer than a string of six-digit values that the model has no way to interpret consistently.
Give the Model a Color Constraint, Not a Color Suggestion
Vague color language is why images drift. "Warm tones" could mean anything from beige to burnt orange. Tighten it up. A prompt that says "flat lay on a cream linen surface, two terracotta objects, one sage green accent, soft daylight" leaves far less room for interpretation than "warm, earthy product shot."
A few habits that consistently help:
- Limit yourself to three named colors per prompt. Four is where things get muddy.
- Say what dominates. "Mostly cream with a small sage accent" produces a different image than "cream and sage."
- Add a lighting word, because lighting changes perceived color more than any other variable.
- If the output drifts too saturated, add "muted" or "desaturated" rather than fighting it after the fact.
The Regeneration Trap
The slow way to match a palette is to generate, look, dislike, tweak, generate again, twenty times. That burns an afternoon and usually produces something you settle for rather than something you like. The faster route is to generate freely in the first pass and treat color as a second pass problem. Get the composition and subject right while ignoring color harmony entirely. Once you have an image whose shapes and framing work, adjust the color separately.
This is one of the more underrated arguments for keeping a small color-editing step in your workflow. Recoloring a finished image takes a minute. Regenerating a hundred times to get the palette right takes an hour and teaches you nothing.
Where Color Consistency Actually Breaks
Three places, in my experience, and all three are predictable.
Product shots with reflective surfaces. Metal, glass, and glossy plastic pick up whatever color is around them. If your brand color is on a nearby object, the reflection will be tinted. Either embrace it or move the object off to the side.
Outdoor scenes at golden hour. Everything gets an orange push. If your palette is cool, shoot for overcast or shade instead. If it is warm, golden hour is free help.
Dark backgrounds. Colored accents on near-black backgrounds read differently on screen than in the preview. Check the actual page, not the thumbnail.
Build a Small Reference Set
Once you land on two or three images that match your palette well, save the prompts. Not as a text file you will forget about, but somewhere you will actually see them the next time you sit down to generate. Your second batch will be faster and more consistent than the first, and your tenth batch will take a fraction of the time because you are no longer re-deriving the same decisions.
Keep a note of which words did the heavy lifting. Usually it is two or three specific terms that carried most of the weight, and the rest of the prompt was decoration. Finding those terms is the actual skill here, and it comes from looking at what changed between a good result and a bad one.
A Quick Sanity Check Before You Publish
Drop the finished image onto the actual page next to real text and buttons. Look at it from a normal viewing distance, and squint. If the image is the loudest thing on the page, it is probably too saturated, and a small desaturation pass will usually fix it. If it disappears into the background, it needs either more contrast or a different crop.
The goal is not images that are individually impressive. It is images that make the page look like one person made all of it on purpose, which is a much harder and much more useful thing to get right. Start with the palette, keep the constraints tight, and let the image generator handle the drawing while you handle the decisions.