PFB: Pick a Color, Any Color

Hello again, thanks for joining me.

Today: Color, Color Theory (abridged version), and the Color Picker Tool

PickaColorSmall

First off let’s start with the definition of what color is and how it differs from shade or hue. These are important things to know as each on is similar but fundamentally different from each other.

Color: is a phenomenon of light that allows for the difference of two objects that are identical to appear unique. That is basically a fancy way of saying that light is the source of color. We all know the visible spectrum R.O.Y.G.B.I.V. (red,orange,yellow,green,blue,indigo,violet), these are each of the colors that are visible to the human eye. Light travels to our eyes in waves, and each color has its own wave length. Every object that is around us has the ability to absorb and reflect these light waves; the light waves that are reflected by a certain object give that object its color. As those waves are bounced back to our eyes, our brain translates them into the colors that we can see. The color of all light waves being reflected is white, and the ‘color’ we see when all light is absorbed by an object is black as there is no light reflected. Really it’s all very scientific and I could spend hours with graphs and pictograms describing how and why this happens but I am not a science blog. The basics of what color is, is above, color is light.

Hue: Refers to the variety of different tints of a color within a certain wave length of light. It can be measured in degrees from 0 to 365 which refers to the color wheel. Making a complete rotation will take you through all of the different colors and their hues. EX. Red has a massive degree in which we can perceive it, have you ever walked down a paint aisle and seen the varying hues of each color? Each degree of difference is knows as the hue or tint. Every color in the visible spectrum as a huge number of hues within it. A good example of this is, to use red again as it is my favorite light wave, pink vs. red vs. maroon. Pink is a mixture of red light waves in which a bit of all the other colors are reflected as well therefore making the red appear lighter in hue. This happens as a result of all light combining to make white, in the case of pink just more red light waves are reflected.  Maroon on the other hand is the opposite, some of the red light waves are absorbed by the object making the color appear darker.

Shade: A colors shade refers to how light (bright or pale) or dark (rich or deep) a perceived color is. This is controlled by how much light the object is exposed to, the hue of an object is the same but the object can appear lighter or darker in color depending on how much light is hitting the object.

ColorShadeDemo

As you can see in this picture above a good example of both shade and hue are present. You can clearly see the different hues of red present, in this case it is due to the wood underneath the red stain. The wood has a natural grain and rings of differing color and that translates to the red stain that is applied to it. If this were, say, an opaque paint which doesn’t allow the wood’s grain to be seen than it would appear more flat or uniform in color. The shade of red can be seen on all the ridges of the wood. Where there is more light the color appears lighter red and where there is less light the color appears darker. It is all the same hue of red but the amount of light hitting it gives it a different shade.

Color Theory

Now that we have an idea of what color is we can start learning about color theory. This again is a huge topic and you can spend the better part of your life learning and studying why certain colors work together and other don’t, this is the abridged version to get you started on your path to learning everything you want to know about color.

I don’t think I am capable of explaining this any more clearly, or condensed than graf1x.com so for the first time I’m going to say go to this website for the info. I will provide you with the poster which in it self has an amazing amount of info but all credit for this is due to graf1x.com .

color-wheel-poster

As you can see from the poster it covers some subjects I have already covered in previous tutorials. The RBG vs. CMYK color modes and how they create colors. In the section on Triadic colors, the top one: Red, Yellow, Blue are known as the primary colors. When it comes to mixing colors these three can create any color, this all fairly kindergarten stuff, but still important to color theory. The next set down in the triadic colors: orange, green, and ‘blue violet’ or purple are known as secondary colors. To get these a mixture of two of the three primary colors must be used.

A complimentary and split complimentary color set refers to colors that are directly across from each other on the color wheel. The split complimentary uses the two colors beside the complimentary one. Some great examples are shown above.

Monochormatic color is pretty straight forward in that you use different colors, intensities of light, of the same hue as it shows in the example above.

Color and Emotion

In design we use colors to show emotion and feeling, down in the bottom left corner of the poster you can see a color meaning chart. This one is by no means an extensive one and there have been numerous studies on how color effect’s everything from trustworthiness and sell-ability, to happiness and fear. It is important to think of your target audience when picking colors. Certain colors portray different emotions to different age groups; a great article on that very topic can be found here on, where else, Sherwin Williams website.

Colors means different things to different cultures as well, it is always important to again look at your target audience and see if there is anything you need to consider before picking colors for a project. A good starting resource for cultural color meanings is from the company Xerox. Trust the big names to do the research. I find it quite fascinating that colors can mean such vastly different thing in different parts of the world.

