Implementing dark image in light website

So I have the following problem. I need to make
a website for a company who does the effects on parties etc.

They have light colors (blue, gray, white) as their website-colors.
But the problem is, parties are dark and so pictures of their work
exist out of dark colors.

I want to implement some of those images in their website.
And for sure one on the main-page.

But how do you implement a picture on a page if the colors
in the picture doesn’t match the colors of the page/website?

Here a small example:

How would I implement that dark picture in the light design
of the website?


Unless your client pays particular attention to their brand’s colours and aesthetic when commissioning their photography, it’s unlikely you’re going to end up with a set of photos that are in harmony with everything in your design.

Like others have suggested, it’s best to start by discussing a change to the site’s colour palette or the emphasis of those colours. If they’ll allow a change, perhaps a predominently blue palette will work better with dark photos than the light one in your example. Or flipping it around where you build a more harmonious palette to match their existing photos.

However, there’s also something to be said about contrast. The use of bold, dark photos in a layout of lighter colours isn’t necessarily a problem. Think of the multitudes of sites using light palettes and chock full of photos of all kinds: Light, dark, colourful, muted.

Perhaps you don’t need to change anything at all.

If you do an image search for “black and white photography websites” you can see all sorts of examples of high contrast sites with a lot of white space and lighter palettes that are filled with dark photos. Like these:–web-design-layouts-web-layout.jpg

If you’re forced to stick with the palette you have now and you don’t find there’s enough balance between your light and dark elements, try introducing heavier elements into your layouts using the darker colours and shades of your palette, such as:

  • Text that is larger, darker or using heavier weights
  • Thicker line weights in graphics
  • Blocks or bars as dividers, asides, callouts
  • Tinted overlays on the photos for bright text/graphic compositions

Source : Link , Question Author : O’Niel , Answer Author : dugost

Leave a Comment