Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Graphics created for web sites and interactive design will always be viewed on a computer screen. So that means you will always be working with RGB colors. However, it's important to realize that every device has its own capabilities, meaning some devices and some computer monitors have the ability to display more RGB colors than others. Because of that, we have a concept in web design called web safe colors. In this movie we will talk about web safe colors. We will also talk about whether or not we really need to be concerned about web safe colors nowadays, because more and more devices have the capability to display more and more colors.
More importantly, we will talk about something called hexadecimal. It's the way that we actually define colors in HTML and on the web. So, first let's understand what a web safe color is. Now if you are a designer, you are probably working with a monitor that can display millions of colors. However, that doesn't mean that somebody who is viewing your web site also has a monitor that has that capability as well. In fact, all the monitors are known as something called VGA, which have the capability of displaying up to 256 colors.
Now that may sound a lot, but if you think about how you actually create gradients or many colors within a piece of artwork, it's certainly possible to exceed that number of colors. More importantly, it's not just 256 arbitrary colors. It's actually a single palette of 256 colors. So it's not just any color under the sun. In fact, if you think back to your days of going out and buying those Crayola package of crayons that came with a certain number of colors, if you want to create a color but you don't have that color crayon, well, there are really only two types of things you can do.
Either try to pick a color that's similar to the color that you are looking for, or you can try to attempt to actually mix two of those colors together to get the color that you want. Well, something similar actually happens with computers as well. For example, if I am now inside of Illustrator and I am using a monitor that's capable of displaying millions of colors. I can now create these colors that look fine on my computer screen. But what happens now if I want to view that exact same graphic on a different computer screen that only supports 256 colors? What happens to the colors that I have used that can't be displayed on that other monitor? The answer is that that monitor uses something called dithering.
It's a process that allows you to try to simulate colors by either picking a color that's close enough to the color intended, or it tries to mix the colors. But here is the problem. You see, a computer screen can't actually mix pixels. But what it can do is try to trick our eye by alternating different colors in some kind of a pattern to try to simulate a color. Unfortunately in many cases, dithering looks horrible and if you are designing a web site or you are creating graphics, you want to try to avoid colors that won't end up dithering really badly on other types of devices.
Let me show you what I mean. I have some artwork here, it's called websafe.ai, and I am going to try to simulate what this artwork might look like on monitors that can't display as many colors. Now I am going to use a very extreme case here, but I am doing it to prove a point so you can see exactly what this dithering process is. I am going to go to the file menu and I am going to choose Save for Web & Devices. I am going to click on the Optimize tab now, so I can see what this is going to look like when optimized and right now it's being optimized as a gif file and we can see over here that it's using 256 colors to display that piece of art.
But let's say my computer didn't have that number of colors. Let's say I only had fewer colors, like for example eight colors. I am going to go here to the Color pop-up here and choose 8. Well, if I only have eight colors, what's going to happen is that that dithering is going to simulate some kind of a pattern to try to get me to understand that these are different colors. But as you can see, sometimes a dithering pattern looks very ugly. You can imagine if I have some text on top of this, if this were some kind of a background, it may become difficult to read that text.
Now you can see that some of these colors are not dithering at all. For an even more extreme case, I am going to reduce the number of colors down to four colors. You can see now that some of these colors have just changed completely. The main point here is that if you actually use colors on your screen that look fine by you, it does not guarantee of those colors will display exactly the same way on other devices as well. Most importantly you really want to avoid any type of dithering that may occur that would make your artwork look ugly or even unreadable.
Now that we understand what dithering is, let's take a look at what these different palettes actually are. I am going to click Cancel. I go to my Swatches panel and from this little pop-up on the bottom for libraries, I am going to choose to open up System (Macintosh). I am also going to choose to open up System (Windows). So what I have right now are the256 colors that appear on a basic Mac System and a Windows System, when using a VGA display. In other words, these are the basic colors that are supported on these basic systems.
Now just as an example, if I were creating some kind of a graphic and I know it was going to be viewed on only a Macintosh computer, I could choose to use any of these 256 colors, and I will always be ensured that dithering will never occur on that computer, because I am using colors that I know exist on that screen, likewise the same for Windows. However, of course, as you know when you are designing web sites, you don't know if somebody who is logging in using a Mac or a Windows computer. So what you want to do is use a color that appears in both of these palettes.
It just so happens to be that there are a lot of colors that are similar between these palettes and if you count those numbers up, you will see that there are only 40 colors that are different between these two systems. In other words, if I take 256 and I subtract the 40 that are different, I am left with 216 colors that are identical on both of these systems. So if you think about it, if I use any of those 216 colors, I am assured that those colors will not dither on both Mac and Windows systems.
Well, I want to go back to my Swatches panel now and choose to open up another palette called Web. This one actually contains those 216 colors that are similar across both basic Windows and Mac systems. In other words, this palette right here is the exact same one as this and this, minus the 40 that are different. So the whole concept of a Web Safe Color is a color that you are ensured that whether you are viewing this from a Mac or Windows computer, they will appear without any dithering.
So now that we understand what a Web Safe Color is, let's talk for a moment about whether or not they are really necessary or not, because most people nowadays have monitors that can support more than just 256 colors. In fact, most displays nowadays can support millions of colors. So chances are, they will be able to view just about any color that you create without this dithering process having to get in the way. More importantly, you could start to question whether or not web safe colors even make any sense at all, because there are so many of these handsets or mobile devices that are out there.
People can view web sites dialing into an iPhone, through Android-based devices, and a handful of others, and those aren't technically Mac or Windows-based systems, so what kind of colors do those devices support? So the way that I like to really kind of look at web safe colors is that for basic colors of my web site, I try to use web safe colors, things like background colors or general colors where there is large areas of colors that I am using. And I am pretty confident that those colors won't dither, and they will correct on just about any system or any device that you might be using to view it.
However, when it comes down to the nitty -gritty, things like, do I want to make sure that every single color in my logo is going to be a web safe color? That I don't really worry about so much, and I am pretty sure that on most devices it will appear correct. But there is one other thing that we need to talk about when we think about web safe colors, and that's just really what a web color is anyway. Normally, we understand what RGB is and we think of things as different channels of red, green, and blue. We know that each channel supports up to 256 levels, so we kind of define RGB colors by using different values of R, G, and B. So let me close out of these panels here for a minute, and I will show you what I am talking about.
If I go over here and I click on the Shift button while I click on the Fill in my Appearance panel, that brings up over here my Color panel. If I click on the flyout menu, I am going to choose RGB and you see that right now I have different sliders, and those sliders go from 0 all the way to 255. However, in HTML we refer to colors by a code. Something which we call hexadecimal, and you can actually specify colors using these hexadecimal codes by going to the flyout menu of your Color panel and choosing Web Safe RGB.
It's important to realize that while it's called Web Safe RGB, it doesn't necessarily mean that I am going to be limited to Web Safe Colors. It just means that I will be able to specify RGB colors using this hexadecimal format, which is really what I am trying to do. You can notice now over here that I can now specify the colors using two characters, two characters, and two characters, which make up my hexadecimal code, and I can do that right here inside of Illustrator. For example, if I know a specific code here, I can just simply highlight it and type in that code and tab through it.
In fact, chances are you are going to be creating your own colors using a web design, so let me show you how to do that directly through the Swatches panel. Say you want to create a new swatch. Well, coming here in the Swatches panel, I'll click on this button to create a new swatch, where it says Color mode, change to web Safe RGB, and now you can type in the specific hexadecimal values here to create your color. Now by default, Illustrator names this swatch by the RGB values. However, especially when you are designing for the web, I find it far more intuitive to name your color using that hexadecimal color.
So, for example, over here, I am going to type in a hash symbol. Then I will type in 3333CC. Now I will click OK, and this is helpful, because when I mouse over this, a little pop-up will show, and it displays what that hexadecimal value is. So when I am creating my colors for use in web design, I don't go by the standard RGB settings or values. I actually type in the hexadecimal values, so I can see what I am working with. Now I am going to open up the Color panel here, because I want to show you one other thing.
You can see now that when I click on colors, because I specified through the flyout menu here that I can view things as Web Safe RGB, as I click on objects, I will see what those hexadecimal values are. However, sometimes you will click on a color, like for example this one, and you will see that these colors are not what we call web safe colors like we discussed before. In fact, an icon here identifies it as so. Whenever you see this little cube in the Color panel, that means that this color that I currently have selected is out of gamut of web safe colors.
Of course, like we discussed before, you can choose to use colors that are not snapped to this web safe palette. That's totally fine. But if you do want to actually have a web safe color, what you can do is click on this little icon right here, which will go ahead and it will basically snap that color to the nearest web safe color. You can see that the color changed and shifted just a little bit, but now it's a web safe color that it is guaranteed not to dither on a device. You can also see over here what those hexadecimal values are.
You can press Undo to go back to what it was before. Remember, you can specify hexadecimal values in HTML that are not web safe. But Illustrator just provides some tools for you that if you do want to find the nearest web safe color, it will help you do that. So hopefully now throughout this video, you have a much clear understanding of how color works on the web, and how you can use those colors inside of your designs.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.