all right so welcome to the Teenage
Mutant Ninja Turtle
color theory by Louisa it's me hi I am
the director of the front-end
engineering program at the Turing school
of software and design we are a seven
month a seven month long developer
training program based out of Denver I'm
we see be on Twitter and a little bit of
background about me I had a very nice
introduction but a little bit of
background about me I've been a designer
for about 12 years and I switched over
to focusing on code about five years ago
and I love color theory like I think
it's just a really interesting
combination of like science and design
and aesthetics and just like human
factors with it's a really fun topic to
talk about and it's a really it's a
really important it's an important topic
because it can have a huge impact on
your users I'm also mostly from the big
square States and so I'm not really like
used to all the humidity so that kind of
means that this is my current hair
situation
ah yeah so that's just a disclaimer that
that's pretty much where I'm at and I'm
qualified to speak about color and the
teenage Mutant Ninja Turtles because I
wanted to be one of them so you can
trust me I even though it's missing like
the before primary qualifications to be
one of them which is that you know being
a turtle and a teenager and a mutant but
that's fine um so for this talk we've
got six sections we're gonna talk about
color groups we're gonna talk about
color associations we'll be talking
about the color wheel we'll be talking
about color combinations we'll be
talking about properties and terms
because we've got to be able to talk
about it and we'll be talking about
accessibility because it's important and
you should worry about it
so let's get started let's do it so when
we talk about color theory you need to
kind of start at the beginning you have
to like build your foundation and that
means we're gonna talk about color
groups so there are essentially three
big buckets that all colors fall into
they are warm cool and neutral so let's
dig into it let's talk about it a little
bit so
warm colors are gonna be sort of like
your Reds through your through your
yellows and these are generally thought
to be very positive and energetic so
these are colors like colors in this
group tend to have actually been shown
to have a physical effect on people they
can raise your blood pressure they can
increase your respiration they can even
enhance your metabolism and so if you
think about the kinds of brands that
often use colors in this in this in this
color group they're often trying to
communicate like fun or playfulness or
in like the case of like McDonald's
they're trying to like one encourage you
to want to eat more and then also kind
of move you through the store faster so
they can you know sell more high-quality
hamburgers then we have the cool color
group so again colors in this group are
kind of like basically the opposite of
our warm color group so they're gonna be
a little bit calmer a little bit more
soothing a little more relaxing you get
like your greens your blues and like
your purples in this range colors in
this group are often associated with
stability and composure and again if you
think about the types of brands that are
using these colors they're often they're
often trying to like really encourage
you to trust them so you'll see a lot of
like banks and hospitals and insurance
companies that tend to have their
branding skewing a little bit more
towards the cool side of the color
spectrum then we have neutral colors
these can you know sort of skew either
warm or cool depending on the specific
blend of the color so you'll see these
these top three colors are a little bit
cooler and then the bottom three colors
bottom two I can count that's fine the
bottom two colors are a little bit
warmer and so it's kind of so-so
neutrals are often basically they're
used most often is like the the base or
foundation of your color palette and
then a warmer a cool tone might be
pulled in as an accent color
so our final color group our group that
I'm going to be talking about it's a non
color group but we're gonna talk about
mutants a little bit so they tend to
also have you know fairly specific uses
and like a use cases you'll see the
minutes is you know generally pretty
pretty focused so if you think I like
the x-men or Godzilla or the turtles
they have they very specific use cases
also have very strong cultural
associations which leads us to color
associations so whether we realize it or
not colors have very very strong
associations built into them so if you
pick a color that your users don't like
they're going to be like pushed away
from using your site or using your
product simply because the cut we have
so we have such strong connection to
color and we have relate to it so
intensely that it can it can actually
like push people away so and and what
but what these what these meanings that
we have about colors can be a very
subjective so they can change or or vary
based on the communities or the cultures
that we grew up in so so some colors can
have variation have kind of one specific
meaning and one culture and a very
different meaning in another culture so
if you think about the color white in in
most Western cultures it's associated
with like purity and cleanliness and
maybe like a fresh start or in the
beginning and then in in other cultures
and some Eastern cultures it is
associated with death and it's often
like the color that is worn at funerals
it's like a color associated with
mourning so you know you can have these
two these this one color but two pretty
pretty vastly different meanings
associated with it so it's important to
understand understand that the
associations that are bound to a
specific color as you're applying it to
your product or or your team so when
we're talking about color associations
red is a color that has some of these
strongest associations bound to it and
it can be very polarizing it's a very
passionate color it can be associated
with love and it can also be associated
with like like the devil right so it's a
very polarizing color if you think about
the Turtles
we have Raph like good old Raphael good
old Raph and if we think about him he is
very strongly bound to these cultural
associations that we have with red
surrended this very passionate color and
so is Raphael he is like the hot head of
the group right so he's he's a little
movie moody he's kind of a Jersey boy he
gets a little sassy sometimes and he's
just this very like intense character
and has a lot of feelings sometimes like
when he's when he's happy he's really
happy when he's angry
and so if we think about some of these
like big sort of terms that are often
associated with red we have like
determination we have anger Rafael gets
a little bit angry sometimes he's a very
intense character which are all things
that are bound to read really intensely
if we think about orange oranges if you
still get some of that like intensity
and that that energy from red but it's a
little bit softened if the little tone
down if we think about it's a little bit
more playful whereas red could be very
intense and very like passionate oranges
is more playful and a little bit more
goofy and a little bit more lighthearted
so if we think about the Turtles with
Mikey
Michelangelo so he's like the goofball
of the group right so he's gonna be a
little bit more fun a little bit
easygoing he's still very like active
and engaging but he's not the same level
of intensity as Raphael so again if we
think about how we might see orange
applied in like the real world you often
see it applied to like children's toys
or like things that you really want to
just imply that you're having fun now
like you're having a good time then if
we get into blue so we're kind of
hopping back over to the cool side of
the color groups so blue is is a very
it's a very centered it's a very
centered and calming color and with the
turtles again we have Leonardo so
Leonardo is like the leader of the group
he's like the grounding force of the
turtles he's a very calm he's very
level-headed he is able to sort of like
read a situation and act appropriately
he's not going to just act out of
instinct or just because he's upset like
Raphael will he is very much like this
grounding force of the turtles he's like
the leader of the group he's also
incredibly focused and dedicated to the
team as a whole so these are all again
things that are we see reflected in the
color blue um they're like people of
Lowe's associated with loyalty and
intelligence and confidence and these
are all things that are reflected in
Leonardo then we have purple and purple
is a really interesting color so the
history of purple is pretty cool so it
was historically it's been really hard
to access the the dye to make purple was
very expensive it was really hard to get
and so the people who had it or had
access to it more often people that were
in sort of like either like monarchies
or like the clergy so they were there
were people who had access to money and
that meant that they were often more
educated than the rest of the population
which meant that purple is often
associated
with like wisdom and creativity and like
dignity and then if we think of the
turtles again we have Donatello and he's
like the engineer of the group he's the
problem solver he's always like he's
very like studious and he's industrious
he's still a little bit like he can get
a little goofy still but like he's the
one who's like he's the problem solver
so he sort of he really aligns with
these sort of historical associations
that we have with purple and we have
neutral and again neutral is like the
background that all of these other
brighter bolder colors can sort of rest
on top of it is very centered it's very
calming and then of course we have
splinter so splinter is like the
grounding force of the turtles he is
like the like consistent background on
like the turtles are like the little
accent colors that he is like supporting
and working with I'm so he's laying this
like really solid foundation for them to
kind of be themselves and grew into
their own it's great so now that we know
these big buckets about cultic all
colors fall into we can talk about the
color wheel so or as I've heard it
described that the pizza of color so we
now that we can just we can start to
talk about like the relationships
between colors and so the color the
color wheel essentially lets us
understand the purity of colors and then
also how they are created so it helps us
understand a little bit more of like the
Navy greeted behind what's going on
under behind the scenes so we start off
with primary colors so primary colors
are pure colors so these are gonna be
red blue and yellow so all colors come
from primary colors you cannot blend
other two colors together to create a
primary color they are like they're like
your source of truth when it comes to
colors so that they are out there the
base for all other colors I'll call all
other colors are made from combining red
blue and yellow and we talked about the
turtles
we got Leonardo and Raphael so again we
have this hot cool dynamics we have
organ like Leonardo's in the cool color
group Raphael is in the warm color group
they are the most intense like
passionate colors that we have the
personality types there but their
personalities are the most like intense
and like pure they butt heads a little
bit more they're they can kind of like
kind of get each other going a little
bit but they also can't like balance
each other out so if Raphael gets really
wound up Leo's
gonna be there to like bring them back
down a little bit and kind of calm him
down so they you get you get this hot
cool dynamic but they really they
balance each other really effectively
and really well and we have secondary
colors so secondary colors are created
by blending in equal amounts to primary
colors so you take like like red and
yellow blended together is gonna be
orange so essentially like you can just
take these two colors two primary colors
and blend them together in equal amounts
and turned it for the secondary color
and then when you come to the turtles
again we have Donatello and Michelangelo
so we still have that hot cool dynamic
like we Mikey Mikey's a little bit goofy
he's like the party guy and then Donna
tells a little bit more studious and a
little bit more focused but they don't
really butt heads the same way that
Raphael and Leonardo do because they're
secondary colors so their personalities
are a little bit toned down they're a
little bit less intense but there's
still these really bold punchy colors
that are still very like very
opinionated and have a lot of opinions
about things cool so now that we
understand some of how color where
colors come from we understand a little
bit of like the basics of the color
wheel we can start to talk about
combining colors because as we all know
making a color palette can be a little
bit overwhelming it can sometimes seem
like it's not gonna be that big a deal
and then it just turns into like like a
vacuum of sadness trying to find like a
nice color palette it can be hard so
we're going to talk about some basic
strategies for to kind of like help you
think about approaching color palettes
and how where to get started and how to
get how to roll with that so to get
started we're on the color wheel we have
the first sort of most simple type of
color combination as a complimentary
color combination and this is two colors
that sit directly across the color wheel
from each other and they so you're gonna
end up with a very high contrast pairing
like in this example we have the sort of
like a rich purple and then a bright
yellow so they're gonna be very high
contrast which means that you're gonna
get they're gonna be like you'll have a
pretty high a pretty pretty great
difference in involve of value so the
lightness and darkness of a color but it
doesn't they don't always look super
nice because they are so high contrast
so when you actually like but them up
against each other that that boundary
edge between them might actually have a
little bit of visual vibration so that
that line between the two actually might
kind of kind of vibrate a little bit it
might not be
super-nice so to kind of get around that
we have this concept of a split
complementary color so a split
complementary is basically you take a
complementary color combination and then
one of them you go up a tick or down a
tick on the color wheel to kind of
soften that combination just a little
bit so it's a little bit less a little
bit less high contrast a little bit
softer you'll see a lot of sports teams
are like leveraging split complementary
color combinations because they're
bright and punchy but they're not
necessarily like they don't necessarily
like fight too bad like when you
actually look at them they don't really
like fight too much then we had this
concept of triads so triad is
essentially you take a triangle and you
drop it on the color wheel and you end
up with a really equally distributed
combination of colors and again you get
a really vibrant bright combo without
having to and you kind of you can either
get a couple of cool colors and a warm
color or a couple of cool colors and a
warm color just it breaks it up really
nicely and you get it you get a nice
range of tones then we have a to tragic
color combination this is when you take
a rectangle and you drop that on the
color wheel and that means that you end
up with the turtles and this is as close
as they get to conspiracy theories so
we've got so we have we have the turtles
here and like what may have seemed like
an arbitrary combination of colors just
picked out of a hat willy-nilly is
actually very intentional so we can do
that we've got this very equally like
equally balanced very carefully crafted
combination of colors that gives us is
very soft nuts off but a very like
balanced color combination and a really
nice mix of hot cool and then very
aggressive and slightly softer
combinations and relationships between
colors and characters so there's a lot
of contrast but there's not necessarily
conflict so now so now that we have now
that we kind of understand the color
wheel we understand how to make like how
to start making some color combinations
now we're going to talk about color
properties so this is essentially going
to give us the vocabulary to be able to
speak about color a little bit more
effectively so we kind of
when we're working with it we can we can
speak a little bit better to it we can
explain it to our teams a little bit
more effectively and it also just makes
you like really fun at parties she can
just show them be like hey grandma
guess what so um it's really good for
holiday gatherings
protip so so we're gonna talk about this
let's dive right in so first we're gonna
talk about hue so hue is essentially
it's almost like a synonym for color it
is like a pure color so these are going
to be so something that could be
considered a hue is essentially like the
colors that you might find in a like an
8 pack of crayons so the colors that
have names so you could say like like
red or blue or green the colors that you
can really kind of you can identify a
name with a word those are often those
are often referred to as hues so cool
then we have value and so value
describes the lightness or darkness of a
color and it has to do with how much
light that color is allowing to reflect
back into your eye so if we have a
really dark color or that is going to
have a low value because that means that
it is absorbing more light than it is
reflecting back to you and then if we
have a a high value that means that it's
a light color which is reflecting more
light back into your eye than it is like
absorbing away from you so in this
example we have this really sort of deep
purple that is a low value and then this
really bright yellow that is a high
value so we have hue which is gonna be
the pure a pure tone a pure color and
then we have value which is the
lightness or darkness of a color then we
have tone so tones are made by mixing a
pure color with a neutral or a grayscale
of color and for this for this talk
we're gonna use it I'm just gonna use
white and black so essentially a tone
will be a little bit softer than the
original color so it essentially kind of
creates a range of range within a color
so so if you have like created a
complementary color combination and
you're like this is a little too intense
you could start to work with tones to
kind of soften one of those colors a
little bit so so tone would be just like
the the pure the pure to the pure color
and then within there we have tints so a
tint would be if you added white to a
color so you had a like a range
going towards to towards a lighter color
and then a shade would be if you edit
black and you went down towards a really
dark color so then we have saturation so
saturation defines the range of purity
of a color and this is pretty
interesting so you go from having a
hundred percent saturated so this very
very bright bold sort of yellowy green
color here and then you have zero
percent saturated which becomes this
gray and one thing that's kind of
interesting is that a completely d
saturated color while it is great it's
actually like tonal so it pairs really
this is a great way to find a neutral
color palette that works with an accent
color so if you're looking to find if
you want to if you have like if you have
a warm color or a cool color that you
really want to use as your is your
bright punchy accent color and then you
want to have a neutral background for
that desaturating one of that bad accent
color to that tonal gray and then
finding it like a range of tones within
that tonal gray is a really great way to
build out that that background because
it's gonna it's gonna work really
effectively with that really bright
punchy super saturated color
and since we're speaking about tonal
gray total Gray's actually pretty
interesting so when you're when you're
actually painting the way you get tonal
Gray's you can take two colors that are
on equal so total gray like just to
desaturate a color when you're painting
you take two colors that are on opposite
sides of the color wheel and you blend
them in equal amounts and eventually you
get to this tonal gray so essentially
the way you get to that gray color is by
combining all these elements by these
these colors together and then you end
up with this to agree that will work
really effectively with either color
that you started from and so when we
bring it back to the Turtles splinter is
your tonal grain so so if we think about
this he's like at the center then he's
at the core of the turtles he is an
equal combination of all of his students
right so he is he's at the center of
them if you combined any one of them in
equal amounts
you're gonna hit splinter cuz he's at
the core of their being he raised them
from tiny radioactive babies so so
splinter is essentially the tonal gray
of the turtles all right so
No so now that we know we have
vocabulary we can speak about color we
understand the color wheel now we're
going to talk about some accessibility
strategies because it's important and we
need to like as as was mentioned earlier
this morning like there is a large
percentage of the population that has a
color vision deficiency so that's about
it's about four-and-a-half percent of
the population in the US that's like 13
million people that's a lot that's a lot
of humans so what's important like one
of it one of the so most sort of
straightforward ways to help to help
avoid causing problems or struggles for
your for your users who are or some have
some amount of color blindness is to not
rely exclusively on Keller to deliver a
message to your users so as an example
let's talk about forms who did the love
a good form
super-nice so if we look at this example
we have we're using red and green to
show an error message like this form
hasn't successfully been submitted and
we're using red and green to show which
field was problematic cool like red
green that makes sense like green is
success red is error if you can see if
you can life if you have like full color
vision that works great that's awesome
what's not awesome is that the most
common form of color blindness is
red-green color blindness so what you're
essentially doing if this is your
approach to this is that you are setting
up a knot you're setting up a pretty
significant portion of your user base to
fail so I put I put this form through a
red-green color a red vein color vision
deficiency simulator here and now we can
see that it completely falls down like
this didn't submit I have no idea what
happened like I don't know what I did I
don't know what I didn't do I'm not sure
what's happening and I don't know how to
fix it so if I was a user I'd be super
upset I'd be afraid well depending on
what I was trying to do poster likes a
bit my taxes yeah I'd be really upset
but you know like you are we're not
helping them we're making it harder for
them so and again the the solution to
this is to not rely solely on colors so
we can combine color with other visual
communication tools to allow us to be
more effective and to be more effective
with communicating to
users so in this in this example we're
essentially using the same form we've
made a slight adjustment we're still
using red and green on the around the
inputs to dictate what in which inputs
failed but now we've added icons and
we've added an error message so we are
communicating we're like we're using our
words to explain where you're just
what's going on and we're also using
some pretty straightforward icons I
forgot the word for icon itself so we're
using some pretty some pretty pretty
like clear icons they might not be like
as we as we mentioned early again
earlier this morning like universal
icons aren't really a thing but if you
keep them simple like this is this this
combined with with an error message and
some some sort of like visual other
visual cues this is this is this will
work so now when we put this through a
color vision deficiency simulator now we
see that this still holds up I can still
figure out what's going on and what I
need to fix to make this worm go well so
essentially like this is a great example
of using color to highlight and
complement what's already on the page so
we already have icons we already have an
error message and we're using cop we're
not relying on color to be the primary
delivery method of this message where
we're using it to complement that so if
we're bring it back to the turtles so we
take a look at these guys and like we
are really so far we've been just
completely relying on color to tell
these guys apart but really if you think
about it they all kind of look the same
like they don't have noses you can't
really see they don't have different
like they just they look very similar
but what we can what we how we can tell
them apart is with their weapons so if I
put I put the turtles through a color
vision deficiency simulator and so now
you still know exactly who's who because
they all have very different and
distinct weapons so again like we're not
relying solely on color to communicate
which turtle is which we're just
complimenting what's already on the page
or the you know the reptile spine and so
so now we're communicating more
effectively and we've essentially we've
just made the Turtles accessible we did
it
alright so to sum up
we covered six parts and they covered
colors and conspiracy theories my
research and references were pretty much
exclusively being a kid in the 90s and
pretty sure I nailed it
you