Introduction
In this Exploration, you will learn about color value options and choose a color scheme from a photo.
Color Modes
Text and background colors for a website/app are typically determined by a marketing department's brand requirements and guidelines. Their rules help frontend developers incorporate a color palette/scheme that have been tested and approved, to avoid amateurish-looking design. View OSU's Brand Visual Identity Guidelines, for color. Notice that various color modes are provided for each color to ensure that designing for print and online materials are consistent. Besides the print color modes of Pantone (spot color printing) and CMYK (4-color printing), online color values can be included in the Guidelines.
The color modes typically used by frontend developers include the following:
- Names, 256 pre-defined HTML colors which have names. Many of the names represent overly-bright colors, which are often not part of a brand and may make a website/app look amateurish. Here is the color named Orange:
orange
- Hexidecimal and Hexa, made up of 2-digit values for red, green, and blue. Black is #000000 or #000 and white is #ffffff or #fff. Adjusting the RGB values will render up to 256^3 colors! In addition, an alpha channel allows transparency with an addition of two more digits #RRGGBBAA. Here is the OSU Beaver Orange color and then again with 80% transparency applied:
#D73F09 and #D73F09cc
- RGB and RGBa, made up of 1, 2, or 3-digit values for red, green, and blue. Black is rgb(0,0,0) and white is rgb(255,255,255). Adjusting the RGB values will render up to millions of colors! In addition, an alpha channel allows transparency with an addition of another digit. Here is the OSU Beaver Orange color and then again with 80% transparency applied:
rgb(215,63,9) and rgba(215,63,9,0.8)
- HSL and HSLa, is made up of values for hue, saturation, luminosity/lightness, and alpha transparency. Designers from the photography industry will recognize this mode. Once a single hue is chosen, then the brightness/saturation and tone (addition of gray) can be defined for variations based on that same hue. Here is the OSU Beaver Orange color and then again with 80% transparency applied:
hsl(16, 92%, 44%) and hsla(16, 92%, 44%, 80%). Some designers use a decimal for the alpha channel hsla(16, 92%, 44%, .8).
When a brand does not specify a color mode that you prefer to use, a conversion tool will provide the value. Ask Google to convert orange into Hex, RGB, or HSL to see how easy it is!
Exercise: Picking a color scheme
If you are developing a project for a client or for yourself, and there is no color palette/scheme chosen yet, then it is a good idea to choose a set of colors based on the site's background photo/art. This will ensure that the set of colors (the scheme) will match.
- Start by making a Text File VS Code. You'll be pasting color values there.
- Locate a multicolored photo in .JPG format to experiment with. Consider picking one you took yourself, so you can use it for the website Assignments.
- Navigate to Adobe's free Color application.
- Click the Extract Theme tab.
- Drag and drop or select the JPG file from your hard drive.
- Notice the colors picked by the tool.
- Adjust the lightest color so it is nearly white, but so you can still perceive some color.
- Adjust the darkest color so it is nearly black, but so you can still perceive some color.
- The remaining colors can be adjusted if they are too close in value (lightness/darkness) or hue (color).
- Click the Color Wheel tab.
- Notice the Hexadecimal colors under the color palette. They begin with a hashtag, such as #82B8D9.
- Copy/paste those colors to the text file.
- Click the Color Mode dropdown at the bottom left of the screen. Your choices are RGB and HSB (which is similar to HSL).
- Copy/paste either the RGB or HSB values to the text file.
- Unfortunately, unless you own an Adobe account, the Save feature doesn't work. :-( Consider taking a screenshot of the final color palette, so you can see them all together.
- Pick a memorable name for each of the colors you pasted into the text file. For example: skyBlue, forestGreen, moss, pumpkin, and gold.
You'll be incorporating this new color palette/scheme into the next Module's assignment.
Summary
In this Exploration, you learned the various color modes available for the web, as well as how to extract a color scheme from a photo for use in the next Module.
Additional Resources
The following resources can help improve your understanding of color for the web.