101 Color Resources For Web Designers

Do you freak out if someone asks you to match print colors to Web colors? Or, maybe you just can’t decide whether the orange would work better with the blue or the green. Either way, many designers may not realize how easy it is to choose a palette for that new Web design. Additionally, many designers might be surprised to learn that they can stay on top of color trends with a few visits to fashion design websites.

All those tips and more are listed below in this list of 101 color resources for Web designers. The categories are listed alphabetically as are all the links contained within each category. Visit them all and bookmark the ones that will help you become the most color-savvy Web designer around.

Color Forums

There are few forums that focus specifically on color, but there are dozens of Web design forums that contain a thread on color issues. This short list is a sample of the former forum, where listed posts discuss every problem known under the sun about color. If you’re a PC owner, don’t let the word “Apple” below turn you away from the information you’ll discover in the two forums listed below. Most of the information in these forums is applicable to any computer system.

• Adobe User to User Forums: Learn how to determine the embedded profile in a PDF, or learn about Pantone colors and LAB conversion. This extremely usable forum has everything you’d want to know about more advanced color topics.
• Apple Color Forum: This forum, provided by Creative Cow, offers many publicly viewable threads on color and on color and Apple. Add to the discussion or just lurk and learn.
• Apple Discussions on Color: Another forum for Mac users based solely upon color topics.
• Applied Color Theory in Photoshop: You must join this discussion group before you can read messages or ask or respond to questions. This is a Yahoo! group, so you may already be familiar with the format.
• ColorForums: This is a community forum for color management discussion hosted by CHROMiX, Inc. You can find support for the color graphing and ICC profile management toolset, or find support for the ColorValet custom profiling service. Although these are product-specific discussions, you also can find information about mundane subjects like how to calibrate and profile CRT, LCD and overhead display systems.

Color Management

Color management is a process where the color characteristics for every device in the imaging chain is managed and used to better predict and control the outcome of color reproduction. The following articles explain how color management is…well…managed by a design team or the individual designer to produce the most accurate images.

• Color management and color science: This is an introduction to color management that explains the groundwork precisely in easy-to-understand terms. Two more articles follow on “Setup, working color space, profile anatomy,” and “Monitor profiling, workflow details.”
• Color Management for the Web: Most monitors have a color range that is somewhere in the vicinity of sRGB. Lars Ekdahl explains why this problem exists and offers several solutions for a few monitors.
• Color Management Terminology: This page offered by Adobe provides a cursory background in Web color management.
• CSS3 Color Module: The World Wide Web Consortium (W3C) offers their guidelines on how to manage color through style sheets. This is a must-read for any serious designer.
• ICC: This is the site for the International Color Consortium, a group that advocates the use and adoption of open, vendor-neutral, cross-platform color management systems.
• Overview of Color Management: This article is the first of three in a series that explains color management.
• Web Browser Color Management Tutorial: Gary Ballard provides information on how to manage color within several browsers. This is just one of many articles on color management that Ballard has written. Look at the links in the far right column for more information.
• Why Color Management?: This PDF file contains plenty of images and text to explain various theories behind color management and how it affects Adobe tools that designers use for Web design and color (or vice versa).

Color Tips

The list below contains articles, guides, glossaries and more that will serve as ready references on the topic of color.

