DFW - Color in Web Design [LESSON]
Color in Web Design
Color Theory
Color theory has to do with how the human brain understands color; it involves both the art and science of how we use color. As we all learned in elementary school, we have 3 primary colors, red, yellow, and blue. From these 3 colors, all other colors are made.
Color Wheel image courtesy of PublicDomainPictures.net
Color theory involves such things as how we mix these colors, plus white and black, to create every color, tint, and shade there is. Besides the primary colors, the other 2 categories we are concerned with in color theory are secondary colors and tertiary colors. See the image below to understand how these colors are made.
Color Classification Image (Ketan naik1980, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons)
Color Formatting
Digital media deals with color a little differently than printed media, so we also need to understand how colors are created in digital media. Most digital media use red, green, and blue lights to create everything you see on the screen. This is called the RGB color model and is an additive model, meaning it is created by adding the colored light. The more light you add, the brighter the color, the less light, the darker the color. It is the mixture of these 3 lights, plus the amount of light, to create colors that are used in digital media. When entering RGB color in web design, you write it like this: RGB(255,255,255), this tells the computer this is using RGB, not another color format, and the amount of light for each of the 3 lights. The first number is the amount of red light, the second number is the amount of green light and the last number is the amount of blue light. The amount of light goes from 0-255, so 255 is total light. The above would turn out white on a screen, because it mixes total light in all 3 colors, if you wanted black you’d do the opposite: RGB(0,0,0). See the image below to understand the RGB color wheel.
RBG_color_wheel Image – (DanPMK at English Wikipedia, CC BY-SA 3.0 <https://creativecommons.org/licenses/by-sa/3.0>, via Wikimedia Commons)
Another way we can create RGB colors in web design is by using hexadecimal numbers. Basically, these are codes used to tell the computer the amount of red, green, and blue light to use. These are written with a hashtag (#) before the number. The values go from 0-9 and A-F (so 16 values) in 2 digits. It is written like this: #RRGGBB, with the R meaning the red colors, the G the green, and the B the blue. However, a color would be like this: #5F9ACC, there are charts online to help you choose the color and give you either the RGB or HEX color code. There are also some colors that have names. These aren’t as accurate as using the color codes. There are 140 names that are supported by all browsers.
RGB is the main color format used in digital media, but there are others used as well. One of those is HSL, HSL stands for Hue, Saturation, and Lightness. This color format is based on the color wheel. Hue (which is another word for color) is the degree on the color wheel (0-360). Saturation is the percentage value of the color or the amount of the color, so 0% is gray and 100% is full color. Lightness is the amount of shade or tint in the color. Shade is the amount of black added to the color, making it darker and tint is the amount of white added to the color, making it lighter. Lightness is also expressed in a percentage, with 0% lightness being black and 100% lightness being white. HSL colors are written like this: hsl(120, 100%, 50%), this would be green, because 120 is 120 degrees on the color wheel, 100% is full saturation of the color green and 50% would have no tint or shade, so it is regular green. One advantage to using HSL over RGB is that there is an alpha channel, which allows for transparency, or opacity. By adding the alpha channel to the color, you allow the ability to make the color a degree of transparency. The alpha channel goes from 0.0 (fully transparent) to 1.0 (fully opaque). You’d write that like this: hsl(120, 100%, 50%, .5), which would be green with opacity added; in this case, it would be 50% transparent. Adding the alpha channel makes the HSL color format go to HSLA color formatting.
One other common color formatting is CMYK. CMYK is not used for digital media, it is a printing color model. The C stands for Cyan, which is a shade of blue; the M stands for Magenta, which is a dark pink; the Y stands for Yellow; the K stands for Black. Most printers use CMYK color ink cartridges, with these all colors are made in your printing. You cannot print white with a standard printer, white is gotten by using white paper to print on, so no print is put where you want white.
Color Palettes
A color palette is the way we put colors together for a project. There are several rules for color schemes, which lead to most palettes. A list of those are below:
Analogous – colors that are next to one another on the color wheel, (for instance a yellow analogous color scheme would include yellow-green, yellow, and yellow-orange).
Monochromatic – shades and tints of one color (a blue monochromatic color scheme would be any shades of blue)
Complementary – colors that are opposite one another on the color wheel (red and green, blue and orange, violet and yellow, etc.)
Triadic – colors that are equally spaced on the color wheel, creating a triangle (blue-green, red-violet, and yellow-orange)
Split-complementary – a color and the two colors next to the complementary color (blue-green, red, and orange)
Tetradic – four colors that are equally distant from each other on the color wheel (blue, green, orange, red)
See the image below to see common color palettes. There are a lot of color palette generators online that can help you choose the color palette for your project.
Color-palette-ideas image (https://www.publicdomainpictures.net/en/view-image.php?image=39085&picture=color-palette-ideas)
Web Safe Colors
Though you can use any color on the web, there are certain guidelines you should consider. In the past there was a limit to the number of colors that browsers could display, modern browsers now will display millions of colors. So, there isn’t a necessity any longer for you to be concerned with the “web safe color palette”. However, you do need to consider the accessibility of your site. This is how well all people can view your site, including those with visual impairments such as color blindness. According to the Web Accessibility Guidelines, there are 3 best practices:
Ratio – text and interactive elements should have a color contrast ratio of at least 4.5:1. There are contrast finders online that you can use to help determine the best colors to use for contrast.
Color as an indicator – Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
Color blindness – Red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” or “good” indicators.)
From http://web-accessibility.carnegiemuseums.org/design/color/
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION