New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding web-safe colors

From: Illustrator CS5 for Web and Interactive Design

Video: Understanding web-safe colors

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.

Understanding web-safe colors

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.

Show transcript

This video is part of

Image for Illustrator CS5 for Web and Interactive Design
Illustrator CS5 for Web and Interactive Design

74 video lessons · 23661 viewers

Mordy Golding
Author

 
Expand all | Collapse all
  1. 6m 56s
    1. Welcome
      1m 33s
    2. Choosing Illustrator for web and interactive design
      2m 54s
    3. Illustrator and the web design workflow
      2m 7s
    4. Using the exercise files
      22s
  2. 40m 9s
    1. Pixel dimension vs. resolution
      4m 14s
    2. Pixel Preview mode and anti-aliasing
      5m 39s
    3. Taking charge of anti-aliasing
      5m 27s
    4. Choosing the right color management settings
      7m 25s
    5. Setting up important preferences
      6m 22s
    6. Setting up a workspace optimized for web design
      11m 2s
  3. 54m 5s
    1. Using the Web document profile
      3m 39s
    2. Creating custom document profiles
      9m 38s
    3. Using Illustrator's free web templates
      2m 33s
    4. Creating a sitemap or wireframe
      2m 50s
    5. Setting up an entire web site
      9m 33s
    6. Setting up a grid
      10m 37s
    7. Setting up an online ad campaign
      8m 13s
    8. Setting up icons for iOS
      2m 24s
    9. Setting up mobile content with Adobe Device Central
      4m 38s
  4. 32m 22s
    1. Understanding web-safe colors
      11m 50s
    2. Limiting the Color Guide to web-safe colors
      4m 53s
    3. Using Recolor Art to convert art to web-safe colors
      4m 54s
    4. Getting color inspiration from Adobe Kuler
      6m 48s
    5. Using Recolor Artwork to modify colors across a site
      3m 57s
  5. 56m 54s
    1. Using the Save for Web & Devices feature
      6m 44s
    2. Understanding the GIF file format and its settings
      10m 20s
    3. Understanding the JPEG file format and its settings
      7m 39s
    4. Understanding the PNG file format and its settings
      3m 21s
    5. Understanding the WBMP file format and its settings
      1m 18s
    6. Understanding the SWF file format and its settings
      4m 13s
    7. Understanding the SVG file format and its settings
      3m 41s
    8. Adjusting the dimensions of a graphic
      4m 46s
    9. Optimizing files to a specific file size
      4m 5s
    10. Modifying Save for Web & Devices output settings
      6m 51s
    11. Previewing content in Adobe Device Central
      3m 56s
  6. 56m 6s
    1. Setting point type in Illustrator
      4m 11s
    2. Setting area type in Illustrator
      5m 20s
    3. Formatting text quickly with paragraph styles
      14m 39s
    4. Overriding formatting with character styles
      3m 2s
    5. Controlling text anti-aliasing
      4m 50s
    6. Simulating the CSS box model
      11m 14s
    7. Adding cool reflections to text and graphics
      8m 26s
    8. Applying settings quickly with Graphic Styles
      4m 24s
  7. 35m 56s
    1. Understanding the concept of slicing
      3m 22s
    2. Creating slices manually
      4m 26s
    3. Creating slices from guides
      2m 45s
    4. Creating slices from objects
      7m 33s
    5. Understanding the different slice types
      4m 20s
    6. Applying settings to slices
      9m 20s
    7. Creating hotspots with image maps
      4m 10s
  8. 23m 35s
    1. Exporting static SWF files from Illustrator
      3m 35s
    2. Animated SWF: Converting Illustrator layers to SWF frames
      4m 3s
    3. Animated SWF: Using blends to define motion
      8m 35s
    4. Animated SWF: Adding static artwork to an animation
      3m 24s
    5. Animated SWF: Controlling time within an animation
      3m 58s
  9. 17m 13s
    1. Preserving slices and structure with PSD export
      6m 10s
    2. Working with Photoshop Smart Objects
      4m 35s
    3. Sharing color swatches between Illustrator and Photoshop
      2m 52s
    4. Generating an animated GIF file with Photoshop
      3m 36s
  10. 7m 28s
    1. Exporting HTML from Illustrator for use in Dreamweaver
      3m 31s
    2. Exporting CSS and DIVs from an Illustrator layout
      3m 57s
  11. 12m 37s
    1. Moving art between Illustrator and Fireworks
      6m 25s
    2. Using dynamic shapes from Fireworks
      3m 48s
    3. Sharing color swatches between Illustrator and Fireworks
      2m 24s
  12. 16m 7s
    1. Building files for use in Flash Catalyst
      4m 28s
    2. Creating a new Flash Catalyst project from an Illustrator file
      3m 40s
    3. Copying and pasting artwork between Illustrator and Flash Catalyst
      2m 4s
    4. Roundtrip editing between Illustrator and Flash Catalyst
      3m 36s
    5. Creating Flex skins for use in Flash Builder
      2m 19s
  13. 19m 48s
    1. Understanding symbols: The lifeblood of Flash
      4m 58s
    2. Symbols: Understanding 9-slice scaling
      4m 18s
    3. Setting text that will be used in Flash Professional
      3m 5s
    4. Moving artwork between Illustrator and Flash Professional
      7m 27s
  14. 1m 6s
    1. Goodbye
      1m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.