• A Glossary of Color Science: If you’re ever stumped over a word used in the color world, refer to this glossary for help.
• Choosing color combinations: Learn how to consider meanings behind color and how designers use them when they design a Web site or other works. Use the part on ‘inspiration’ to avoid creativity blocks.
• Color Design for the Web: Learn why your color choices for that Web design are so important. Colors express your site’s mood and personality, it can set the tone for the site, and it can establish the site’s identity.
• Color Guidelines for Brands: This is a brief guide to color connotations in the U.S. or possibly in other western cultures.
• HTML Color Names: W3Schools provides this list of color names. If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or HEX value.
• Color Psychology, Symbolism, and Interesting Facts: This list of articles focuses on color psychology and how different colors affect some individuals. Symbology of these colors is based upon western perspectives. One interesting table shows popular Crayola colors over the years, which shows that personal preferences in color — at least among children — change often!
• Color Rules of Thumb: If you don’t know about or can’t remember information about warm or cool colors or about different basic color schemes, then print this Web page out as a resource.
• Colors Found in Nature and Interface Design: Learn how to use colors in Web designs to distinguish your sites from other sites, to engage viewers, and to inspire other designers. The author of this article, Luke Wroblewski, also has penned many other articles and books on color and design (see the sidebar at this article).
• CMYK (for Those Who Do RGB): Sure, you can use one of the tools listed below to go from RGB to CMYK painlessly. But, it might be wise to learn what you’re doing in the process. This article will explain everything.
• Finding Color Inspiration Around the Web: This short article shows how you can learn about color combinations from existing Web sites and how the color schemes contribute to the overall “feel” of a site.

Color Theory

Color theory leans toward how to mix colors and how colors look when juxtaposed. While color theory may touch upon color psychology, the base science for this field is in physics, where the study about how light is perceived as color is an ongoing practice.

• 16 Lessons in Color Theory: The School of Wet Paint provides sixteen lessons in color theory, from a basic introduction to optical effects. Learn how to mix colors outside the digital framework and about the history of color in fine art.
• Color, Contrast & Dimension: This section provided by the Poynter Institute contains an online guide that explains color theory and that shows how to use it in design through examples and exercises.
• Color Theory: This concise Web tutorial covers color theory by explaining often-used terms and explaining them by definitions. Although visual explanations might have worked here, this is an excellent reference sheet to jog a color newbie’s memory. This page was written by designer and typographer Ryan Ford.
• Color Theory Exploratory: This site is sponsored by Brown University Computer Graphics Group, and it contains compact information about both additive and subtractive color theories with an emphasis on Web color.
• Color Theory Overview: An architect turned Web designer explains color through a tutorial that will benefit any designer. Learn about color basics, complementary colors, shades and tints and more at this colorful site.
• Color Wheel and Color Theory: What’s nice about this About column is that the primary, secondary, and tertiary colors are defined for you by hex and by CSS. Additionally, you’ll discover more color theory articles linked at the bottom of the page.
• ColorCube Color Theory: These ideas tie back to a COLORCUBE tool developed by Spittin’ Image Software, Inc. This article defines the dimensions of color in terms of hue, lightness, saturation and other characteristics of light.
• See Color Theory in Action: Color Theory is a set of principles used to create harmonious color combinations. The commercial enterprise Color Wheel Pro shows the classic color schemes in an easy-to-use visual layout. Visit their other color articles linked at the bottom of this page to learn more.

Color Tools

The majority of this list is wrapped around color tools, color generators, color tests, and any other toy that takes color and changes it, mixes it, or pulls it together to create color schemes and palettes. After you experience a few free tools listed below, you might learn why we’re addicted to this section.

