Give your site a fantastic color scheme fast

I realize for a quick solution, this video is kind of long, but I give you the easy solution first, and then we look at how you can step it up and get something looking a little nicer and more complex.
This isn't a look at color theory, but a quick solution to having a nice looking site quickly!
#webdesign #colorscheme
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@alibarznji2000]

I learned two things from this video, 1- Kevin is Canadian. 2- I have the same taste in colors as he has and I'm relieved

[@fev4]

Yes diving into fonts with this same format would be awesome!

[@hugodsa89]

Oh please !

[@franthor]

Agree!

[@MaYeRsNoLife]

do you know the name of thr software he is using to design ?

[@95waga]

@@MaYeRsNoLife adobe XD. It's free on adobe website

[@ThaEzioAuditore]

OMG please do more of these design theory videos ! As a developer this would completely go over my head and could never seem to pick out harmonious colours for my sites, thanks for that

[@suparthghimire1644]

Basically color theory is very important to learn for all designers! The Color Harmonies is the WAY to use colors for any sort of art work, and it works with designs. As Kevin said, black and white always work as they are complementary. The point where he says any color that matches the image goes well with B & W. This is because in color wheel white is the lightest shade and black is darkest shade of every color. Also at <a href="#" class="seekto" data-time="780">13:00</a> when he says the random shades and Shades are easier to work and looks good, that is because they are from Monochromatic color Harmony. They always go well in any design and art. Same is for complementary, analogous(adjacent colors), triadic, etc. there are alot to choose from. But yes, as Kevin says, using minimal colors make any website look good because our eye can focus on few colors that is easier to deceive. Final note, while using complementary colors it is important for the either color to be dominant (lighter colors are dominant most of the time). That is the reason why the brown and blue doesn't work at <a href="#" class="seekto" data-time="1130">18:50</a>. This is also why his site looks good without any third color (only black and white). White is lighter and dominant. :) Amazing video Kevin! :)

[@JaeHaruArt]

Where did you find material in the sea of random crap on it that's up now that properly explains it? I'm having a very hard time finding anything that'll actually teach me it in an easy to digest way and not just wasting hours looking at a million different peoples' videos...

[@suparthghimire1644]

@@JaeHaruArt watch blender gurus understanding color video!! There are alot of nice videos on internet! Read papers about color theory! Learn to filter out the content!!

[@izy931]

devs don't need this.

[@patgodfrey8451]

Luis H , yes. I believe you do. You are the custodian of accessibility, usability, and common sense. You work with designers and help keep them grounded. Without some design knowledge, you become a basic secretary and complicit. Without a smidgeon of dev knowledge, designers are going to specify ableist artefacts that may risk business goals. You code it - you own it. MHO as learning and ux designer who values whole team design and (underscore) responsibility.

[@suparthghimire1644]

@Eduardo Moraes Yes. Precisely. That's why they complement them very well. Black is absense of any color saturation and white is the brightest any color can be. That's why these two contrast each other. And as you know if you desaturate any color, they transform into black and white, which means black and white is in monospace of all available colors. And as monochromatic color scheme looks good in any condition, black and white are goto choice as either primary or secondary colors in your design.

[@stevezelaznik5872]

Starting with a black and white layout is a great suggestion. It reminds me of some of my friends who record music who recommend mixing in mono before making it stereo.

[@gwemula]

<a href="#" class="seekto" data-time="566">9:26</a> - "Don't get technical with me". I was honestly taken aback for a second there 😂

[@KevinPowell]

haha, listening to it now I sounded angry, lol. Too many pedantic people out there getting to me I guess!

[@YunisRajab]

Sounded like a dad voice

[@bradfordsuby8064]

@@KevinPowell Not sure how people could get pedantic about that, black and white couldn't be more complimentary and a great way to start.

[@n8_may]

I’m a developer going back to design school. this is prefect content for me, would love to see more of these design topics

[@Danachew]

