The information below includes definitions, examples, projects, and overall any documentation of information that will help me retain and display what I know. The content is organized in chronological order to show improvement with the most recent at the top of the page.
I completed a 3 hour Color Design course on Codecademy. I practiced using CSS while learning design principles such as:
- primary and secondary colors
- brand colors
- colors that suggest UI interactions
- color psychology
- visual accessibility
I learned that you can set color in css using hsla(hue, saturation, light, alpha). This is preferred for designers because of its intuitive change for making something brighter for example.
- Hue: sets the "pure" color. it is the angle in degrees around the color wheel.
- Saturation: the intensity or purity of the hue. 100% full saturation is the color itself. 0% no saturation is completely grayscale.
- Lightness: the lightness of the color. 0% is black, 100% is white.
- Alpha: the opacity. 0% is fully transpatent, 100% is fully opaque.
Warm colors range between red and yellow. This also includes browns and tans. These colors are associated with warmth and can promote a feeling of aggression/are considered bold. Hue values of 0-60: red->orange->yellow.
Warm colors range between blue, purple and green. This also includes grays/greys. These colors are associated with calming and soothing feelings in addition to winter climates or water. Hue values of 140-280: green->blue->purple.
Tints and Shades
Increasing lightness of a color results in tints of a hue. Decreasing lightness results in shades of a hue. Tints happen when white is added to a color and shades occur when black is added to a color. Change the third value L in HSLA to create tints and shades.
Colors opposite of each other on the color wheel have higher contrast while nearby colors have lower contrast. It's important to have contrast levels that provide clarity to the users and promote ease of use and legibility.
Color schemes or color palettes are the result of pairing two ore more colors together. There are 4 different color schemes to consider:
This is the most basic color scheme. It uses one color with varying shades and tints. Each color in the scheme is derived from the base color. It is important to have high contrast by using colors on the ends of the spectrum in order to eliminate the monotonous feeling. This color scheme is nice because it provides an immediate sense of harmony.
*Use different color/shade/tint for buttons that do different things such as a subscribe for emails button versus a download button. The "page hero" is a design term that refers to the banner of image that is often paired with text and a background and is put front and center of a page. Re-use same shades in different elements, to create harmony, but still ensure contrast. It is helpful to give distinct sections of content their own background color to make visual groups that convey how the information is grouped.
This scheme utilizes colors opposite from each other on the color wheel:
It is common in logos and uniforms like the Los Angeles Lakers have purple and yellow in their logos and the University of Virginia colors are blue and orange. This color scheme is also popular on websites since it has high contrast. They can clash, however, if used for large areas right next to each other.
Analogous Color Schemes
This scheme applies three or more colors that are next to each other on the color wheel. Usually there is one dominant color paired with a second supporting color and a third accent color. This scheme creates a visually pleasing and calming display. This scheme can provide a low-contrast experience however. This should not be used for content that needs a user's direct attention, but rather for creating backgrounds that don't compete with the main content of the site.
Triadic Color Schemes
This scheme consists of three colors that are equidistant from each other on the color wheel. Like complementary color schemes, it provides pops of color and allows some flexibility in the range of colors you can use. Triadic color schemes are useful because they create a feeling of equality, virbrancy, and security in a design.
Designers must determine the "feel" of their website. Every color has a different feeling and meaning. Color psychology can affect how people perceive a design and its related colors. Choosing the right colors can help visually convey the right context and mood of a product or service. Colors evoke emotions; here is a list of words usually associated with these colors:
- Red: Passionate, energetic, angry
- Orange: Optimistic, playful, fun
- Yellow: Welcoming, intellectual, impatient
- Green: Prosperous, balanced, growing
- Blue: Peaceful, loyal, cold
- Purple: Imaginative, royal, spiritual
- Gray: Unemotional, compromising
- White: Innocent, pure
- Black: Luxurious, powerful
It is important to also remember that colors can have different meanings in different parts of the world so you should choose ones that reinforce the overall message and tone of the website.
- Using the color wheel as a basis for selecting colors
- Using a color scheme approach that promotes harmony
- Using colors that fit the context and emotion you are trying to display to users
- Using contrast to enhance the legibility of elements on the page
- Using shades and tints of a color to create flexibility
- Avoiding combinations that can cause issues for users
Color for UI
Using color to create a usable experience rather than just choosing harmonious colors. We must ensure our audience understands how to interact with our product and make effective decisions to doing what they want. You must look at a site hollistically through the eyes of a user. Applying the right colors to actions and messaging that the user will perceive and act on will be a powerful tool in improving the UI.
In this lesson, I explored:
- How to use contrast to imply hierarchy on a page and draw a user’s attention
- How to establish brand and accent colors and then how to properly apply them
- What states are necessary for buttons and forms
- How to properly provide feedback on error, success and warning messages
- How to use neutral colors to effectively communicate your content
- Why whitespace is important to the usability and aesthetic quality of your designs
- How to ensure your website is usable for all individuals