Color has more to say than it meets the eye. Color highlights, guides attention, and unifies the elements. In UX, color reinforces the functional and aesthetic features of a product.
Color wears many hats. Branding sees color as mood and perception. The development sees color in terms of functions. UX sees color as uniformity in the system across various platforms. Overall, color is a versatile tool in conveying different types of information.
To improve color decisions, let’s cover how to: pick a palette, prioritize color, and consider data visualization.
Picking a palette using color theory
Learning a few color elements (read more) will help pick the apt colors for the palette.
Hue & Saturation
Hue is basically a fancy synonym for color.
Saturation means the intensity of a color. At 100% saturation, color is at its purest.
Tint, tone, & shade
Mixing pure color with neutrals creates lighter and darker varieties.
Tint — color mixed with white
Tone — color mixed with grey
Shade — color mixed with black
Harmonious palettes
“All colors are the friends of their neighbors and the lovers of their opposites.”
— Marc Chagall
Monochromatic. The first idea for choosing colors that work well together is going for a monochromatic palette. This means to work with a single hue, and the variation in tints, tones, and shades.
Complimentary. Colors that are opposite to each other in the color wheel are considered complementary. By mixing these two colors, it is conveying contrast and interest. This is tricky to use in extensive amounts, but they are helpful when it is needed to highlight something, like a call to action.
Analogous colors are groups of three colors that are next to each other on the color wheel and a tertiary. Green, Greenish-Yellow, and Yellow are examples. An analogous color scheme creates a rich, monochromatic look.
How to create your palette
Here are a few ways to get started on the own color palette.
Create gradients: play with creating gradients from a harmonious palette.
harmonious palette
to gradients
Use photographs: choose a photograph and pick colors from it.
Prioritizing primary & secondary
Prioritize and determine the colors in the design system. They help to create visual consistency for the end-users.
Primary
Primary colors are used frequently in the interfaces. They include colors in branding, UI elements, and structure.
Here's the color palette for this branding:
The branding used on a Sign-Up Screen: (Check more on Sweet Chaos's Branding)
Secondary
Secondary colors consist of accents based on primary. Secondary colors can be used to show system feedback such as success, error, or alert.
Now about colors in Data Visualisation
For data visualization, use color to emphasize the visual of the data. It may need 6–12 colors to cover all use cases, depending on data complexity. Create a flexible tint stack with an extensive variety of hues and brightness.
Examples:
And that's a wrap to Part - 1 on How to use color in UX.
Coming up: color in UX - Test Accessibility of Colors.
Comments