Just subscribed! I'd love to see more content like this. I've always struggled with picking colors (I honestly struggle with web design in general since I'm all development), and this gave me a way better approach to it. Thanks for the awesome tutorial Kevin, I look forward to checking out more of your videos!

[@ZZPhobos]

I am studying this topic just a few hours ago because it's one of my weak spots and man this is a great timing. Thanks!

[@abhijitbarman4401]

Same here

[@gaafgeel6855]

Thanks Kevin, this video really helped me with some kind of daily struggle. Hope you are going to show some more of these practical tips & tricks! 👍🏼

[@phillipandrew87]

Just spent all day yesterday messing with this. Awesome timing. Amazing video! Thank you, Kevin!

[@ahmedkhaled1068]

One of the areas that I struggle with consistently, Thanks for this amazing tutorial!

[@urssounds]

Great coloring concept!!! That actually cleared up things that I somehow already understood on an intuitive level... Really helpful stuff on your channel! Love it a lot. The mix of technicalities and tasteful design!

[@AmodeusR]

What's awesome about this video is the fact you show how the perfect doesn't just pop up in the head from nowhere magically, but there's this experimentation proccess. In a youtube full of tutorials with pre-determined colors that you just copy and paste, it seems they "just know what they a doing so well they don't even need to try anything". This video is really magical when it comes to that, breaking those myths about design. Nothing just pop up from nowhere, it needs testing, experimantation.

[@ultimateanu]

This was super helpful! Would love more content like this, because as someone with more backend experience getting things to look good is often the hardest part!

[@CarloNyte]

Thank you so much for this! Please keep making more of this type of content. Not enough people talk about color in this way or this thoroughly!!

[@noirsociety]

This is what I love about learning and Kevin’s channel, in that, I am <a href="#" class="seekto" data-time="328">5:28</a> into the tutorial and his mentioning of CSS-Trick prompted me to go there to check out the color scheme. Little did I know, the next hour was spent learning about ‘Fluid Typography’ with CSS custom function max( ) + min( ). More so, I’ve learned how to hack these functions to work in SASS with calc( ). Now... I just need to stay focus and stay on course and finish the remaining 20 mins of this wonderful tutorial. Thanks Kevin and keep up the great work. It’s always a great learning experience watching your videos. Oh by the way, to make your fonts responsive: CSS version [ font-size: min(max(16px, 4vw), 22px ) ] SASS version [ font-size: calc( min(max(16px, 4vw), 22px ) ] Tutorial link [ css-tricks.com/simplified-fluid-typography/ ]

[@abdishakur2489]

A great video. This was my weakness and confused me on the way to get the perfect color match through out my website but after this tutorial am now able to blend different colors. plz keep going to put more Design contents like this one ✌. Thanks Kevin..

[@alimahdi6379]

Thanks Kevin. I like this purpose oriented approach to choosing colors. The focus is on making effective use of colors rather than just using nice colors. Great job.

[@cintron3d]

Really good reminder of the purpose of color. Thanks, I needed that.

[@nikikinz]

Yes, I like this type of "design" video as well as your coding videos. Great channel!

[@sandymurphy3322]

Awesome color tutorial - thanks Kevin. So many great takeaways. Would love more design tutorials, particularly fonts!

[@baseballphreak5]

A font selection video would be awesome. Thanks for all the great content!

[@abayomioloyinde]

definitely one of the best video on youtube for choosing colours for UIs

[@C.R..]

you just hooked me up with so much design advice, thank you.

[@GGdevelopment]

Hey Kevin! I really enjoyed the segment that you created. I really enjoyed learning about the colors and how are using efficiently or effectively. That's one of those things I struggle with the most is getting the colors to work for me and for the site. I would love to see more videos based on how to use colors properly and maybe dive a little bit deeper. Cheers. 🥂

[@DonovanChilders]

I enjoy your coding videos a lot, but I really like seeing your design workflow!

[@Defini3]

This is actually my biggest problem😂 I learned a lot about designing a website, how to center things and do animations, but colors really is a problem for so THANKS for this 😊

[@lucass.p9579]

Same here.

[@ne9835]

Same!!!!

[@animatedzombie64]

I too, I do copy color codings from other cool looking pages

[@amongdoomers9464]

@@animatedzombie64 😂😂

[@jonthoroddsen6467]

As much as I love your regular content, this was one of the most useful design tutorials I have come across. I think it's high time for more like this, maybe one where you also mention accessibility as you are designing

[@AnweshAdhikari]

Can't go wrong with you! Searched this video, 2 years later and I got what I was looking for!❤

[@BizRasam]

Wonderful tutorial Kevin! All your work is awesome.

[@mornir]

Yes, I would love to see more videos about design 😀 I like your teaching based on practice with actionnable tips. 🤗

[@elvismiranda9775]

Thank u so much, I was a lot of time searching how to use a color palette but this way is more easy and effective, I finally choose my website’s colors :) and I’m happy with the result

[@johnm4141]

Yes Kevin I'm interested !! You have amazing content. This is the best video I've seen on KZbin about UI.

[@malaak1h]

I simply love your videos Kevin. I wish I had found them earlier, would have saved me hours of experimenting.

[@Mark.Ritchie]

This will change the way I design websites and save me a huge amount of time. Thank you Kevin.

[@dereka6964]

I definitely want more of this content. - This is an area where a lot of CSS devs can improve, by visualizing and understanding what designers are thinking when spitting out comps to us. Thanks for all your hard work!

[@magicorpse]

Hi, this is the first video I watch from your channel. I am just starting developing websites by myself and I needed help on the design side of things. Like you said, I was making a rookie mistake by going with a full spectrum of colours that are presented on those schemes and wasn't working well. I really liked the way you explained that black and white are already two colors, so picking one theme colour might be better than adding 5 different ones. Now I m going to watch your video on how to make a website on adobe xd, because I really liked the way you changed things on the fly and experimented. Thanks for video, be well :)

[@richardjonas3956]

Has this guy ever put out a bad video? Every one of them I've watched so far is a gold mine of information and wisdom on this subject.

[@alexuqt]

This kind of video is soo valuable, thank you :) I love that you took the time to show many examples

