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