I know this tutorial has been quite a bit of go here and read this first but that’s color theory for you. It is a lot of research and trial and error. There are also so many fantastic resources that you can find online. Through this tutorial I hope to show you a few and spark a flame. One resource I have found that is truly helpful are the design books written by Jim Krause. I have Design Basics Index and will be getting the rest when I can. The one I would like to point out here for this tutorial is the Color Index. You can see in the images below that the book is filling with 1000’s of color combinations that can help you with understanding color theory, I highly recommend this book.

color-index-revised--jim-kr_1284587199

IMG_1 IMG_4 IMG_6

Color Picker tool

Finally on to the more tutorial like aspect of this, the color picker tool in Photoshop. This tool is used a lot in Photoshop for a lot of different tools including the type tool, shape tool, brush tool, and adjustment layers. The main area you can find the color picker tool is on the left hand side of the Photoshop window if you have the tools panel there or through Window>Tools.

ColorPickerMenu

This will be the standard way in which the menu presents itself. The basics of how to navigate this menu are as follows: the small white circle shows whereabouts on the color picker you are, the rainbow bar to the right of the large colorful square is your hue selection and it can be moved via the two arrow slider. The box to the upper right of the hue slider shows your new color and the current one that is selected in your foreground color. Below that are all the confusing letters and numbers, that is what I will sort out for you next.

ColorHSBEach of the letters that have the small circle button beside them are your different views for the color picker. The basic view is set to H which stands for Hue. Below that are S for Saturation and B for Brightness. Setting your color picker to one of these will change the look of the color square on the left. Changing these is really a matter of preference not something that is required.

ColorRGBBelow the H.S.B. we have R.G.B., which if you haven’t guessed it by now refers to Red, Green, Blue or the colors that all computer monitors work with. These three again will change the way the color square looks, each with its own bias to its color.

ColorLabL.a.b. as well refers to the Lab color mode and you can set your color picker to that if you wish. Really you can select any color from any of the different options, some like Hue just make it easier to find the color you are looking for.

ColorHEXCODEThe box at the bottom that has the Hashtag or Pound sign beside it is your hexadecimal color index. Each and ever color and a hex code that allows the computer to figure out which color to display on the monitor. You will see if you move the small white circle around in the color square that this number, as well as the others, changes. The hex code can contain letters as well.

ColorCMYKTo the bottom right your will find the C.M.Y.K percentages, these will let the printer know how much of which ink to use when printing you file. Note it is always better to work with a CMYK file if you know that you are going to be using it for print. There are a few less color options than RGB but the colors that you have selected will be true when printed as printers use CMYK colors.

The Warnings: the color picker menu will also give you warnings that you can either heed or not. The ColorWarningwarnings are useful if you are making a document that you wish to print or use for the web. Both of these have less of a range of colors that they can produce than your computer screen in a display not web-based. If you pick a color that it not good for one or the other or both two small buttons will appear beside the New and Current color box. They look like a triangular caution sign and a cube. The triangular sign warns that the color you currently have selected is not one that can be printed using a CMYK printer. By clicking on the warning, the color picker will move to the closest color that can be printed. Likewise the cube let’s you know that the current color is not web safe, meaning it will appear differently on the web. Most times this is okay, unless you are trying to color manage your document so that everything comes out how you intended it. By clicking on this warning the color picker will pick the closest color that can be displayed on the web.

ColorButtonsObviously I won’t need to tell you what the OK and Cancel button are for but the other two I will explain. The Add to Swatches button will save the color you currently have selected to what is known as a swatch. Swatches are groupings of colors that are related or compiled for ease of access. There are 36 different preset swatches in Photoshop that you can access through Window>Swatches and loading one of the preset sets. These are incredibly useful, especially for web and printing as they are all preset colors that can be printed or work on the web. There are also several sets called PANTONE, these are special inks that have been developed for commercial printing to give more color choices than with CMYK. Working with PANTONE color swatches gives your document all the necessary info that the commercial printer will need to create your vision how you want it to be shown. PANTONE also has special metallic and pastel inks. The color libraries option allows you to open all these different swatch sets directly in the color picker.

That pretty much covers the color picker tool, like I had said before this tool is used in lots of different places throughout Photoshop but the menu is the same not matter what. Try the different ways in which to view the color square by selecting the other options to see which one you like the best.

As always thank you and I hope you learned a thing or two today.

 

 

Credit goes to Obsidian Dawn for the creation the the playing card brushes I used to make my title graphic. Thank you.

 

Advertisements

One thought on “PFB: Pick a Color, Any Color

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s