[@jcopley100]

Very helpful, thanks. would be interested in seeing more like it.

[@sirisiri2416]

yes, definetely a good idea treating also Design and colors !!! Thank you Kevin!

[@AmandaLucaseu]

Loved the video Kevin, would love to see more design related ones

[@matthewbeardsley7004]

Thanks! That's a great intro into colours for webdesign, for a complete non-designer. +1 for font video!

[@felixfidelisu.2860]

Thank you Kevin. this video was helpful. Alot of people struggle with colors (how to pick colors for our design and how to mix those colors) we'll love to watch more on colors please. 🙏

[@fionasaiter1902]

Love this video. Thank you for making color simple. Yes, please do a video if you haven't already on picking fonts similar to this one... Love, love, love your videos!

[@Eric-wm1mi]

Very usefull, i'm choosing the colors for my website and i gonna use this approach. Thanks Kevin!

[@pd6055]

Turquoise and brown - one of my favorite color combos

[@semsquared7541]

I rarely comment on youtube videos but you have such quality content man straight to the point and very helpful

[@window.location]

Thanks for solving huge problem of mine. Now i can focus on code more instead of switching color every time. thanks sir ,❤ And we need more videos

[@wilfriedpeypoudat7494]

Very usefull advices for those who can't make the right choice with colors. Thank you, great video.

[@Daibutsumusic]

Love this one Kevin! I agree with what you had to say on use colors SPARRINGLY. Also, PLEASE do one on FONTS too! Thanks!!!

[@lunaticberserker5869]

I thought you'd pick the brown because coffee website = brown, but I didn't that the blue looked so well. I'm impressed!

[@adrbroadcast]

Excellent tutorial, as usual. Thanks : )

[@johnjohnson4484]

damn kevin got mad design chops

[@carstenberggreen7509]

Great examples! I worked in advertisement as webdeveloper years ago and this kinda knowledge is gold for webdevelopers who hasnt.

[@TheRonpe]

Useful stuff! I always wondered how I'm going to fit all those colors on the palette to a website.

[@jonathanlee8976]

Good content as always Kevin!

[@devilsadvocate6098]

Love the video, nice flow and it's very easy to understand!

[@pragyan_aryal]

Thanks a lot for making this video. Helped to understand colors.

[@siddharthasharma9731]

Really like bro, move around the one color is much easy and great awesome to look and feel. Thanks

[@mritz579]

Nice video man! Love your passion.

[@supratikdatta1929]

Very Educative video... Thanks a lot. Will love to see similar uploads

