Embedded Files
What is color?
What is color?
Color is a good place to start when thinking about designing your project. Picking the right color or colors for your design can be hard.
Color is particularly useful for creating contrast, grouping elements, and encoding quantity. As a place to start, think about how color can subliminally affect how your user views your design. Think about how color directs your eye on the page to important parts of the design, like the title or the section headers.
How to choose a color?
How to choose a color?
Because color is connected with emotion, color choices have an immense influence on a viewer’s perception of a design. Choose colors based on what associations your audience will have with the color.
For example, many people find blue to be a calming color. So, if we were deciding what color to make a meditation app, blue would help communicate the intentions of the app.
Here are some western perceptions of the major colors:
How to put colors together?
How to put colors together?
1
Color schemes
Color schemes
Some colors look better with another. The usage of the right color palettes, or color schemes, is essential to make the project more attractive.
This is why color schemes were created. We can name the color schemes to help categorize them: monochromatic, analogous, complementary, triadic, split complementary, square, rectangle.
You might have a monochromatic poster, which uses variations of a single color. There are a variety of ways of combining colors.
2
Tools
Tools
It's pretty tricky to choose a color scheme from scratch. There are several tools to help you choose a color palette:
Color Hunt: Gives you access to user-made color schemes from designers across the world, and its “popular” filter is great for getting an idea of what palettes work well.
Coolors.co: Another color scheme generating tool. You can browse thousands of color palettes by entering the website and using your space bar to browse.
3
Clemson Brand
Clemson Brand
One important color scheme to note is Clemson's brand colors. "Clemson Orange" is not just any orange - it's a very specific color, as you probably know!
You can see all of the Clemson colors on the Clemson brand guide.
The Clemson colors are an example of a secondary color palette because orange and purple are secondary colors.
4
Hex codes
Hex codes
Hex codes are an easy tool to use specific colors across platforms. Hex codes are six-digital codes, generally preceeded by a hashtag. For example, we can make sure that we are using the Clemson specific orange when making our infographic by finding the proper hex code. The Clemson orange hex code is #F66733, as seen in the above image next to "web," under the orange box.
#F66733
5
60-30-10
60-30-10
When you're deciding how to use your colors, consider the 60-30-10 rule: use your colors in a 60% + 30% + 10% proportion. This old interior design rule is meant to give balance to your colors. The formula works because it allows the eye to move comfortably from one focal point to the next. It’s also incredibly simple to use: 60% is your dominant hue, 30% is your secondary color, and 10% is for an accent color. Even if your palette has more than three colors (but please, no more than five), keeping things in balance will be cleaner to the eye and more comfortable for your users’ brains.
Color accessibility
Color accessibility
1
Always keep in mind meeting the needs of those with color blindness or other vision deficiency. Your poster should be as accessible as possible to everyone in your audience!
2
Make sure that your design has enough contrast between the text and the background colors. Here are some contrast checkers:
WebAIM - use hexcode to check contrast standards. Type in the Clemson orange hex code (#F66733) for the background and change the foreground to white to see that it's not accessible to put white text on Clemson orange background unless the text is large and bold!
Color Safe - create accessible color palettes
3
Employ color blind-friendly palettes to accommodate the multiple varieties of colorblindness.
Don't rely on green and red to indicate good and bad results, as red/green color blindness is one of the most common.
Color Brewer - generates colorblind safe color palettes for your data
Continue to the next page:
Continue to the next page:
Page updated
Report abuse