Website Basics

Remember in grade school when you got to mix paints to create new colors? You’d start by mixing two of the primary colors together, like Red and Yellow, and Orange would magically appear. Then Blue and Yellow, and you’d have Green.

If you were like me, you’d end up mixing up all three primary colors and end up with some murky, frightening, ‘I don’t know how long it’s been in the back of the fridge’ brown. Yuck.

The point of this little trip down memory lane is, I want to talk to you about color for websites. It’s a little different than color for print, or for painting, and that tends to confuse people used to working with paint and ink.

Color for print

When I was in 6th grade, we did this cool experiment where we took black India ink and wicked it up a piece of paper that resembled a bit of coffee filter. As the ink slowly spread up this filter paper, it separated out into the colors of the rainbow. This way, we could see that the ink is made by blending different dyes together to make black.*

One of the best things about hanging around with graphic designers is all the cool things I get to learn. One of these things relates to color in print.

In the printing industry, the inks used are CMYK, or cyan, magenta, yellow, and black. Cyan is roughly blue, magenta is roughly red. When you combine the inks, you get the same sort of effect that you get when you combine paint colors. Here is a graphic I created in Photoshop to illustrate how CMY will blend. Note that the accuracy of the colors will not be perfect because your monitor hasn’t been calibrated, but it will be pretty close.

This is how your office printer works. It uses these 3 colored inks plus black to produce your color print outs. But that’s not how we create color for your website.

Color for the web

So now that we understand mixing red and yellow and getting orange, let’s make a huge left turn. When it comes to color for the web, you can pour that concept right down the drain with all that non-toxic, eco friendly printer ink.

Color for the web is designed for computer monitors, not paper.

Computer monitors work with light, not dye. Let’s head back to grade school to figure this out. (Boy, I’ll bet Mr. Olsen would be surprised to see his science lessons here on the old interwebs in the 21st century!)

Rainbows!

Think back to science class and your first encounter with a prism. Remember how it created a rainbow when you placed it in the sunshine? If you’re having a hard time remembering what a prism is, go check out the cover of Pink Floyd’s “Dark Side of the Moon” and you’ll see a prism and the rainbow. Let’s talk about what’s going on with that prism.

White light is made by combining all the different colors of light together. Plus some colors you can’t see like infrared and ultraviolet. Since we humans can’t see infrared or ultraviolet, we’ll ignore those for now.

When you combine all the colors of ink together, you get black but when you combine all the colors of light together you get white.

That should blow your mind. Or maybe it’s the Pink Floyd. Either way, color on a computer screen is completely different than color on your printer.

If you look very very very closely at a computer screen or a television screen, you’ll see that it’s actually made up of lots of little colored dots, called pixels. These dots are red, green and blue. When all three of them are shining at maximum brightness at the same time, you get white on your screen. When all three of them are off, you get black.

RGB = Red-Green-Blue

We’ll pretend that these little dots are individual LEDs, like the little blinky light on your TV remote. If you take a red, a green and a blue LED and put them very close to one another and make them very small, it’s very hard to notice that there are 3 LEDs unless you look with a magnifying glass. What you see instead is one point of light that is the color that results from combining the three LEDs.

These LEDs are operated by a digital dimmer switch. Each LED can vary how bright it is shining. In fact, it has 256 levels of brightness that goes from 0 (off) to 255 (full brightness). Each of these 3 LEDs is controlled separately, so the red one can be off while the blue one is partially on and the green one is fully on.

Now we can specify any color by how bright each of those LEDs should be shining. This is the RGB color and it looks like this:

rgb(255, 255, 255)

That color, by the way, is white. It means that all three LEDs are fully bright. rgb(0, 0, 0) means that all of the LEDs are off and we will get black.

Combing light

So what happens when you start combining light?

When we combine Red and Green, we get yellow. Red (255, 0, 0) and Green (0, 255, 0) combined create Yellow (255, 255, 0). Blue (0, 0, 255) and green (0, 255, 0) create aqua (0, 255, 255), red(255, 0, 0) and blue(0, 0, 255) create magenta (255, 0, 255).

In the code for a website, you might see the color typed out

rgb(236,115,67)

What is HEX?

RGB can be written another way, called HEX. RGB is what’s called a base-10 number, which is what we are used to counting in. All of the numbers are from 0 to 9. Hex is written in hexadecimal, which is from 0 to 15: 0 1 2 3 4 5 6 7 8 9 A B C D E F. Don’t worry if you don’t totally understand that, is pretty geeky stuff. The reason I mentioned it is because you will see those first 6 letters of the alphabet used in hex color codes. The rgb scale of 0 to 255 is the same as a hex scale of 00 to FF. You can go look it up, but just trust me on this. I paid a lot of money for an engineering degree to be able to count in hexadecimal and I still end up using an online hex converter.

Ok, so RGB is 3 sets of numbers, and so is hex. Hex just isn’t written with the commas. And it starts with a hash/pound sign/hashtag or whatever the kids are calling it these days.

#EC7343 is the same color as rgb(236,115,67).

Programmers use hex for a lot of reasons, but mostly it’s because it’s shorter and faster to write. This is the format you’ll most likely see and use. When your web designer asks for your logo color, they don’t want “red” “chartruese” or “sky blue”, they want the hex code.

What is RGBA?

You may have seen a color written as an rgba and wondered what the extra letter is all about.

rgba(236,115,67,.4)

RGB is for a solid color, but sometimes, we want things to be semi-transparent so that you can see an image sort of show through. You’ll see this fairly often when there is text placed over a big image. If the text is black and the image is fairly dark, it can make the text difficult to read. The designer will often place a semi-transparent background for the text that will make the text more visible. The ‘A’ in RGBA specifies how transparent the color will be, from 0 (fully transparent) to 1 (solid color).

Here you can see what it would look like with different transparencies.

In Photoshop and other graphic design programs, this is the equivalent of a layer transparency, but in web code. It’s incredibly useful for hover effects, making sure that text is readable over any image, making a bit of text pop on an image. You aren’t limited to black and white, either. Any color can be made with rgba.

RGBA is also handy when you want to lighten a color without having to open up a color chooser to figure out the lighter version of the color.

RGBA background color at 20%. rgba(236,115,67,.2)

RGBA background color at 40%. rgba(236,115,67,.4)

RGBA background color at 60%. rgba(236,115,67,.6)

RGBA background color at 80%. rgba(236,115,67,.8)

RGBA background color at 100%. rgba(236,115,67,1)

The most common format you will use is HEX

When you are selecting colors in your theme customization window, you will likely be dealing with hex color codes. Some theme developers will add the # sign for you and others will leave you to add it. If you are having issues with the color code not working, check to make sure if you should be adding the # yourself. This is usually the biggest problem encountered.

Now that you understand the difference between color for print and color for websites and you know the different color code formats, you are well equipped to handle the theme customizer. I another post, I’ll show you how to find the right color, modify that color to lighten and darken it, and to create a color palette based on it.

Questions? Just leave a comment below.

* You can actually do this experiment with a black marker and some coffee filter paper by following the instructions here. Fun for the whole family.