Super Practical Guide to Color Theory, Color Models and Perfect Color Palettes | UI Design

color is a matter of perception each color has a different defined wavelength yet each of us sees it differently depending on our scents faculties furthermore we all have different cultural or contextual associations that we tie to color there are a lot of great color palette generating tools out there that we can use when we're designing but sometimes you'll find in practice that the generated palettes just don't work as well in the context of our projects so what do you do how can you start thinking about and seeing color in a way that makes it easier

for you to choose and tweak to your needs [Music] hi guys i'm elizabeth from designerup helping you level up your product design skills i've done videos before on color theory and how to choose ui colors and also how to pick colors for more complicated ui problems but that's not the only way we can choose colors and for some of you this might be the key to understanding it one of our designer up students was recently struggling with this topic terms like complementary monochromatic brightness and saturation just weren't clicking for them so i set out to

break down color in a different way pulling from traditional art like painting and graphic design and framing it in a way that makes sense for what we do as designers when we're using our design software to choose colors and make them look good together this is my super practical non-technical guide to color palettes and color theory in ui design so you followed all of the color harmony and color theory tutorials to a tee and generated a complementary color palette but you notice that the colors don't seem to match very well or don't look great on

your uis perhaps they look harsh or are a bit muddy and unprofessional and you don't really know why what do you do now color harmony and color theory offer some formulas that we can use to start our color palettes it's an important foundation to understand and i've done a video all about color harmony and color theory here on our channel but creating beautiful color palettes isn't only about these formulas it's also about subtleties of balancing hue tint tone shade and temperature these are the levers that we can push and pull to achieve more balanced and

unique color combinations for our ui designs so first a little refresher on what these levers are and what they do color is the general term we use to describe every hue tint tone or shade that we see a hue refers to the dominant color family of the specific color we're looking at white black and gray are not usually referred to as hue or color a tint is any hue or mixture of pure colors with only white added a tint lightens the color but it doesn't make it brighter therefore a tint can range from slightly lighter

than your original color all the way to white with barely any of the color mixed in in our color pickers this means moving closer to white tone is any hue or mixture of pure colors with only gray added or moving closer to gray in our color pickers to be precise the definition considers gray as truly neutral in other words there are no pigments in the gray other than white and black a neutral mixture of gray no matter how light or dark will tone down the intensity of any color tone colors are generally considered more pleasing

to the eye they are complex subtle and sophisticated that's because bright pure colors are more often associated with children and primary colors shade is any pure hue or mixture of pure colors with only black added in other words it contains absolutely no white or gray a shade darkens the color it remains the same hue only a darker version of it therefore a shade can range from slightly darker than your original color all the way to nearly black with barely any of the color mixed in done by adding a touch of black to your color or

moving your color picker closer to black temperature is more about how we perceive the hue that we're seeing and we tend to divide these into two categories warm or cool warm colors are the colors that come from increasing the red or yellow tones in a hue these tend to evoke the feelings of passion coziness energy and motion they remind us of sunlight and heat and are often referred to as active colors cool colors are the colors formed from increasing the blues and greens these tend to invoke freshness winter stillness and calming they remind us of

ice snow and water and tend to be considered passive colors to start off it's important to understand what i mean when i refer to adding white black or gray since we're not working with paint and we're not actually mixing physical colors together when we design uis we need to think about this in terms of screens and for that we're talking about light and the mixing of that light to get a little technical there are three different color models you may have heard of that will help us understand how light and color work together a little

better the first is cmyk which stands for cayenne magenta yellow black this uses what is called a subtractive mixing of light to derive different colors rgb stands for red blue and green and uses what is called additive mixing of light to derive different colors and finally hsb or sometimes the b is referred to as v for value stands for hue saturation and brightness this uses a mix of these attributes to derive different colors cmyk is called subtractive because it refers to the light and the page because a page doesn't project light or shine it at

us the page has to reflect light off of it so when mixing these colors together you are in effect covering up the white of the page and thus reducing the amount of light that is able to be reflected off of it kind of like a kid mixing all of the finger paint colors together and getting black cmyk color models are mostly used for pages and with printers when these four colors are mixed together the overlap results in black subtractive means you are removing the white that's there or covering it up on the page rgb is