• Average Color Tool: This tool can help you calculate the average color of an entire photograph, not just a small section of that photograph. Upload an image from your hard drive or use a flickr number to find the average color for each separate image.
• Color Blender: Pick one color, and then pick another color. Click on “blend,” and you’ll see a third color that lies somewhere between the two colors you chose originally. Perfect for links, visited, and active colors. On the other hand, you’ll discover how easy it is to create “muddy” colors that aren’t that appetizing. This tool is maintained by noted CSS and HTML expert, Eric Meyer. This tool is an adaptation of the original ColorMatch 5K tool developed in 2001.
• Color Conversion: Although one can convert any RGB to CMYK without losing information, the inverse is not the case. When a CMYK color is converted to RGB, some information is lost. Still, this tool will help you obtain the closest possible color when converting.
• Color Hunter: Use this color tool to create color palettes from images. If you don’t have an image, you can find color palettes on Color Hunter when you enter a search term in the box at the top of the page. You can search by tag or hex color code or image URL.
• Color Jack: This tool is a bit more complicated, but it’s perfect for the Webmaster who needs precise color combinations that can be downloaded to Illustrator, Photoshop, Sphere, or Studio. This is a downloadable widget, but you can use it ‘as is’ on the Web site. Explore the Color Jack site to learn more about color theory and other color information through their free online articles.
• ColorMatch: Input a color by RGB numbers, then pick a color scheme through the drop down menu at right. You’ll find matches that will help you to define your color schemes.
• Color Mixers: Web-based color-mixing tool that provides eight complementary colors based upon one color that you choose.
• Color Palette: This tool was based upon the article, Creating colour palettes, by Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility. Just type a valid six character hexadecimal value in the text box above and hit the “OK” button, and then click the “random base” color to get a randomly generated base color. From here, you can pull a variety of tricks to gain access to RGB and hex combinations.
• Color Palette Generator: Enter the URL of an image to get a color palette that matches the image. This tool is useful for any designer who needs to quickly match a palette to a main image (like a photo logo) that a client may want to use as a centerpiece on a Web site.
• Color Palette Generator: Yes, this is another palette generator, but you can pull images directly from your hard drive to determine a new color palette at this site. Or, you can select an image contained within the drop-down menu.
• Color Schemer: input one hex color and view the various complementary colors that pop up. This tool is best used to determine palettes by shade or tint. A commercial enterprise offers this free tool.
• Colour Selector: Webmasters could spend all day at this site, which offers six different color mixing tools along with a collection of 22 palette layouts for use as clickable palettes in these interactive color tools. Each tool carries easy-to-follow instructions to find various mixes, to blend colors, and more.
• Combo Tester: The heart of this Color Combos site is the Combo Tester, which allows web developers to see how different color combinations work together on the screen. But, take time to read some of the articles contained within this site, too. They all focus on color and how to use it on the Web.
• Color Wheel Color Calculator: If you’re a dyed-in-the-wool color wheel devotee, then this free tool is for you. Pick a color and then pick a color scheme to arrive at a solution that provides hex code or CMYK or RGB numbers. You can also play with shades and tints to arrive at even more color combinations.
• ColorToy 2.0: ColorToy 2.0 is a Flash based color scheme generator and picker. It generates complementary color schemes based on your inputted color values or randomly, which is much more fun.
• Colr.org: Use this variety of tools to snag colors from other Web site CSS files, from flickr photos on the site, and more. Create whole color schemes, or borrow from ones already displayed on the site.
• EasyRGB: This site holds at least five different tools to help build an RGB color palette. Keep an eye on this site, as they have plans to completely revamp the site in March 2008. Tools will be easier to use, and new color collections will be added.
• GenoPal: This free online version is a limited version of the commercial version of GenoPal PC/Mac. Although it doesn’t display hex numbers, you could take a screenshot and pick the colors with any graphics program that uses a color picker.
• I Like Your Colors: Have you ever run across a Web site that just wows you with its colors? Type the URL into the box on this site and you’ll discover the exact colors they used by hex. This site even groups the colors by hue based upon value. This tool was created by Owen Winkler, evil (but creative) genius.
• kuler: Click on the “create” link to play with the base colors and other tools on this Adobe Labs site. You must register to ‘publish’ your final palette, but registration is free. This site also maintains online forums for user-to-user discussions of Adobe products, but that are not an official customer support channels for Adobe.
• Palette Generator: This generator also takes images straight from your hard drive to generate color schemes, as well as from flickr portfolios or from Photobucket or from a domain URL. The nice thing about this generator is that it spits out CSS for your style sheet!
• Swatchify: Add colors by adding hex values with the form on the left. Remove colors from the palette with the link next to each color’s name. When you are done creating your palette, you can generate a permanent URL with the link at the bottom to either find it again or share it with others.

