UI Design | How to choose colors and color palettes

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 were 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 trued 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 saturations and brightnesses so to create a monochromatic color scheme or palette choose a single color or hue from the color wheel and change its 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 purple complementary 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 designer up play around with the saturation and brightness to create more refined color palettes split complementary color schemes use two colors that are on either side of its complement a triadic color scheme 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 it 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 color palettes for your user interface colors should follow proper color harmony using color theory formulas, I recommend colors Coolors.co for help with generating color palettes if you need it they should be scalable and additive within the larger scope of your 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 regardless of the color formula 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 a matured 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 I 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 its 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 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 Gray's by dragging the saturation over to the gray side of the color slider with one single hue blue we can design an entire interface if you're interested in more videos like this and want to get serious about learning UI and UX come check out our product design master course it's 100% original self-paced video content with assignments worksheets resources and project source files you'll have access to our Facebook community and one-on-one mentorship in our private slack Channel plus students get discounts on design resources like Sketch App an Icon Jar you'll come away with an original digital product design for your portfolio and a certificate of course completion when you're done check out the links below and learn more at designerup.co

Channel: DesignerUp

Views: 70,126

Keywords: Colors, UI, UX, Color Palette, Hue, Saturation, Brightness, Contrast, Visual Design, Web Design, Picking Colors, Choosing Colors, Brand Design, Branding, Color Scheme, Color Theory, Graphic Design, Color Theme, User Interface Design, Learn UI/UX design, Color Harmony, Color Tutorial

Id: wuZuvhF4u6U

Length: 6min 20sec (380 seconds)

Published: Wed Apr 03 2019