One way to make your website more professional is to edit images so that they’re more cohesive. This helps create unity, consistency and coherence in your design.
In this article, I’ll show you how to improve your images by adjusting color temperature and tint.
First, take a look at these unedited stock images I selected for a recent project.
You’ll notice that they don’t quite hang together color-wise. The first image is mostly green, the second is more neutral/green and the third has a magenta tone.
When viewed on a single page or across the website, inconsistent images like are messy at best and chaotic at worst.
Now take a look at the images after adjustment.
While not perfect, these images now feel like they belong together. When viewed on a single page or across the website, they’ll create a sense of harmony and order.
How to adjust your images using Temperature and Tint.
Adjusting temperature and tint is as easy as clicking and dragging a slider.
First, pick out a reference photo which has the color temperature you’re going for.
Then, use a desktop tool such as Adobe Lightroom or an online tool like Fotor to adjust the Temperature and Tint. I’ll use Fotor in this example since it’s a free tool.
Temperature adjusts an image on the blue – yellow spectrum. So moving the slider left makes the image cooler (more blue), while moving it right makes the image warmer (more yellow).
Tint adjusts an image on the green – magenta spectrum. Increase green to make an image cooler, increase magenta to increase warmth.
Use your eye to adjust Temperature and Tint to achieve the desired look.
Hue, Saturation and Lightness (Luminance)
If adjustments to Temperature and Tint don’t quite get the results you want, try adjusting Hue, Saturation or Lightness, often abbreviated as HSL.
In this example, I might reduce green’s saturation and increase blue’s saturation. This will make the photo cooler and more like the other images.
Experiment with these settings, and let your eye be your guide.