when red blue and green light is mixed together and the screen shines and projects that light out at us the overlap of all of these colors at full brightness results in us seeing white kind of like being blinded by bright floodlights rgb color model is used for digital screen design it's like having three bright red green and blue lights projecting out at us at full brightness turn them all on and you get pure white light turn them all off and you would see blackness finally we have hsb hue saturation and brightness these values change the

purity and density of color as well as how much light is projected through that color most of you might be familiar with this as it's what we most commonly see in our design apps as ui ux and product designers the hsb color model provides us with a radial of color or a color wheel in which we have a range of hues which are the colors saturation which is how much of the color there is and brightness how close to white or black on the scale the value is this is how we actually see color and

how our brains work it's most commonly used by ui and visual screen designers the hue is represented on a radial 360 degree scale of all colors the saturation is how dull or rich the color is and the brightness is whether the color is closer to white or closer to black on the scale by mixing the hue or color from the color wheel with the saturation and the brightness would result in a specific color so for the purposes of this lesson and choosing colors for our ui designs and in screen work we are going to be

using this color model now the computer doesn't know if you're designing for screen or paper and therefore it must be told by our design apps by default design programs like sketch and figma might show rgb for screens but you can easily change this to hsb in your design app just keep in mind that if you are changing to cmyk not all colors are cmyk and rgb reciprocal as i mentioned for this video we're going to focus on the hsb color model for our world of digital ui screen design so the first thing you'll need to

do is switch your color model or color space in your design app for sketch you can find that by clicking on a fill and looking for the drop down that's next to the hex and you should be able to toggle between the different color models so go ahead and select hsb in figma it's just as easy click on the color swatch and click on hex to toggle between the different color spaces just select hsb there are two large groupings of colors that you often hear about warm and cool warm colors are often considered active colors

because they draw more focal attention cool colors tend to be considered more passive because they recede a bit but depending on how rich the colors are and how they are balanced you could have soft warm colors that play the role of a passive element while more vivid colors play an active role in ui design we talk about visual hierarchy and primary and secondary colors both warm and cool colors can act as primary or secondary colors depending on the brand focus so now that you understand how colors appear on screen and on paper and all the

ways we can adjust them let's talk about how we can pull and push on these levers in our design software and balance our color schemes and color palettes but i'm going to talk about it a little bit more like a painter or an artist to help make this all a little less technical and a little more practical and relatable the trick to getting really great looking color palettes is to stick with one of the following categories or pair one category with neutrals the best part is you only need to find one color in your palette

to make all of the rest match in order to derive these different color categories we'll be focusing on pushing and pulling the levers of hue saturation and brightness on digital screens i've discovered that there's a formula and a safe range of saturation and brightness for each one of these following six color categories that will result in a perfect palette for every category every time the first category is jewel tones the second is pastel tones category three is earth tone category four is neutral tones category 5 is fluorescent tones and finally category 6 are the shades

category 1 jewel tones these colors are richly saturated hues named after gems like sapphire blue ruby red amethyst purple citrine yellow and emerald green think of the deep richness of a ruby red necklace or a royal purple crown these colors are regal deep and impart a sense of luxury i've discovered that the ideal saturation and brightness for creating jewel tone color palettes lies within a saturation value range between 83 and 73 and a brightness value range between 76 and 56 so let's take a look at what that looks like inside of our design app so

as i mentioned the ideal range for jewel tones is any hue that has a saturation between 83 and 73 and a brightness value of anywhere between 76 and 56 let's see how we actually use this formula to create these jewel tone color palettes first let's start with a set of black swatches so here i have six circles that are all black first thing we're going to do is take the first two values the value of the highest saturation and the value of the highest brightness so for our saturation we're going to set this value to

83 and then for the brightness we're going to set it to 76. what results is a beautiful deep rich ruby red color for the rest of the swatches it's even easier because all we have to do is select the next swatch copy the previous color and then without touching the saturation or brightness we're just going to slide the hue into a different color so i select the next swatch i match the fill color of the first one and then without touching the saturation or brightness i'm going to grab my color slider and just change the

hue and then we continue to do that for every single swatch select the previous color then slide the slider and voila you have a perfectly balanced dual tone color palette with this color palette every single one of these colors has a saturation of 83 and a brightness of 76 the only thing that's changed is the hue or the color so again we have a safe range in which we can have varying tones and tints of our jewel tones so let's try the other end of the saturation and brightness values starting with the first one we're

