Color, we hear a lot about it from color theory and color harmony to saturation and brightness but what does it all mean? When we're sitting down in our design apps, staring at blank artboards with that little rainbow color picker how do we actually figure out all the colors we're gonna need to design our websites our interfaces and our apps? I once had a mentor explain color to me in a way that was so easy I never really had to acquire any more knowledge about color. I pretty much design 80% of my apps with One. Single. Color. Maybe two if I want to go crazy and I want to tell you about that in the form of a little animated video.
Color theory revolves around the color wheel, it's about the formulas that create the basis for color palettes that have been proven to work harmoniously together. There are a few tried and true formulas that we can refer to to help ensure we're creating good color harmony within our color palettes.
Monochromatic color schemes use one hue with different saturation and brightness, so to create a monochromatic color scheme or palette, choose a single color or hue from the color wheel and change it's saturation or brightness for each of the other swatches
Analogous color schemes use colors that are next to each other on the color wheel
these can be warm colors like orange and yellow or cooler colors like blue and
Complimentary color schemes use colors that are on the opposite sides of the color wheel for instance, purple and yellow which is the color scheme we use for DesignerUp. Play around with the saturation and brightness to create more refined color palettes.
Split Complimentary color schemes use two colors that are on either side of it's
Triadic color schemes use three colors that are evenly spaced and
form a triangle on the color wheel.
If you need a darker color variation you need to increase saturation and decrease brightness, so drag your color picker farther away from gray and closer to black.
If you need a lighter color variation you need to lower the saturation and increase the brightness, so drag your color picker closer to gray and farther away from black. Tt is possible to design an entire interface with one single color or hue so let's talk about how we can do that.
Guidelines for choosing UI color palettes and schemes
Follow proper color harmony using color theory formulas, I recommend colors Coolors.co for help with generating harmonious color palettes if you need it.
Colors should be scalable and additive within the larger scope of your user interface and design system, so make sure to have multiple shades of grey and low saturated colors to work with. They could also have a systematic pattern which can be added to as the needs of the design system grows, in this case each hue has its own mini palette within it that can be expanded on when needed.
Regardless of the primary color you choose to use, make sure to always tint your grays and blacks with a little hint of your brand color, pure blacks and grays can be too harsh and appear amateur.
Even more important than the color you choose, is how much contrast is
between those colors. Contrast is what leads to proper visual hierarchy and
lets the eye know what to look at. It's also a big part of ensuring
accessibility. For those that can't detect the subtleties from one color to
another, it's contrast that really matters. WCAG 2.0 refers to the standard set for
accessibility, each guideline has three conformance levels A, AA and
AAA, AA is widely considered the industry standard. Colorable is a
great tool for testing your text color contrast, you can mess around with
various colors and get a pass or fail based on contrast standards.
Steps for choosing your UI color palettes and schemes
- Choose your base color first the primary or dominant color of your UI usually your brand color
- Next, choose the swatches near your base color. Change only the saturation or
brightness, leave the hue alone.
- Finally, choose your darkest color and a bunch of different grays by dragging the saturation over to the gray side of the color slider.
With one single hue; blue, we can design an entire interface!
Learn product design and UI/UX 1:1 with us.