Тёмный

Give your site a fantastic color scheme fast 

Kevin Powell
Подписаться 914 тыс.
Просмотров 323 тыс.
50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

 

28 ноя 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 424   
@alibarznji2000
@alibarznji2000 3 года назад
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
@fev4 4 года назад
Yes diving into fonts with this same format would be awesome!
@hugodsa89
@hugodsa89 3 года назад
Oh please !
@franthor
@franthor 2 года назад
Agree!
@MaYeRsNoLife
@MaYeRsNoLife 2 года назад
do you know the name of thr software he is using to design ?
@95waga
@95waga 2 года назад
@@MaYeRsNoLife adobe XD. It's free on adobe website
@ThaEzioAuditore
@ThaEzioAuditore 4 года назад
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
@gwemula
@gwemula 3 года назад
9:26 - "Don't get technical with me". I was honestly taken aback for a second there 😂
@KevinPowell
@KevinPowell 3 года назад
haha, listening to it now I sounded angry, lol. Too many pedantic people out there getting to me I guess!
@YunisRajab
@YunisRajab 3 года назад
Sounded like a dad voice
@bradfordsuby8064
@bradfordsuby8064 3 года назад
@@KevinPowell Not sure how people could get pedantic about that, black and white couldn't be more complimentary and a great way to start.
@suparthghimire1644
@suparthghimire1644 4 года назад
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! :)
@JaeHaruArt
@JaeHaruArt 4 года назад
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
@suparthghimire1644 4 года назад
@@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
@izy931 3 года назад
devs don't need this.
@patgodfrey8451
@patgodfrey8451 3 года назад
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
@suparthghimire1644 2 года назад
@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
@stevezelaznik5872 3 года назад
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.
@n8_may
@n8_may 3 года назад
I’m a developer going back to design school. this is prefect content for me, would love to see more of these design topics
@AmodeusR
@AmodeusR 3 года назад
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.
@Defini3
@Defini3 4 года назад
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
@lucass.p9579 4 года назад
Same here.
@ne9835
@ne9835 4 года назад
Same!!!!
@animatedzombie64
@animatedzombie64 3 года назад
I too, I do copy color codings from other cool looking pages
@amongdoomers9464
@amongdoomers9464 3 года назад
@@animatedzombie64 😂😂
@richardjonas3956
@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.
@CarloNyte
@CarloNyte 2 года назад
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!!
@Danachew
@Danachew 4 года назад
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!
@alimahdi6379
@alimahdi6379 4 года назад
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.
@gaafgeel6855
@gaafgeel6855 4 года назад
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! 👍🏼
@abayomioloyinde
@abayomioloyinde 4 года назад
definitely one of the best video on youtube for choosing colours for UIs
@ahmedkhaled1068
@ahmedkhaled1068 4 года назад
One of the areas that I struggle with consistently, Thanks for this amazing tutorial!
@ultimateanu
@ultimateanu 3 года назад
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!
@phillipandrew87
@phillipandrew87 4 года назад
Just spent all day yesterday messing with this. Awesome timing. Amazing video! Thank you, Kevin!
@urssounds
@urssounds 2 года назад
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!
@noirsociety
@noirsociety 4 года назад
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/ ]
@Mark.Ritchie
@Mark.Ritchie 3 года назад
This will change the way I design websites and save me a huge amount of time. Thank you Kevin.
@ZZPhobos
@ZZPhobos 4 года назад
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
@abhijitbarman4401 3 года назад
Same here
@abdishakur2489
@abdishakur2489 4 года назад
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..
@jonthoroddsen6467
@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
@AnweshAdhikari 2 года назад
Can't go wrong with you! Searched this video, 2 years later and I got what I was looking for!❤
@cintron3d
@cintron3d 4 года назад
Really good reminder of the purpose of color. Thanks, I needed that.
@elvismiranda9775
@elvismiranda9775 2 года назад
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
@baseballphreak5
@baseballphreak5 4 года назад
A font selection video would be awesome. Thanks for all the great content!
@nikikinz
@nikikinz 4 года назад
Yes, I like this type of "design" video as well as your coding videos. Great channel!
@semsquared7541
@semsquared7541 Год назад
I rarely comment on youtube videos but you have such quality content man straight to the point and very helpful
@DonovanChilders
@DonovanChilders 4 года назад
I enjoy your coding videos a lot, but I really like seeing your design workflow!
@johnm4141
@johnm4141 3 года назад
Yes Kevin I'm interested !! You have amazing content. This is the best video I've seen on RU-vid about UI.
@GGdevelopment
@GGdevelopment 4 года назад
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. 🥂
@sandymurphy3322
@sandymurphy3322 4 года назад
Awesome color tutorial - thanks Kevin. So many great takeaways. Would love more design tutorials, particularly fonts!
@carstenberggreen7509
@carstenberggreen7509 Год назад
Great examples! I worked in advertisement as webdeveloper years ago and this kinda knowledge is gold for webdevelopers who hasnt.
@C.R..
@C.R.. 4 года назад
you just hooked me up with so much design advice, thank you.
@alexuqt
@alexuqt Год назад
This kind of video is soo valuable, thank you :) I love that you took the time to show many examples
@pd6055
@pd6055 2 года назад
Turquoise and brown - one of my favorite color combos
@felixfidelisu.2860
@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. 🙏
@dereka6964
@dereka6964 2 года назад
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!
@tamalchowdhury
@tamalchowdhury 2 года назад
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.
@wilfriedpeypoudat7494
@wilfriedpeypoudat7494 4 года назад
Very usefull advices for those who can't make the right choice with colors. Thank you, great video.
@TheRonpe
@TheRonpe 2 года назад
Useful stuff! I always wondered how I'm going to fit all those colors on the palette to a website.
@window.location
@window.location 4 года назад
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
@magicorpse
@magicorpse 4 года назад
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 :)
@mornir
@mornir 4 года назад
Yes, I would love to see more videos about design 😀 I like your teaching based on practice with actionnable tips. 🤗
@malaak1h
@malaak1h 3 года назад
I simply love your videos Kevin. I wish I had found them earlier, would have saved me hours of experimenting.
@Po4to
@Po4to 3 года назад
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.
@Luxcium
@Luxcium 4 года назад
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 RU-vid
@BizRasam
@BizRasam 4 года назад
Wonderful tutorial Kevin! All your work is awesome.
@sirisiri2416
@sirisiri2416 3 года назад
yes, definetely a good idea treating also Design and colors !!! Thank you Kevin!
@matthewbeardsley7004
@matthewbeardsley7004 4 года назад
Thanks! That's a great intro into colours for webdesign, for a complete non-designer. +1 for font video!
@Eric-wm1mi
@Eric-wm1mi 2 года назад
Very usefull, i'm choosing the colors for my website and i gonna use this approach. Thanks Kevin!
@lunaticberserker5869
@lunaticberserker5869 10 месяцев назад
I thought you'd pick the brown because coffee website = brown, but I didn't that the blue looked so well. I'm impressed!
@fionasaiter1902
@fionasaiter1902 2 года назад
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!
@Daibutsumusic
@Daibutsumusic 4 года назад
Love this one Kevin! I agree with what you had to say on use colors SPARRINGLY. Also, PLEASE do one on FONTS too! Thanks!!!
@ikalennyy6986
@ikalennyy6986 2 года назад
I appreciate your showing the process. Could’ve been done in half the time. Keep making those
@Vapornator
@Vapornator 4 года назад
Thank you buddy and yes, a font vid on how to choose would be great!
@tenzdhen
@tenzdhen 2 года назад
I appreciate this video. It was very instructive, simple and helpful
@pcartisan2721
@pcartisan2721 3 года назад
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!
@GrantSpoon
@GrantSpoon 3 года назад
Best video on basic colors. First 7 minutes is all you need. Disagree on the primary color of turquoise though.
@siddharthasharma9731
@siddharthasharma9731 4 года назад
Really like bro, move around the one color is much easy and great awesome to look and feel. Thanks
@pragyan_aryal
@pragyan_aryal 4 года назад
Thanks a lot for making this video. Helped to understand colors.
@umka7536
@umka7536 3 года назад
Thanks a lot. With this video I managed to harmonize color palette of my site.
@KevinPowell
@KevinPowell 3 года назад
Awesome, glad it helped!
@sarahbober4167
@sarahbober4167 4 года назад
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.
@clementyo4526
@clementyo4526 4 года назад
Great video. This is the best video about color from some videos I watched before. Thanks
@CHINWENDUIZUAKOR
@CHINWENDUIZUAKOR 6 месяцев назад
Perfect! Great man. Thank you very much for this 🙏 . More please 👍
@luiscolome75
@luiscolome75 4 года назад
Yes please Kevin. I would love that video about how to use fonts! I always waste so much time trying to find th right font.
@jcopley100
@jcopley100 4 года назад
Very helpful, thanks. would be interested in seeing more like it.
@mohammadabdelrahman786
@mohammadabdelrahman786 2 года назад
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
@tubgtung1999
@tubgtung1999 4 года назад
as a programmer, i felt sucks when i design my portfolio as it looks awful. This video helps a lot!!
@chrisclrk9
@chrisclrk9 2 года назад
Watching this on Christmas Eve in 2021, Thanks for the video it was very useful Kevin, Merry Christmas to you and your family.
@joeldcanfield_spinhead
@joeldcanfield_spinhead 4 года назад
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!
@devilsadvocate6098
@devilsadvocate6098 3 года назад
Love the video, nice flow and it's very easy to understand!
@codemonkey1092
@codemonkey1092 4 года назад
Its great, gives better insight to design for web developers to help create better sites especially if your designer is too busy
@shasantv
@shasantv 3 года назад
Thank you for making this video on color. I would love to see more on color and fonts.
@ysammo214
@ysammo214 2 года назад
This sort of stuff is amazing and a nice refreshing change from the coding stuff. Please do more
@itz.nk24
@itz.nk24 4 года назад
I never post a comment but this is a life saver!! Doing same format with fonts would be 🔥🙏🏽
@SYPCWAK
@SYPCWAK 4 года назад
Thanks. This was a big help. While watching this video it occured to me that maybe I've gone overboard with colours.
@siddhantjain2402
@siddhantjain2402 4 года назад
Wow, I must say this might be the best tutorial on RU-vid 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!
@mritz579
@mritz579 2 года назад
Nice video man! Love your passion.
@AmandaLucaseu
@AmandaLucaseu 4 года назад
Loved the video Kevin, would love to see more design related ones
@abulkalamasif1270
@abulkalamasif1270 2 года назад
Thanks a lot dude... You have solved one of the greatest problems of my life😄😅😅. That idea of using white, black and another color is really really great and almost any color can be used as the third color with black and white.
@malekmarkus6071
@malekmarkus6071 4 года назад
thank you this is so helpful i'd like to see more design content if possible
@jonathanlee8976
@jonathanlee8976 3 года назад
Good content as always Kevin!
@Artist77osi
@Artist77osi 2 года назад
Thanks lot, this is amazing tricks to select color and apply them on design, please make more such videos
@Mr.slikko
@Mr.slikko 4 года назад
Thank you very much That actually helped me a lot, I appreciate it
@johnjohnson4484
@johnjohnson4484 4 года назад
damn kevin got mad design chops
@jojojawjaw
@jojojawjaw 3 года назад
GREAT TUTORIAL! Thank you
@osherezra131
@osherezra131 4 года назад
Thank you great tutorial right to the point and practical keep it up
@supratikdatta1929
@supratikdatta1929 3 года назад
Very Educative video... Thanks a lot. Will love to see similar uploads
@MelTurner
@MelTurner 4 года назад
Very helpful workflow, thanks. I would be very interested in a video on selecting fonts from a design perspective.
@DeepSpaceX
@DeepSpaceX 4 года назад
It takes a little time and a fresh mind to pick colors correctly by yourself
@JoseRamirez-hd4ir
@JoseRamirez-hd4ir 2 года назад
Amazing video, Thank you Kevin 👍
@adrbroadcast
@adrbroadcast 4 года назад
Excellent tutorial, as usual. Thanks : )
@shivarammuthukumaraswamy7164
@shivarammuthukumaraswamy7164 4 года назад
Thank you so much.Really appreciate it.
@ebifleck
@ebifleck 4 года назад
Wow, thanks for a fantastic tutorial!
@joyvideos1802
@joyvideos1802 4 года назад
Thanks, I really need this color guidance
@parasarora5869
@parasarora5869 4 года назад
loved it !!! 👍👍👍...great tips and examples ... very happy ✌️😃✌️
@nirmalshah9947
@nirmalshah9947 2 года назад
Great video! Just a quick tip: Never Ever use pure black and pure white together, the contrast ratio is too high and it'll stress out your user's eyes. Play around with saturation
@tadeeric7417
@tadeeric7417 2 года назад
That is not true. No rule states that.
@VirtuaVirtue
@VirtuaVirtue 2 года назад
i think the rule of thumb is just making darker sites in general to ease on the eyes, pure black and pure white works most of the time though
Далее
Getting started with Figma: A beginner's guide
43:17
Просмотров 217 тыс.
How I make UI color palettes
8:51
Просмотров 363 тыс.
Give Your Website a Perfect Color Scheme, Fast & Easy
14:53
60-30-10 Color Rule
6:18
Просмотров 1,8 млн
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 498 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 717 тыс.
Step up your front-end skills with these 5 resources
12:22
How to create a theme switcher with HTML & CSS
28:21
Просмотров 108 тыс.