Give your site a fantastic color scheme fast
ฝัง
- เผยแพร่เมื่อ 28 พ.ย. 2019
- 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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 2](http://i.ytimg.com/vi/YpQnHoQvZt4/mqdefault.jpg)
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
Yes diving into fonts with this same format would be awesome!
Oh please !
Agree!
do you know the name of thr software he is using to design ?
@@MaYeRsNoLife adobe XD. It's free on adobe website
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
9:26 - "Don't get technical with me".
I was honestly taken aback for a second there 😂
haha, listening to it now I sounded angry, lol. Too many pedantic people out there getting to me I guess!
Sounded like a dad voice
@@KevinPowell Not sure how people could get pedantic about that, black and white couldn't be more complimentary and a great way to start.
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 13:00 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 18:50. This is also why his site looks good without any third color (only black and white). White is lighter and dominant. :)
Amazing video Kevin! :)
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...
@@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!!
devs don't need this.
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.
@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.
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.
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.
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.
I rarely comment on youtube videos but you have such quality content man straight to the point and very helpful
I’m a developer going back to design school. this is prefect content for me, would love to see more of these design topics
Turquoise and brown - one of my favorite color combos
This is what I love about learning and Kevin’s channel, in that, I am 5:28 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/ ]
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!
I thought you'd pick the brown because coffee website = brown, but I didn't that the blue looked so well. I'm impressed!
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 😊
Same here.
Same!!!!
I too, I do copy color codings from other cool looking pages
@@animatedzombie64 😂😂
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!!
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
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!
Same here
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!
definitely one of the best video on youtube for choosing colours for UIs
Great examples! I worked in advertisement as webdeveloper years ago and this kinda knowledge is gold for webdevelopers who hasnt.
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! 👍🏼
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.
I appreciate your showing the process. Could’ve been done in half the time. Keep making those
This kind of video is soo valuable, thank you :) I love that you took the time to show many examples
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
One of the areas that I struggle with consistently, Thanks for this amazing tutorial!
Yes Kevin I'm interested !! You have amazing content. This is the best video I've seen on TH-cam about UI.
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!
Can't go wrong with you!
Searched this video, 2 years later and I got what I was looking for!❤
Just spent all day yesterday messing with this. Awesome timing. Amazing video! Thank you, Kevin!
Perfect! Great man. Thank you very much for this 🙏 .
More please 👍
Wow, I must say this might be the best tutorial on TH-cam for getting a decent color scheme. The examples you took were great. And I would really REALLY love to see more UI / UX Design tutorials and maybe some Speed Arts too! Thanks Kevin, keep it up!
Great video. This is the best video about color from some videos I watched before. Thanks
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..
I enjoy your coding videos a lot, but I really like seeing your design workflow!
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 :)
Best video on basic colors. First 7 minutes is all you need. Disagree on the primary color of turquoise though.
Really good reminder of the purpose of color. Thanks, I needed that.
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.
🙏
This will change the way I design websites and save me a huge amount of time. Thank you Kevin.
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. 🥂
A font selection video would be awesome. Thanks for all the great content!
I appreciate this video. It was very instructive, simple and helpful
you just hooked me up with so much design advice, thank you.
Watching this on Christmas Eve in 2021, Thanks for the video it was very useful Kevin, Merry Christmas to you and your family.
Wonderful tutorial Kevin! All your work is awesome.
Yes, I like this type of "design" video as well as your coding videos. Great channel!
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.
Awesome color tutorial - thanks Kevin. So many great takeaways. Would love more design tutorials, particularly fonts!
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!
Very usefull, i'm choosing the colors for my website and i gonna use this approach. Thanks Kevin!
Nice video man! Love your passion.
Very Educative video... Thanks a lot. Will love to see similar uploads
Good content as always Kevin!
GREAT TUTORIAL! Thank you
Love the video, nice flow and it's very easy to understand!
Amazing video, Thank you Kevin 👍
Useful stuff! I always wondered how I'm going to fit all those colors on the palette to a website.
Very usefull advices for those who can't make the right choice with colors. Thank you, great video.
Yes, I would love to see more videos about design 😀 I like your teaching based on practice with actionnable tips. 🤗
Thanks a lot for making this video. Helped to understand colors.
yes, definetely a good idea treating also Design and colors !!!
Thank you Kevin!
Thanks! That's a great intro into colours for webdesign, for a complete non-designer. +1 for font video!
as a programmer, i felt sucks when i design my portfolio as it looks awful. This video helps a lot!!
Thank you 😊 Your videos are amazing 🤩
I simply love your videos Kevin. I wish I had found them earlier, would have saved me hours of experimenting.
Thanks a lot. With this video I managed to harmonize color palette of my site.
Awesome, glad it helped!
Very helpful, thanks. would be interested in seeing more like it.
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 TH-cam
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.
Beatiful, heaps helpful, thanks Kevin, make more please
damn kevin got mad design chops
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!
Really like bro, move around the one color is much easy and great awesome to look and feel. Thanks
Thanks lot, this is amazing tricks to select color and apply them on design, please make more such videos
Very helpful video for beginners 👍
The guy that explains better than the teacher
Love this one Kevin! I agree with what you had to say on use colors SPARRINGLY. Also, PLEASE do one on FONTS too! Thanks!!!
Yes! More Design content, please!
I LOVE this THANK YOU Kevin :-)
Thank you buddy and yes, a font vid on how to choose would be great!
simple and practicle, thanks!
25:00 yessss please more design and layout contents. Advices on how to make websites look better and things not to do or forget. That would help us a lot.
Thank you for the wonderful video
thank you this is so helpful i'd like to see more design content if possible
Thank you great tutorial right to the point and practical keep it up
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
Really good video, thank you!
Wow, thanks for a fantastic tutorial!
very useful video, very comprehensive
Please more videos about this topic!
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.
Its great, gives better insight to design for web developers to help create better sites especially if your designer is too busy
Outstanding presentation!!!!
Thanks, I really need this color guidance
The best thing about this video was the end! Just kidding! I liked the idea that you should start in black and white until the layout is signed off. Beyond that there are a lot of subjective issues on colour (UK) choice. A maximum of 3 colours also seems very good advice.
Excellent tutorial, as usual. Thanks : )
Love it! More design content please!
Thank you so much.Really appreciate it.
NICE! Great tip. Start with black & white. Now, in my mindset, I can approach a site’s colors without stressing about which ones will work together. Maybe it’s just me, but My brain would get stuck before it even started.
Lot’s of other tips too.
Fantastic!