If you can remember as far back as January, one of my goals for 2013 was to learn more about color and share some of what I learn with you. I’ve talked before about how I feel my skills working with color are lacking and I said at some point this year I would grab a few books about color with the hopes of changing that.
One birthday, a somewhat generous brother, and quality service from Amazon later, and an assortment of books (including a few specifically about color) are here waiting to be read. Thanks David.
I’ve finished reading one of the color books, Design Elements: Color Fundamentals, and thought I should start sharing. I want to start with how we describe colors in part because it’s the beginning and in part because it led to some clarity in how I understand color.
How We Describe Color
There are 3 primary ways to describe a color and since the book added it, I’ll add a 4th way to describe color as well.
- Hue — another word for color
- Saturation (chroma) — the intensity or purity of a hue
- Lightness (value) — the relative degree of black or white mixed with a given hue
- Temperature — the perceived warmth or coolness of a color
Let’s dig a little deeper into each.
Hues are colors and what hue we see is dependent on the wavelength of light being reflected or produced. I doubt I need to tell you what a color is and since color and hue are synonymous you should know what a hue is as well. One thing I will remind you about is we all perceive color differently. The hue you see may not be the same hue I see.
Saturation refers to how pure or intense a given hue is. 100% saturation means there’s no addition of gray to the hue. The color is completely pure. At the other extreme a hue with 0% saturation appears as a medium gray. The more saturated (closer to 100%) a color is, the more vivid or brighter it appears. Desaturated colors, on the other hand, appear duller.
How saturated a hue appears also depends to a degree on what colors it’s next to. A 50% saturated hue placed next to a 25% saturated hue will appear more vivid than were the same hue placed next to a 75% saturated hue.
Lightness measures the relative degree of black or white that’s been mixed with a given hue. Adding white makes the color lighter (creates tints) and adding black makes it darker (creates shades). The effect of lightness or value is relative to other values in the composition. You can make a color seem lighter by placing it next to a darker color.
The greater the difference in value between elements, the greater the contrast between them. Because of this, lightness is a good way to show contrast and indicate hierarchy among elements. About 7 steps of lightness is the maximum variation the human eye can discern. Beyond that it becomes hard to distinguish the differences.
Temperature is the perceived warmth or coolness of a color. Warm colors are red, orange, and yellow, while cool colors are green, blue, and violet. Somewhere in the green and violet spectrums the temperature changes between warm and cool.
How the eye recognizes color temperature can change based on the source of light. For example the actual temperature of a computer monitor can affect the perceived color temperature.
Warmer colors tend to advance into the foreground of a composition while cooler colors recede into the background. Also like saturation and lightness, temperature can be relative. Place a warm color against a warmer one and the initial color will appear cooler than if it were placed against a cool color.
Color Harmony
In working with color our goal is to choose a palette of pleasing color combinations (except for those times when a displeasing combination complements the message better). We’re trying to achieve some kind of color harmony.
Color harmony can be subjective. What works for your eye may not work for mine. Principles of color theory aim to reduce the subjectivity by offering guidelines that help us find pairings and groupings of colors more likely to work well.
For example one of the main principles holds that the eye is always seeking balance and equilibrium in color that lead it to arrive at neutral combinations like when a hue is combined with it’s opposite or complement. It’s one reason we often see after-images of a different color (but with the same saturation and lightness) when staring at any one color for too long.
Color theory doesn’t always lead to predictable results. Sometimes theory and practice don’t quite mesh, which means we need to develop our eyes for color and experiment with different combinations of hue, saturation, and lightness.
The Disconnect in Color Theory and Color Practice
Like I said above, something clicked for me in reading Color Fundamentals. We describe color in terms of hue, saturation, and lightness (HSL), yet we typically set color values on the web using hex values and to a lesser extent RGB values. Wouldn’t it make more sense to work with the system that better describes color?
Note: HSL is not the same as HSB (hue, saturation, brightness) or HSV (hue, saturation, value) found in most color tools.
Hex and RGB are really two versions of the same thing. Each provides 256 possible values for how much red, green, or blue is in a given color. HSL works differently. There’s no easy way to glance at something like rgb(63, 69, 146) or it’s hex equivalent #3f4592 and easily know it’s 40% saturated or hsl(236, 40, 41).
If you’d like to see the math involved in making the conversion have a look at any or all of the links below
Why is that? Why is there a disconnect in how we attempt to understand color and how we attempt to use it? If anything HSL is the more intuitive system as it actually describes the colors we see and fits with color theory.
I realize color skills come from developing a critical eye for colors and asking questions about why something works or doesn’t work. And it’s about answering those questions as you observe the colors around you.
It just seems like it would be easier if both the theory and the practice spoke the same language. Now that I’ve come to this realization, I’ve decided to make a commitment to using HSL values as much as possible in my code. The stumbling block is IE8 and below, which don’t accept hsl() or rgb(). They need hexadecimal values. That’s ok though, since SASS can make the conversion. You can use hsl() in SASS and have the html output be a hexadecimal value.
To go along with my commitment I’ve started building a simple color tool to help me learn and study. It’s not something you’d want to use in its present state to choose a color palette, but it lets you play around with hue, saturation, and lightness values to see how each affects one particular color and the colors around it. I’ll share the tool later in the week.
For awhile I’ve suspected the mathematical relationships between colors could offer a guide for working with them and I’ve often looked for those relationships in the hex values of colors. My hope for using hsl() more and playing around with my simple color tool is they’ll help me connect the theory to the colors I use in design a little better than they’re connected for me now.
Keep this disconnect in how we learn about and describe color and how we use it in mind. The realization has given me a greater understanding for how to better study color and it’s why I wanted to start this conversation with the basics of how we describe color. I’ll have more posts about color coming soon, starting later in the week when I talk about the simple tool I created to help me.
Download a free sample from my book, Design Fundamentals.
I really agree with you in saying that there is a disconnect between what color theory and color in practice. Can’t believe I’ve never thought of using HSL since everyone uses #values or RGB all the time. Great insight, I’ll switch to HSL for my future projects and I think I’ll understand color alot better.
I’m learning color theory and I was looking at the ebook by Nick from teamtreehouse the other day saying how value plays a big part in colour theory. However, I can’t seem to find any tool on the Internet that helps me learn about values in colors. Hence I’m working to build a simple tool to train myself to understand values. Would be glad to share if you’re interested.
I’m extremely interested in your color tool since I think it’ll be way more comprehensive. Looking forward to your release 🙂
Thanks Zell. It’s one of the things that’s always confused me about color. You read about it in terms of HSL, but we generally don’t use HSL values in coding. Why not and if not how can we connect HSL with RGB and Hex. Similarly everything in print is CMYK and I find when I convert those values into hex they never look the same.
I don’t think I saw Nick’s book on color. Feel free to send me a link and also a link to your color tool.
Don’t get too excited about mine. It’s very basic and simple at the moment. I have ideas for developing it further, but right now it’s really not anything special. It’s mostly a way to set a few color blocks by adjusting HSL values and also see the corresponding RGB and hex values.
I found it a dug a little deeper in a conversation with a friend and found that brightness doesn’t equate to lightness.
Apparently, there are two very different, but similar ways.
HSB = Hue, Saturation, Brightness while
HSL = Hue, Saturation, Lightness.
In these two scenarios, the meaning of saturation is slightly different and hence, brightness and lightness means different things.
Brightness goes from black to colour while lightness goes from black to white.
That is the major difference and now I’m confused as to which I should choose to focus on.
I’ll send you an email regarding my app and lets chat from there.
I did get your email and I’ll be off to respond to it momentarily.
When I first saw HSB I was thinking it was the same as HSL, but it didn’t take long to realize the two aren’t the same. They’re too similarly named.
What I’ve noticed is tools like Photoshop will show an HSB value, but again the books I read about color talk of HSL. It seems like more disconnect to me and why I wanted to focus on HSL specifically. I figure it the theory I read uses HSL I want to start there and once I understand that system I can look to connect it to the other systems.
Good information. Looking forward to your color tool.
Thanks Ahsan. Hopefully you like the color tool. It’s really basic at the moment and not even online yet, but hopefully both of those things will change in the very near future.
Steven,
It looks like you’re mixing color model and color theory. Color model is a way to describe color mathematically (RGB and its children HSV/HSL and CMYK, primarily). Color theory is responsible for complementary, temperature, split primary, color harmony and color meaning, etc. The wikipedia entries on both terms are quite good.
If your goal is to learn how to use color effectively, color theory is important. Josef Alber’s Interaction of Color is a standard in art instruction. Bruce MacEvoy has some excellent content on color theory (http://handprint.com/HP/WCL/wcolor.html) and vision and color models (http://handprint.com/LS/CVS/color.html).
David
Quite possibly. Hopefully I’m not confusing things too much. 🙂 My main point is really that the way we learn about color and the way we use it in css aren’t the same. I guess it’s the color models that are different, but there’s still something of a disconnect in my mind.
For example if I’m reading an exercising that says find two different hues with the same lightness, it’s difficult for me to set that using hex or RGB values. I wanted to have a better way to directly compare HSL and hex (or RGB) so I can understand a little more what’s going on. I want to understand something like lowering the saturation 20% changes the hex value in a certain way.
I do have a version of Interactions of Color and I’m actually re-reading it now. I’d like to get a newer version of it as I think more of the original and more color plates have been added, since I picked up my version.
Steven,
We specialise in industrial colour (in the UK) using equipment and software based on Munsell theory to calibrate production machinery in textiles, paint and plastics. It’s very interesting to read your post here because there is certainly a disconnect between the expected accuracy of colour measurement in our world and yours. I blogged recently about how colour blindness is compensated for in web design (see askthecolourexperts.com). My question is: how accurate do you think colour needs to be measured on websites?
Cheers,
Tim
Good question. I’m not sure I have a good answer. We all see color differently even if it’s displayed exactly the same. Toss in all the different monitors that are calibrated differently and people are seeing different colors for your site.
I know this site displays colors differently between a Mac and Windows. The colors are warmer on a Mac and cooler on Windows. What I see reddish on my Mac looks purple when I check on Windows.
I think we have to accept others aren’t going to see colors the same as we do. If we can do well with the relationships between them we’re probably doing ok. I guess when it comes to websites the best we can do is test on as many devices as possible and see how the colors look.
I always read that primary colors are red, blue and green and that secondary colors can be considered cyan, magenta and yellow. The last ones are also called “print primary colors” because are the colored inks used to mix all possible print ink pigments. The question is: why are not red,blue and green the “print primary colors”? Why we don’t use them to mix all possible print ink pigments?
Good question. What we see as different colors are different wavelengths of light. Sometimes the light we see is direct and some times it’s reflected off a surface.
What we see on a computer monitor is the light being produced. What you see when looking at something that’s been printed we’re seeing reflected light. The monitor has a light producing source. The printed material doesn’t.
When we’re seeing color from something that has its own light source we see what’s called additive color. The absence of light leads to black and seeing every wavelength leads to white. When we see reflected light we see what’s called subtractive color. An object that absorbs all wavelengths appears black. An object that reflects all wavelengths appears white.
The reason we learned in school that primary colors are red, yellow, and blue is because we were dealing with a subtractive system. The reason why red, green, and blue are primary colors on a monitor is because it’s an additive system.
Cyan and magenta, are essentially blue and red. Not quite the same hues we think of as blue and red, but close enough. Colors when printed aren’t made by actually mixing the colors though. They’re created by presenting a different number of dots of different color. Kind of like a pointilist painting.
Print also adds black so you get CYMK, the k stands for black. By laying down different numbers of dots of each you can make it appear like there are many other colors being printed even though it’s only just those 4 colors being used.
What’s interesting is the different systems don’t produce the exact same number of colors. Each produces a range of colors that mostly overlap, but also includes some colors the other can’t produce.
Hopefully that makes sense, but if you want more look up additive and subtractive color systems. There’s a lot more to it than what I said here.
I would make you a more specific question.
You yourself say that a color from something that has its own light source is an additive color. So, the light produced by a single pixel on screen is an additive color because we know that inside the pixel we have other small dots (it does not matter for us how they are arranged and how much they are) that produce green, red and blue color; they are modulated in some way and the final result is the color of the single pixel. Pixel after pixel and we have the entire image on screen.
The question is: how is created each color (red, blue, green) by each single dot (let’s assume they are dots) inside a pixel? Is the original light for each dot white and then filtered to reproduce red, blue and green for each dot?
I hope the question is clear.
Your question is clear. I’m not so sure about my answer. 🙂
Your initial question inspired me to write a more in-depth post about color systems and color models. I started taking notes earlier today.
I found this for you in an article on How Computer Monitors Work
Does that help answer the question?
I think it helps. But not at all.
I mean, it says that through a careful control and variation of the voltage applied, the subpixel can obtain different shades: different shades of red or blue or green. But is the source light for each subpixel already red, blue or green? For example, the red subpixel and the red color: is it produced with a white light that pass through a red filter? Or there are not filters and the light is originally red?
I could make the same question in a more general way: can be produced in physics a light that has one single color without using filters?
I always ask if i’m clear because my english is not perfect, I can read it but some I have some difficults to write, I would ask you to have patience.
il tuo inglese è migliore del mio italiano
I had to use Google translate for that, which helps prove my point. 🙂
I’m not really sure, but I think the colors are produced by filters. I think white light is used as the source and that white light gets filtered into red, green, or blue.
I think the variation in voltage controls the intensity of the white light and then controls the shade of each color. For one pixel the voltage creates a bright red, while for another a different voltage creates a dull red.
Does that make sense? I’m guessing a little, but that was my interpretation.
yes, I have the same interpretation but some doubts remain.
Maybe I’m going to write a big nonsense but if we say that white light is used as the source and then primary colors(blue,red and green) are obtained through some filters…we are saying that additive primary colors(blue,redand green) are obtained through a subtractive synthesis. And I don’t why but it sounds odd.
Beyond the last observation, that is quite subjective (it sounds odd to me, maybe not to you), I thought about laser lights: well, I can’t study how exactly a laser light works because it’s a highly technical discourse, but a laser light is monochromatic and, reading around, it seems to contain one specific wavelenght of light: so, it is not white light but red, blue, green (or whatever other color) light. And i’m not sure that is result is obtained through filters.
Well, we are moving towards more and more complicated topics, a lot of physics is involved here and…this is not a blog of physics and I’m not a physician.
But, you know, I just wanted to know more about colors.
I see what you mean. I don’t have a great and definite answer for you, but I’ve been thinking about the question. I know all the science says the light obtained through filters is addictive, but I understand what you’re saying. If it’s being filtered than aren’t we seeing what’s left in a similar way as when light is reflected off some surface.
I still think the science is right, but I’m having a hard time coming up with a good explanation. I think it’s in the idea that even though the light is filtered, the light we see is being produced by the source from which we see it. In the case of reflected light we aren’t seeing light directly from the source.
And yet, when I type that I want to as if what we’re seeing comes out of a filter how is it any different than light being reflected.
I’m sure there’s a good explanation, but I’m not sure what it is.
Thank you.
The way you described was easy to understand.
Your point about how colour theory works and how our tools use it has really struck a chord with me. For a while I had wondered why changing brightness didn’t give the same colour as adding white.
Do you think in Photoshop to give a lighter colour we should simply add white? For example, laying a semi transparent white layer over the top?
When is the lightness very important? Give some examples where we have to consider the
lightness values? How can we determine the lightness value? Where can we find it?
Thank you very much! I’m studying pixel art and this has helped me tremendously with creating my own palettes. By the way, this post was nominated by RAYMOND SCHLITTER.