Colorblindness

• Accessibility Color Wheel: Hover over the wheel or the grey stripe to choose colors. Click to confirm the color and compare the color according to three levels of colorblindness.
• Color Contrast Analyzer: This tool is primarily used to check foreground & background colour combinations to determine if they provide good color visibility. It also contains functionality to create simulations of certain visual conditions such as colour blindness.
• Color Oracle: This free download tool for Mac, Windows, and Linux takes the guesswork out of designing for color blindness. Color Oracle applies an independent full screen color filter that allows Webmaster to see what people with common color vision impairments see, and to help determine whether their color schemes are readable by the widest possible audience.
• Color Scheme Generator 2: This is one of the coolest color palette builders around, as it helps Webmasters build palettes and then test them against various colorblindness indicators.
• Colorblind Web Page Filter: This tool provides Webmasters with the means to view a Web site in various colorblind states.
• nColor: This color checker allows users to pick and lock three colors to test them against various vision deficiencies. Users also can track the contrast of the text colors against certain backgrounds for contrast and legibility.
• Vischeck: Vischeck simulates colorblind vision and the Daltonize tool corrects images for colorblind viewers.
• Visolve: This software transforms colors of the computer display into the discriminable colors for various people including people with color vision deficiency (colorblindness).

Downloads

• Anry Color Picker: This free download allows user to point a mouse anywhere on the screen to learn about the color of any given pixel in HTML, RGB, hex, HSB/HSV, and HSL. Anry Color Picker can remember the history of all chosen colors. Just copy the value you want and use it in your graphic work when the need arises. There are RGB and RYB color wheels and color mixer. Anry Color Picker also shows harmonious colors that match the base color. Suits Windows 95, 98, ME, NT, 2000, XP (32 and 64 bit), 2003, Vista.
• ColorImpact – Color Scheme Designer: Download, select the main color and the visual color wheel instantly displays a selection of perfectly matching colors. You can then try different color harmonies, add shades and tints to fine tune your color scheme. This commercial product is geared to Windows.
• Colorpic: This free download has a color picker with a magnifier attached to work on high resolution monitors. Grab palettes of up to sixteen colors at once and use four advanced color mixers to select a spectrum of color schemes. Works with Firefox, Internet Explorer, Photoshop and any other application. They also sport a forum if you have any questions about this tool or about color in general.
• ColorSchemer: Download free or trial versions of various color tools from this commercial vendor. Their free ColorPix is a neat little app that will let you grab the color values and screen coordinates at any pixel on your screen. They also carry the ColorSchemer Galleria, which is a free Dashboard widget that allows you to browse all of the schemes in the ColorSchemer Gallery without leaving your Dashboard. Look around the site to read in on forums, view color schemes, and to try their free online color tools.
• ColorZilla: This download is a Web page DOM color analyzer that allows users to analyze DOM element colors on any Web page and create a matching palette. Users also can discover which CSS rules specify a given color, then bookmark and share the palettes. The newest version sports an advanced eyedropper, color picker, page zoomer and more. This is a Firefox extension that offers Firefox, Firebug, and Ubuntu support.
• Colourmod: ColourMod as a widget used to be limited to just those who had a Macintosh computer. Now, ColourMod for Konfabulator brings ease and simplicity to colour picking on Windows and the Mac. You can even integrate ColourMod into a web-application and want to maintain your own branding.
• Pixie: Pixie is an easy-to-use, fast and tiny color picker that includes a mouse tracker. Run it, point to a color, and it will tell you the hex, RGB, HTML, CMYK and HSV values for that pixel.

Inspiration

What, you may ask, does interior design have to do with Web design? Or, how can you learn from fashion Web sites or movies? Well, the elements and principles of design are the same across all design disciplines. Plus, you can be wowed by some of the tools that other designers use, as they’re the same tools you might use – just on a different palette.

