Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Understanding web-safe colors


Illustrator CS5 for Web and Interactive Design

with Mordy Golding

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.
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
  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

please wait ...
Watch the Online Video Course Illustrator CS5 for Web and Interactive Design
6h 20m Intermediate Sep 24, 2010

Viewers: in countries Watching now:

In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.

Topics include:
  • Getting perfectly sized pixel graphics from Illustrator
  • Setting up preferences in Illustrator for web design
  • Creating custom document profiles
  • Getting great color on the web
  • Understanding web graphic file formats (GIF, JPG, PNG, SWF, and SVG)
  • Setting great-looking type
  • Slicing artwork for various tasks
  • Creating Flash animations directly from Illustrator
  • Working with Photoshop Smart Objects
  • Exporting HTML and CSS from Illustrator
  • Integrating with Flash Catalyst
Mordy Golding

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, 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.

Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design .

Expand all | Collapse all
please wait ...
Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?
A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Illustrator CS5 for Web and Interactive Design.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about 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

Sign up and receive emails about 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.