Web I: Material Design - how to use the color tool

Hale this is a super quick video on how to use Google material designs color tools so you're just gonna go to material dot IO and then you're gonna go to resources here okay and then on the bottom let's go to the bottom you're gonna go to color tool okay so in the color tool this is gonna help you start to visualize what your color scheme is gonna look like okay so in your primary you are going to select a primary color so here's like a lot of different colors that you can choose from okay you can you can select whatever color you you'd like you can also put in a custom color so if you got a custom for instance if you're not happy with these colors you can you know find your color from illustrator another color picker you could put your hex color in here but the way that the material design system works is they recommend by starting with a primary color that is in the 500 range you can cheat with this little and maybe go like four hundred six hundred you know you have some wiggle room these these rules aren't like Dogma but they will help you create a really kick-ass color scheme so I would suggest making your primary color alright working with that and selecting one that's in this general color range and you could try different stuff you know I encourage you to kind of mess things up a little bit alright so maybe let's start with I like a dark theme so let's start with this text this color here so it look like a deep purple okay and what it will automatically do for you is it will give you a lighter version and a darker version okay and so this lighter version here which has this hex this is gonna be this is a color that's usually in the 300 range right so it's a purple that's in like the 300 range so this is about this color right a deep purple in the 300 range and that'll be for like secondary areas so if you toggle over you'll see that it's for like secondary areas right and the darker color around 700 right so this is 700 that'll be for like status bars up here right like so okay so you can kind of toggle around and you can see like how these colors are used all right and then for your your secondary color this is gonna be your accent color okay and accent colors usually come from this area the A's okay so a 100 to 700 and these are gonna be your brighter more saturated colors and what these are gonna be used for is these are really for like your accent marks okay so for instance you know y'all know I love this green alright so this is gonna be then my primary color for the accent which they're calling secondary and then the slightly lighter and then the slightly darker okay so again this will be in about the this color will be in about the 100 range so I think we're in 100 okay and then this color will be in about the 700 range maybe up a little bit alright so then if we toggle through you can kind of see what things will start to look like okay and so from here you can start to make some decisions right so maybe you're not like totally into how low these two colors are playing together you can always change things around you know in your in your actual app but this will give you a little bit of a starter so you know maybe we on the secondary we try out some different colors here right and just kind of see like okay so there's something kind of nice happening here we're still getting this like really really vibrant color but then as you can see like these are kind of playing nicely together so this is a really nice tool for you to just see like how your color scheme can kind of play together again you have your primary color right this is gonna be like your your biggest color and then sort of some accent colors for that primary color and then this is going to be your secondary color which is obviously again going to be for for like your accents right and then like you have to accent call - your accent color okay and then again if you're you know when you get to this page and you're like actually I kind of had something different in mind here you can totally click on here and go to custom and you can find that exact color that you're looking for right so you can kind of find that like exact color and the more that you adjust things right so maybe we go a little brighter here the more that you adjust things like the more things will change okay that's kind of nice it's kind of working really well okay so that's just like a small example on how to use this and then and this should just get you started with your color scheme again here's and then if you want to click here you can see what your text looks like you can try some different text colors if you want like for instance you know maybe we want to maybe want to do something different than white maybe we could try um maybe we could try like our yellow on that see what some of those type colors look like ooh that's kind of nice oh that's like really bad I like that you know and then like here's text on something else right so text on this color so maybe we want to actually go with white there you know um like a gray okay so you can so you have lots of different options and once you kind of find some things that are starting to like work to go like again you know this obviously doesn't make much sense you probably don't want to do that not everything needs to be perfect on these screens right but they will give you like an idea for you know how these colors are gonna play together and how they're gonna look in terms of like a UX and a UI so the way that you're gonna submit these is you're literally just gonna press on this link here it's gonna copy it to your clipboard and then you're gonna go over to the submission link and just put it in that file and that's it and I would highly recommend that you save this link for yourself obviously it'll be saved where you're submitting it but this is where you can really easily copy and paste your your hex codes for your color okay so again just click here it'll copy the link and then you just go over to the and submit that URL and that's how you will be submitting your color scheme alright good luck

Channel: KT Duffy

Views: 5,395

Keywords:

Id: nI-L8Xp76Hs

Length: 6min 47sec (407 seconds)

Published: Sun Apr 05 2020