The Top 6 Color Scheme Pickers and How to Use Them

today you're gonna learn all about color scheme pickers before we begin this video sponsors hellosign which offers an API that helps companies grow revenue faster by automating document workflows with a developer friendly ease signature API that makes it simple and easy to embed secure in legally binding documents directly into your website jeetu crowd says hello signs API is two times faster to implement than any other esign provider you or you're devs can send your first API call in minutes and your app certification is always free and you won't find an e-signature product with an easier path to implementation alright let's get back to it Thierry Simon here of course etro so in the past I've had a lot of people in the YouTube comments and such asked me about how I choose colors or are there any color theme color scheme pickers or generators that I would recommend so finally I decided to address this in a new video and we're gonna take a look at six different color scheme generators and tools that you can use to help you win you're starting a new project whether that be for a brand new project UI project or just coming up with the essentially the colors that are a part of a company's visual identity and there's a bunch there's a ton of them but I chose six of them and I'm gonna show you exactly you know how do you use these and also which one is my personal favorite alright so today's question is how do you choose color schemes when starting a new project so if there's a tool that you use you know it could be the ones one of the ones I mentioned or not go ahead and mention it in the comments and yeah let's go ahead and get started alright so the first one that we have up is peloton comm I think that's how it's pronounced and this one's been around for a long time the interface as you can see is not exactly the most modern so it's a little bit older that you could tell but the way this works is you choose a primary color right here and you can just drag this thing around and then you have a preview to the right-hand side now you can see we have different swatches over here and you can control these by dragging these in and out so if you drag them real close in you could see the contrast is greatly reduced and then if you drink it bring it way out you can see the contrast is increased and it's reflected up here in this pallet all right and then from there once you have your primary color chosen let's say you know everybody's using this color these days it seems like this is a monochromatic version you'll see that a lot of these color theme pickers are split up into monochromatic verse the second option here is adjacent colors and the way this works is you could see it's going to use a color theme with adjacent colors in the color wheel here and of course you can move these all around and you can see how this color theme over here responds and then next we have a triad and you can see based on the color wheel we have a an area where it's basically a triangle in this color wheel depending on where you slide these things so it gives you a lot of different fine control and it might be a little bit more like for instance if you have if you think you're bad at choosing colors this might be a little bit more difficult because it gives you a ton of control but in all of this control you might come up with a color scheme that's not exactly the best so also there's a tetrad which is a four color combination here and free style for color over here alright so the next one that I have here and these are in no particular order is color mind and this one is quite interesting basically let's say for instance you have a primary color that you absolutely know you want to use that's a part of your website theme well let's say you may not even have it right away either way and you can click keep on clicking generate until you can find something maybe a particular color or maybe two colors that you like a lot and then once you do that you click this a little lock icon here so let's say we really like this type of blue so we're gonna click lock and now when we click generate it's going to keep on generating other colors however this one's going to be locked and so you can kind of keep going through this process until you could find a color thing that you think really works well together so for instance let's say you also like this is a secondary or primary color so we lock those two we'll keep going on through these this perhaps could be like a website background that would work well with this color as a foreground so we'll lock that one as well and this could be another color that could work on top of this right here and eventually you'll come up with a full color scheme like this so of course you can come down here as well and they also have other potentially popular I'm not sure if there's a social element to this to this particular site but there's a lot of different other color schemes that you can use and there's also tips about how to use this tool as well all right the next one is flat UI colors calm this one's been around for a while and they I believe at the beginning of this year they came out with a version 2 thus flat UI colors - and this one's kind of interesting it's not your typical color palette that you would associate you know with maybe just four or five different colors these are split up into countries and it sounds a little strange but basically they do have an About section which will link to a medium.com article that describes what exactly is happening here but in a nutshell they've had 13 designers from 13 different countries create these color palettes that you can then use essentially and you just click copy and it will give you the hex color code for this depending on what you want to use so I don't think it's intended for you know a single one of these single 13 color palettes to be used on you know a single project but it's just giving you ideas all right the next up is material palette comm so what comes to UI design material design you know huge design system very popular from Google and if you're familiar with material design then you know this is basically I they they have there's a bunch of different colors and then different shades of colors the way this works is pretty simple you have to choose at least two colors so we'll choose a blue and then a light green and once you do that and you choose these two in a check marked right here you can see you have a mobile design in based in the typical material design aesthetic where it will show you based on the first one that you chose would be the background and then your accent color is designated right here in the form of a button so if you want to change the button to different hues you can do so right here and then at the end you could click download to download this and it provides you with SAS CSS less SVG PNG options etc so yeah definitely interesting here especially if you're working specifically with in a material design project after that we have color lovers calm alright so once you get there you can go to forward slash palettes or just click on browse palettes right here and this is kind of a social take I in terms of helping you pick color schemes so it's argumentum ad populum as it's called which is a logical fallacy of sorts just because some if something's popular doesn't mean it's the best but still it'll give you good ideas in terms of what people do like so you can sort these by most loved by the default it's just showing you the newest ones generated and anybody can generate these you can create an account and generate them but as you can see these are some are very very popular the one that says most loved people can love them so this has just about twelve thousand loves on them and seven hundred and eighty comments just based on a color scheme so people get really into this stuff and as you can see there's a bunch of here a bunch of these to choose from so you choose one for instance and it will provide you with differ information about this particular for instance the RGB values the hex values and all that and this one is I this particular color lovers com4 / palette tool has been around for several years right now alright and then after that finally last but not least and and in my opinion the best of all these I like this one a lot is coolers or colors dot Co so that's c ool cool so let's go start the generator and we can see it's using some sort of modern JavaScript front-end framework or library I really like this UI because it's very simple and it has the colour scheme split up into five columns that are just really large on your screen so that you can really get a feel for what these colors look like so when you hover over them you'll see several options first of all before we get to those options if you want to randomly generate the new color scheme you just hit your spacebar making things quite easy so the first thing you could do is you can choose alternative shades just as a quick way to change up the lightness based on what the current color is here I'll leave it right here though and then second we can drag these around so that we can see how they interact with other adjacent colors that have been chosen next after that we can choose adjust to get even finer control to specify you know exactly the brightness saturation in hue of this given color and then finally just as any other example we can lock it so say we really like this we're gonna lock this but now we're gonna try to get some other ideas you know I actually like this one too right off the bat with how they contrast with each other and they're kind of in the same hue and they're monochromatic in that sense so if I hit the spacebar we'll have some other options this is an interesting one you can make your final justments to this if you want to we can drag this over see how these interact with each other so let's go ahead and lock that one all right and then you can just keep on going on down line until you come up with some other colors that work well with each other so for instance I working within this this same bluish hue here I might want another one that is let's just wait till we get to one that's around blue actually I kind of like this one possibly for like a website background color we'll lock that one and then we'll go ahead and we'll make some adjustments here we'll take this into more of a blue hue and then we'll take the brightness up real high in the saturation down kinda low I may be something right around here and then I would lock that and maybe drag this over something perhaps something like that but you get the you get the point I mean this is the process of coming up with color schemes if you're gonna do it on your own now of course there's a lot more involved with this so for instance we can click on settings and we can choose isolation mode and that changes us up so that the columns actually have a gutter between them I personally don't like that because I like to see how the colors interact with each other and then also we have monochromatic mode so that when you do try to generate new colors with this base bar it's going to stick around the same hue and then secondary info it'll provide you just with a name of the color or RGB CMYK Pantone even which is helpful if you're doing with print and all that good stuff you can also pick colors from an image so if I choose pick colors from an image and then take a picture of myself here it's gonna automatically generate a palette and you can click on auto and this palette will change up based on the primary random colors that are chosen from here alright so very interesting if you click on collage it's going to take these five different colors and put them in the familiar background I believe or maybe not and so that's the use case for picking colors from an image let's say for instance you have a landing page that has you know a photograph of some sort that's a prominent part of the UI and you want all the other UI elements to match it well that's a great way to do that picking colors from an image also you can adjust these to show what these particular colors will look like to a person who suffers from these different types of colorblindness very interesting so prove I'm gonna try to pronounce these I'm gonna just butcher them but we choose the first one you can see how they change from normal to this this one right here Thierry don't even try to pronounce them I you can see as you change these up I mean this one whoever has a crow the acro form of colorblindness pretty much can't see colors I mean this these all look gray to me you can see how much it changes up so this could potentially affect your decisions when it comes to your colors I because you definitely want somebody who has this type of form let's click on the other one to see how much it changed yeah it seems like this is most severe you want to make sure at least they do contrast with each other on some level because if you if you choose a color let's say for instance let's I let's try to change this up so if I go to adjust right here we'll go around here here yeah just like that and then I go to this one we take the saturation right right around the same area and then I just change up the hue for instance all right we could see there's a difference between these two but if you take the colorblindness you can see there's barely a difference so that may affect your your decisions going forward adjust palette you can change everything all five of the colors based on saturation brightness temperature let me change this back by to normal so we could see this a little bit better like that so to really take the brightness down if you want or the brightness up in temperature alright finally you can export everything as a URL PDF PNG SAS or SVG and I'm not even sure what that last option it was perhaps somebody can educate me and then what we can also do is explore so that's the generate tab but you can actually explore I more in a social setting with predefined color palettes kind of like in the other example so you can click on pics or you can click on best and you can see all of these color schemes I don't export this but we can view this and it'll show you in the whole generate tab based on what you want to use alright hopefully you found that helpful also answer today's question which is how do you choose color schemes when starting a new project alright I'll see you guys later with new videos goodbye [Music] [Music]

Channel: DesignCourse

Views: 62,671

Keywords: color picker, color schemes, color themes, color scheme pickers, color theme pickers, how to pick colors, color theory, how to choose colors, color picker tools, color theme tools, color scheme tools, colors for web design, colors for ui design, colors identity design, colors for logo design

Id: RGtDqHK8XGo

Length: 16min 56sec (1016 seconds)

Published: Thu Sep 13 2018