• Behr ColorSmart: This is a paint tool used by interior designers and homeowners. Webmasters can click on the “Start ColorSmart” link at bottom left for a popup window that allows them to play with numerous color combinations for inspiration.
• Color Inspiration from a Movie: A designing mom snuggles in with her kids to watch the 2005 movie Nanny McPhee and discovers color inspiration falling in her lap from this flick.
• Colr Pickr: Jim Bumgardner is a “Krazy” dad who has accomplished an extraordinary task. If you dig into this site a bit, you’ll realize that Bumgardner has created a color wheel with photographs. He was inspired by the Color Fields group at flickr, where group members take photos of a frame-filling field of a single color. Pretty amazing!
• CSS Zengarden: Walk through this variety of CSS examples to get inspiration from the color combinations that the designers used here. You’ll find pastels, heavy shades of dark colors, vibrant contrasts and more.
• Fashion Trendsetter: Learn more about upcoming and past fashion trends through this site that focuses on fashion. The fashion industry often dictates trends for automobile colors, interior design colors, and yes – even Web design colors.
• HGTV Color Tips: Mark McCauley, ASID, offers advice to homeowners and designers on color schemes and texture at Home and Garden Television. The ten steps he outlines provide great advice for anyone who feels nervous about dealing with color issues.
• Sherwin-Williams Visualizer: This is a great tool for interior designers, and Webmasters can use it as well to learn more about how different colors look when juxtaposed within this Web environment.

Photoshop And GIMP

Although Photoshop is all about developing art and images, color plays a huge role in how those images are developed. The following handful of hundreds of online Photoshop sites focus on tutorials and plugins that deal specifically with color and color management. If you’ve crossed over to GIMP for your photo and art needs, we’ve supplied some information about that tool as well.

• Free Color Management: Karl Heinz Kremer is trying to collect all the useful information about free color management systems or parts of these systems or just useful color related information on this page.
• Free Photoshop Plugins: Although this site doesn’t carry the number of plugins offered in the following link, the images will show you what you can expect from each tool.
• Free Photoshop-compatible Plugins: We can’t vouch for the safety of downloading these plugins, but we can assure you that you’ll find plenty of Photoshop color tools on this Web page.
• GIMP Color Library Reference Manual: Learn how to manage color in GIMP. This site also includes references to updates for this design tool.
• Photoshop 911 Color Issues: This link will take you directly to over 500 tutorials, blog entries and more that focus on color at this site. Then again, you can focus more on general Web color and learn more about color and the Web in general.
• Photoshop CS2 Tutorials: This is the home page for this site, so use the search option to find specific tutorials on color. To date, this site contains over 1,000 articles about Photoshop color.
• Photoshop Tutorials: GraphX-Design offers over 85 tutorials on color and Photoshop, but you’ll need to use the search option to obtain the list.
• Pimp My Gimp: Although this is more or less a complete tutorial on using GIMP, the user can find many tips to color management within this heavily illustrated list. Illustrations contributed by Jakub Steiner.

Schemes

The following sites aren’t listed anywhere else within this article. With that said, there are many other color schemes available through other sites listed here, but you’ll need to find them as you search through this list. For instance, COLOURlovers (listed under Web Sites below) contains hundreds of color schemes that users can imitate.