[@ebifleck]

Wow, thanks for a fantastic tutorial!

[@jojojawjaw]

GREAT TUTORIAL! Thank you

[@Luxcium]

Kev has made amazing improvement in his self confidence level and his energy the passion is the same because you know he is the most passionate about the CSS topic anywhere on the Internet (next after Jen Simmons to be honest) wow keep up your great work being among the most interesting channel about css on KZbin

[@glenn4140]

Love it! More design content please!

[@kristianabakratcheva8898]

Y E S - awesome video and would like to see more! Thank you, KP :)

[@Vapornator]

Thank you buddy and yes, a font vid on how to choose would be great!

[@tamalchowdhury]

I am like you, only using one color (3 colors including b&w). The idea of using just black and white to work on my design is great! It will make me focus more on the layout and less on the colors.

[@JoseRamirez-hd4ir]

Amazing video, Thank you Kevin 👍

[@CHINWENDUIZUAKOR]

Perfect! Great man. Thank you very much for this 🙏 . More please 👍

[@parasarora5869]

loved it !!! 👍👍👍...great tips and examples ... very happy ✌️😃✌️

[@sarahbober4167]

This was so helpful. I'm new to web development, and recently started working on a project. I immediately incorporated colors into my site and I kept getting so distracted - putting them here, switching them, switching them back, replacing one with a different color, replacing another with the previous one...etc etc etc! It's such a huge time sucker and a distraction from the whole point of making the project, which is to practice coding/markup! I'll definitely be using your ideas - starting with black/white, picking only a couple colors, and most importantly, keeping it simple.

[@malekmarkus6071]

thank you this is so helpful i'd like to see more design content if possible

[@tenzdhen]

I appreciate this video. It was very instructive, simple and helpful

[@clementyo4526]

Great video. This is the best video about color from some videos I watched before. Thanks

[@joaolucasgtr]

What a great content video! Thanks for sharing with us.

[@joeldcanfield_spinhead]

I LOVE design content. You know CSS, but I'm also impressed with how you talk about design. I'm comfortable with color but I still took a handful of notes. Good stuff. Gimme more!

[@enockomondi6588]

Thanks for this Kevin

[@marjan5170]

Thank you 😊 Your videos are amazing 🤩

[@shasantv]

Thank you for making this video on color. I would love to see more on color and fonts.

[@osherezra131]

Thank you great tutorial right to the point and practical keep it up

[@JJ29621]

Beatiful, heaps helpful, thanks Kevin, make more please

[@Mr.slikko]

Thank you very much That actually helped me a lot, I appreciate it

[@robertoayala6015]

Love it very well explained

[@williamlynch589]

Outstanding presentation!!!!

[@tagdesignwebsites]

I LOVE this THANK YOU Kevin :-)

[@umka7536]

Thanks a lot. With this video I managed to harmonize color palette of my site.

[@KevinPowell]

Awesome, glad it helped!

[@itz.nk24]

I never post a comment but this is a life saver!! Doing same format with fonts would be 🔥🙏🏽

[@joyvideos1802]

Thanks, I really need this color guidance

[@BruceYangtek]

simple and practicle, thanks!

[@ysammo214]

This sort of stuff is amazing and a nice refreshing change from the coding stuff. Please do more

[@Po4to]

I'm not sold on the brown-blue combo. Yes, they are complementary colors, but to me brown just doesn't look good in combination with anything other than other shades of orange, and that shade of blue just looks so cold. I don't pretend to know too much about UX, or color theory, for that matter, but my instinct would be to simply go for a different shades of coffee. In any case, this was - as usual with you - very insightful, giving much foood for thought, a good guideline, and helpful tools. Faving those color picker sites, will definitely have some fun trying stuff out.

[@shivarammuthukumaraswamy7164]

Thank you so much.Really appreciate it.

[@danielk.3017]

Really good video, thank you!

[@chrisclrk9]

Watching this on Christmas Eve in 2021, Thanks for the video it was very useful Kevin, Merry Christmas to you and your family.

[@fernandojsantos09]

Awesome... What a video... You helped me a lot

[@karenkharatyan1]

Big Job Thanks Kevin 👍

[@dantharx]

Great vid, thank you!