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: https://ibb.co/n2uufb

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

  • 1
    You could make a gradient to white around the edge of the image. This would create a smooth transition between images and rest of the website. – Aziraphale Oct 11 '17 at 7:55
  • Are you asking if you should alter the website's colour scheme to match the photos? I think that's something only your client can answer. Have you had a discussion with them about it? Without seeing the website it's practically impossible to even give an opinion. – Billy Kerr Oct 11 '17 at 10:11
  • Have you considered changing the background color of the website? Is best suited for the theme 'party' – Peacekeeper Oct 11 '17 at 18:50

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:



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
| improve this answer | |

Layer the same venue in full daylight and in the party-time. Let there be a small slice of the night visible at the edge. Hint somehow "Move the curtain and see the party". Let hovering the mouse move the silent day off and bring the night and full sparkle into the foreground. Have an animated lightshow+music, preferably as full-screen. Moving the mouse off returns the normal silent and light scene. The same happens, if there's no activity or the page is scrolled enoughly off.

| improve this answer | |

Put all those images in a pop-up carousel, of which the background is dark. If you can’t change the environment of the page then a pop-up gives you the opportunity for a new environment.

| improve this answer | |
  • He writes that he for sure wants one on the main page, so a carousel won't help. Also he needs something to open up the carousel, which should be one of the images, so the question still remains, how to implement dark images on a light themed website. – Anders Dec 13 '17 at 11:48
  • I don't know why one can't have a carousel on the main page or why something needs to open the carousel. See what I've included. myeasywebaddress.com/~DEV/carousel.jpg – Randy Zeitman Dec 14 '17 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.