Why different shades of colors are desirable on websites

Many brands have a few brand colors, but when it comes to web design and other graphic design, sometimes a greater variety of colors or greater contrast is needed. For example, one might need a light color to serve as a background.

Picking colors that a designer hopes are complimentary to the brand colors or ones that just appear lighter makes for an incohesive final product. An easy solution to this is to have a few shades of each original brand color that are available from the start of the project. This makes the final product look on-brand, and very put together.

This solution allows a web designer to have many more shades to use to create contrast across the site and achieve different effects. Figuring out these colors early on and establishing them in the style sheet for the brand means that the same ones are used consistently throughout the project.

How to get lighter versions of hex colors

When I first saw other designers using different shades of the same colors and I saw how great that looked, I knew I needed to figure out how to do it.

Option 1: Transparency

The first thing I tried was to make the colors transparent. In many applications, a hex code can be modified by adding to characters onto the end that control the transparency. For example, to turn #007674 into a color that is at 75% transparency you just make it #007674BF. 50% transparency is #00767480. 25% transparency is #00767440 and so on.

This works great… if you have a white background and your object is not on top of any others. However, the transparency is not always a desired effect and at times, it’s definitely not wanted.

So I set out to figure out how to get the color that looked the same as my slightly transparent color on a white background, but with no transparency.

Option 2: Generating a new color code

Like any other person, I started out by Googling “How to make hex colors brighter” and “How to make hex colors lighter”. I found an online converter, but it didn’t seem to work well. For example, the lighter version of a dark turquoise I tested became a brilliant sky blue. It did not at all match the same color made more transparent.

So I decided to figure out how to modify the hex codes myself. For this application, the visual effect of making the color transparent on a white background is the one I wanted to duplicate. I found some examples online of various code snippets to lighten colors, but most of them were like the online converter – they didn’t generate the lighter colors that I was looking for.

After a bit of playing around, I settled in with a method that is really combining two colors – in this case my original color and white to exactly replicate the transparent version on the white background.

A shared Google Colab Notebook for accomplishing this

I ended up creating a Google Colab notebook to generate lighter shades of colors. This notebook lets you input the hex color code for the color you are interested in and returns an array of lighter colors.

I’ve made it publicly accessible for others who may be curious about this or wish to easily accomplish the same task. For those that don’t know, a simple explanation of Google Colab is that it lets one write, run and share Python code with the same ease as a Google Doc.

Don’t let that intimidate you. This notebook has instructions and should be accessible even for those unfamiliar with Colab or Python. You don’t need to write any Python code, just follow the instructions for running what is there and type in your hex code in place of the one that’s there in the examples.

I hope this is helpful to somebody else out there!

What if I want know how to get lighter versions of an RGB color?

While I wrote and tested my code in my shared Colab Notebook with hex color codes, there’s actually a good chance it will just run if you put in other types of color codes. Try it out and see what happens. If it doesn’t work, search for “convert RGB to hex” or change it to be for whatever color format you’re starting with. Then use the resulting hex value in the Colab Notebook.

Why image processing matters

Proper image processing is (or should be) a consideration for all websites. Copyright watermarks, proper image sizing and basic photo editing go a long way in making a website look great and function well.

Combating Image Theft

Recently I’ve had a few clients that have come to me with issues with people stealing their images or other content from their sites. This can be an extremely frustrating game of ‘whack-a-mole’ and ultimately content that is made public online can’t be protected 100%. But there are many things that can be done to discourage content theft.

When it comes to images preventing unauthorized usage starts with how the image is handled even before loading it to the site. A simple watermark on the image can go a long way. So can re-sizing the image to be at the lowest resolution actually needed for the intended use. (There are other things that can be done to discourage content theft too, but that’s outside the scope of this post.)

Image sizing

Proper image sizing is also really important. Images on websites should be sized so that they are no larger than they need to be to look great. Any extra resolution means that they just take up extra storage space on the server and (worse) are slow to load.

Basic editing

A little basic editing like cropping an image to appropriate dimensions, or selecting the part of the image that is really wanted is also very useful.

Why automation matters

I work on a lot of websites and that means I’m dealing with photos from a lot of people. There are many processing steps that I could just not bother with and most people would not notice most of the time – a client won’t notice the lack of a copyright watermark until or unless their photo is stolen. I could shrug that off and say it’s unavoidable. Or I could give them the option of adding copyright watermarks and proactively discuss how to prevent issues. (I’m going with the second option here.)

Having automated photo processing steps mean that I can use best-practices every time and save myself time doing it. This also means I can now setup other people who run their own websites with processes to do this too.

The Process

When I started my first blog, I made a process in Photoshop that would do some batch processing to add a watermark and resize images, but it required opening Photoshop to run it and it never did a few of the things I wanted like renaming the images. I’ve also been running Linux a lot more lately and I’m not that interested in paying for Photoshop these days. I was working with an old version that’s just not something I want to stick with. Plus my process was ok for running one website but it wasn’t really what I needed for running several.

(ImageMagick which I’m using now runs on Mac, Linux & Windows which I find to be a huge plus for it.)

My latest goal was to write a script to run on my Linux computer that would do everything I needed start to finish. I wanted it to:

• Unzip a zipped folder of images (while extracting only the images and not the videos)
• Crop them to all be the same aspect ratio
• Resize them to a reasonable size for web images
• Add a watermark with copyright info
• Rename everything to be something like ‘name-1’, ‘name-2’, ‘name’3’, etc. based on a topic name for the folder

The naming scheme is a compromise. Specifically naming each image with it’s own descriptive name can be nice. But it’s also very time consuming. I’m happy to give a whole folder of images the same name with a number. For example a folder of images for my personal blog might get a base name like ‘white-sands-national-park’ if it’s about a trip to White Sands. This is much more efficient and at least I’m not uploading things with file names like 2394839.jpg. Things that don’t get renamed keep those obnoxious file names forever.

ImageMagick + Shell Script

ImageMagick proved to be an ideal tool to make all of this happen. My uses for it barely scratched the surface of what it does. I was able to use it for all of the processing I needed – including creating the .png to use for the copyright watermark. It did come with a little bit of a learning curve (most new technology does), but I’m incredibly pleased with it.

The challenges

Probably my biggest challenge getting everything to work was weird (to me) behavior with images that had orientation data stored with them. Some of the vertical images were not acting as I would expect. For example, I’d test if the height was greater than the width to try to see if it was a vertical image to determine how I wanted to crop the image, but I’d still end up with weird results. When applying the watermark to these images, it ended up on the side of the image as well.

I struggled with these issues for a while before finally finding the magic command to fix the issue:

mogrify -auto-orient file-name

Otherwise, I found the documentation and examples for ImageMagick to be very thorough and mostly easy to navigate. I am extremely happy with it and will continue using it and expanding on my collection of automated processes that use it.

Want help automating image processing for your own site? Contact me.