How to Match Website Images to Your Color Palette

Step 1: Choose your color palette.

A balanced color palette needs to include light colors, dark colors, and medium colors. Ideally for a brand we choose 3-5 colors max and including neutrals. Often times, the light and dark tones are simply varying shades of the same color. When it comes time to make the website color palette, we often select only 2-3 of those brand colors so that we can keep things simple and bring in the additional colors through imagery.

Here are a few example website color palettes:

If you are unsure of what color palette to use on your website but you have a few photos you want to incorporate then you can generate a color palette from your photos using the Canva Color Palette Generator. You can upload the image you want to utilize and it will automatically generate a color palette for you with 4 colors from the image along with their color code in hex format. You can also use Adobe Color to not only extract a color palette from a photo but to also create additional palette options from a chosen base color from your photo including monochromatic palettes, complimentary palettes, shades of the same color family and more.

Step 2: Source Images & Match

There are a few ways to make sure images match your color palette, but in general it’s safest to pick photos that include one or multiple of your colors. When using photos without your brand colors it helps to surround them with brand colors so they fit in. If you are having a hard time finding images that go well together, let us know, and we can always apply editing presets during our design phase which helps unify them regardless of style/color (scroll down for an example).

Our favorite sources for images are unsplash.com (all images free) and adobestock.com (free 10 images with trial).