• Color Schemes: Although this isn’t a colorful site, it is useful – it names all the traditional color schemes used by artists over the past few centuries.
• Color Schemes: Another site that talks about traditional color schemes, but this one is much more colorful.
• ColorCell: ColorCell is determined to find the most beautiful color combinations. Choose among uploaded color combinations or create your own. There is space for 100 cells, and it has yet to be filled as come cells “die” when they don’t gather votes and are buried in a cemetery where you can pay your respects. You can view the youngest cell, the most popular cell, and cells that have managed to stay “alive” during the voting process among other interesting tools.
• DarkEye: This is a bizarre color scheme generator in that it doesn’t provide users with a color scheme – it discovers sites on the Web that carry any scheme you can dish up. Choose six colors – any colors – and you’ll learn that many designers avoid good color theory and practice (especially if you pick a really bizarre theme that includes colors like pink, purple, yellow and lime green). Browse this page to learn more about color and its practice on the Web.
• Sample Color Schemes: Presented by Color Wheel Pro, this set of color schemes matches the traditional schemes to Web colors. This is an extremely useful tool to anyone who is unfamiliar with color concepts.
• Theme Color Palette from Nature Inspiration: Use a color picker and start plucking colors from photographs. You might learn, like this designer did, that Mother Nature provides some fairly interesting color schemes.

Web Color

Many monitors still display only 256 colors, and this is why Web-safe colors still remain an issue for many designers. However, as those monitors slowly meet their demise (thanks to age more than anything else), other newer monitors that are capable of displaying a larger number of colors are replacing them. The sites below deal with the 256-color problem. This information is valuable in for those designers who discover that many viewers at their Web site are using older systems.

• Graphics: Outside the material on 256 colors at Web Style Guide, this site also contains information about how to produce graphics so that people who connect to the Internet through dial-up can gain access to your images.
• Is the Web Safe Palette Really Dead?: Joe Gillespie votes to keep the Web safe palette alive. If you’re interested in his logic, read this article. You might browse around Gillespie’s site to read more from this experienced graphic designer who specializes in new media.
• The Browser-Safe Web Palette: Lynda Weinman believe it’s safe to design without the palette. she believes this because so few computer users view the web in 256 colors anymore. But, there are reasons to learn this palette, and she’ll tell you why in this article. Lynda was one of the original advocates behind the Web safe color campaign when it was needed in the 1990s. Browse her site to learn more about what she’s up to today.
• What is Web-Safe Color?: Visibone’s tools and articles mostly are based upon the concept of the 256-color Web safe palette. This article, which is a FAQ page about this topic, can lead you to many well-used pages within the Visibone site.

Related Websites

The following Web sites are devoted to color. Although some sites aren’t totally dedicated to Web design and color, each site contains so much information about the subject that they’re worth listing here.

• Color Association of the United States: If you find yourself embroiled in a job that involves extreme expertise in color, this is the association to join. Even if you cannot afford the color trends or the workshops, you can enjoy browsing the site to learn more about color psychology and trivia.
• Color Matters: The concept of color can be approached from several disciplines: physiology, psychology, philosophy, and art. Learn, share, and take away information about how color can alter your world. This site was created by J.L. Morton, a branding expert and color consultation for a vast array of projects – for clients such as Tylenol, Nokia Mobile Phones, Eastman Kodak and Dow Chemical.
• Colors on the Web: This site focuses on Web color and all its facets, including palettes, color psychology and more. You also can use free color tools and share your new color schemes at this site.
• COLOURlovers: This is the hottest new site for color, as it’s geared toward viewers rather than geared toward the site owner’s expertise. Users at this site can participate in contests, create color palettes for use by others, and create patterns based upon palettes created through the COLOURlovers toolbox. According to the site, “There are currently 67,777 Lovers sharing 867,703 Colors in 295,121 Palettes. Lovers have scored the lovely Colors & Palettes 1,322,479 times and left 465,504 comments and created 50,696 Patterns.” That’s some big numbers.
• Make a Splash with Color: Although the site seems old, you can rest assured that the material contained on this site is far from outdated. If you want to learn more about tints and shades, or about saturation and brightness, then you’ve discovered the site to read. This site is maintained by The Tech Museum of Innovation.
• Pantone: What color list would be complete without a reference to Pantone? For years, this company has led the way in color for print, and they introduced a timely introduction for tools for Web color as well. Although color management is a forte at this commercial concern, readers can learn about color’s many facets at this site. One of the popular sections at this site is their annual forecasts for fashion color. They also maintain an active online community.