going to make our saturation 73 and then we're going to make the brightness 56 so you can see that this results in a darker version of the colors that we have in the previous palette and then we follow the same technique of selecting the next swatch copying the color from the previous swatch and then without touching the saturation or brightness just dragging the hue slider over and then continue doing that for the rest [Music] and now we have six more colors in our color palette each of these with a saturation of 73 and a brightness

of 56 and again the only thing that we've changed is the hue so within this range you have the ability to choose other saturation and brightness values with this color palette i'm somewhere in between the safe range of the saturation and brightness levels each one of these swatches has a saturation of 79 and a brightness value of 74 and we know that we're still in the jewel tone range because 79 is in between 83 and 73 and the brightness of 74 is still within the range of 76 to 56 so as long as you keep

your saturation and brightness within these ranges and you only change the hue slider you will still end up with a beautiful color palette that is jewel toned this technique can be applied to every single one of the color categories so if you're interested in seeing these and more color formulas and color palettes you should definitely come and have a look at our product design master course where i dive even deeper into color harmony color theory and color formulas so the next category is pastel tones these belong to a pale family of colors pink mauve and

baby blue are commonly used pastel colors as well as mint peach periwinkle and lavender the colors of this family are usually described as soothing we create these colors by reducing the saturation and adjusting the tint or dragging our color pickers into the white area the ideal saturation range for pastel tones is between 14 and 21 and the brightness range between 89 and 96. category 3 is earth tones these are colors commonly found in nature many earth tones originate from clay pigments like umber ochre and sienna they can be created by combining a pure hue with

white black or gray these are considered in the more broad sense neutral colors they are influenced by the tones of trees forests seas and sky and are muted and flat to emulate natural colors we create earth tones by increasing saturation and adjusting the tone or dragging our color pickers into gray the ideal saturation and brightness range for creating earth tones is a saturation between 36 and 46 and a brightness between 77 and 36 category 4 neutral tones pure neutral tones include black white beige and all grays while near neutral tones include browns tans and darker

colors these are created by desaturating our colors they pair well with any of the other categories of colors to create balance we create neutrals by decreasing saturation and adjusting the tone tint and shade meaning dragging our color pickers closer to the white gray black side of the color picker the ideal saturation and brightness range to create neutral tones is a saturation between 1 and 10 and a brightness between 99 and 70. 5 fluorescent tones sometimes called neon tones fluorescence is a result of photoluminescence phosphorescent color emits light when excited by visible or ultraviolet light in

the physical world this is created by neon tubing in which light is projected through or ultraviolet reactant paint colors but in the digital world we can get a similar effect by applying very bright and highly saturated colors to our designs we create these by increasing the brightness and the tone the ideal saturation and brightness range to create fluorescent tone color palettes is a saturation between 163 and a brightness between 100 and 82 [Music] and finally category 6 are shades the two main shades are black and white which are not normally considered colors but rather the

absence of light or dark or the addition of pure shade or pure tint other shades include all varying degrees of gray the ideal saturation and brightness range to create shades are a saturation between zero and zero and a brightness between zero and one hundred color categories you can also combine these different color categories such as pastel plus earth tones or joule plus pastel tones the best user interface designs use a combination of one of the main color categories along with neutrals and shades shades plus pastels are commonly used neutrals and earth tones are seen a

lot and fluorescents and shades whether on dark design or a light design are very common so why don't we talk about color like this well as digital designers we tend to avoid these categorizations of color schemes because the lingo seems more reserved for painters print designers and interior designers because what we're talking about here is a mixing of physical colors but on a practical level i've found that referring to color in this way can be extremely relatable and useful in ui and digital screen design as well especially when we're still learning color theory and getting

our eyes accustomed to selecting colors that go well together it's not an exact science but you can see how thinking about color in this way and having some levers and numbers to guide you can help you create more pleasant and refined palettes without all of the guesswork i like talking about color this way because it makes color theory and color harmony more relatable just because something's done the way it always has been doesn't make it right or better it's important to understand the foundations and principles of color theory and color harmony but when it comes

down to practical application referencing different disciplines and finding a good analogy that works for us can make a big difference what matters most as uiux and product designers is that we're able to use color effectively to get our message across and create the best user experience possible no matter how we go about getting there so what do you think of that technique do you think that you'll be able to use it to produce some cool color palettes let me know in the comments and if you like this and want to keep watching don't forget to

take a second to subscribe and click that bell icon and if you have any more questions about colors let me know and i'll be glad to answer them thanks again see you soon you