Super Practical Guide to Color Theory, Color Models and Perfect Color Palettes | UI Design
HTML-код
- Опубликовано: 10 июн 2024
- Maybe you’ve followed all the color harmony and color theory tutorials to a tee and generated a complementary color palette, but you notice that the colors don’t seem to match very well, perhaps they look harsh or a bit muddy and unprofessional and you don’t really know why.
The part that's often missing is understanding tone, tint, shade and temperature
What I discovered is that on digital screens, there is a formula and safe range of Saturation and Brightness that will result in a perfect palette for each category every time.
In this super practical guide, I'll show you how to setup your design apps (Sketch or Figma) and create color palettes that match every single time. Using a few tricks and a few numbers.
#uidesign #colorpalettes #colors
📘Download the color formula cheatsheet for Figma | go.designerup.co/color-cheats...
👉🏽 WATCH NEXT - Color Palletes and Code | • My Effortless Color Pi...
🔗 Full article here - designerup.co/blog/practical-...
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
⏤
⏳ TIMESTAMPS
00:00 - Intro
1:23 - Color theory overview
2:09 - Color levers and balance
5:07 - Color models
6:15 - CMYK
7:04 - RGB
7:47 - HSB
9:08 - Switching color models in your app
10:24 - Warm vs Cool colors
11:04 - Color categories and color families
11:47 - 6 color categories
12:34 - Category 1: Jewel tones
12:56 - How to apply the color category formula
17:51 - Category 2: Pastel tones
18:21 - Category 3: Earth tones
19:17 - Category 4: Neutral tones
20:05 - Category 5: Fluorescent tones
20:57 - Category 6: Shades
21:30 - Combining color categories
21:42 - UI color combinations
22:07 - Why we don't talk about color this way (but probably should)
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ DesignerUp Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma | go.designerup.co/figma
⊚ ProtoPie | go.designerup.co/protopie
⊚ Notion | go.designerup.co/notion
⊚ Framer | go.designerup.co/framer
⊚ Canva | go.designerup.co/canva
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ RUclips creator
⊚ Author
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | learn@designerup.co
⭐If you found this video valuable we really appreciate you leaving a comment or a Super Thanks to show support for the channel! AND checkout our Product Design Course here designerup.co/product-design-ui-ux-course
This is probably 6 months of art school in 24 minutes and it’s the most helpful thing ever
Huge compliment thank you! I think it’s about 10 years of eveything I’ve studied about color in deisgn condensed into 24 minutes ☺️
Once in a while we find people so special and competent in teaching that could make a dog understand math. The best 24 minutes of my year. Thank you !
That made me smile and laugh Beto, ☺️ I appreciate that more than you know ❤️
@@DesignerUp what do you mean associated with children?
@@DesignerUp bright colors can also be associated with a bubbly and fun personality as well.
I would edit that to say primary colors in UI design are often associated with children. Just an example not a constant or absolute.
💯 agreed with you
No one has ever explained color theory so clearly. Keep up the great work, Ma'am.
I’m so glad you found it helpful and clear! Best of luck with your colors! Thanks for subscribing 😃
GOLDEN TIP: is way more useful to refer to colors as hues, temperatures, tints, tones, shades and mutes than call them by their names, because their names more often than not do not reveal how they are related to each other on the color spectrum.
For example: calling the color "baby blue" instead a very desaturated and very bright tinted and toned version of a blueish color hue is a lot more understandable than simply calling that color "baby blue".
Seriously, this video is one of the most concise and wonderfully explained that I have seen so far here on RUclips! Great job and thank you very much to share this knowledge with us.
Thanks William that is a high compliment and I appreciate it.
Hello brother
This information is gold🏆
Mind blowing good
Thank you Peter 😁
I've learned more in these 24 minutes than in 3 years of university. Thank you so much!
That is some truly high praise 😲Means a lot, thank you.
THAT TOTALLY MAKES SENSE!!!!
especially the last part (after 21:40). For example Paestel+Earth quite named properly accurately represents, welcoming, easing, easy going, friendly and neutral feeling. and guess what the keywords aare totally the keywords uk about ur client!!! that totally makes sense now!!
Haha that’s awesome Aditya! You totally got it!!!
This is definitely a top masterclass of color harmony & theory, without using empty technical terminology! The examples about how to mix them were just fantastic, as well as the didactic way shown! Thank you for this incredible video!
Thank you so much Cassio for your high praise. You articulately summarized exactly what I had hope this video would provide. Best
Finally, from time to time I search for a practical Color Guide, I found this. You don't know how much this mean to me but thank you so much. What a great guide.
As a non professional, but lover of color, thanks for explaining the process and showing the ranges to explore in the color picker.
Best video in RUclips regarding colors ! Super helpful ! Thank you
Thank you Hari. Glad it was helpful!
Amazing! This is the first time I am able to understand how to pick colors for UI
I'm so happy I clicked on this. Thank you so much for sharing this lesson. Honestly the best 24 minutes spent in my entire life searching for a good color theory explanation!
I’m so happy you clicked too Chi! That’s a huge compliment thank you!!
This was far more clear and comprehensive than I expected. Thanks so much! Game-changing.
Pleased to hear that Jared! 😃Thanks for stopping by!
This is the greatest video I've ever seen...and I watched Endgame like 6 times. You've just solved years of confusion for me in a mere ~20 minutes.
Hahahha Jake that is the highest of compliments lol 😄 I’m so happy that you finally have clarity around color!
for beginners this is good 2years of searching. i know this is like spoon-feeding but hey my needs are definitely filled, im soo happy :)
That was the more useful 24 minutes invested on my life!
Seriously, it was a great video with great explanation!
Thank you. :)
Wow really?! That's pretty awesome to hear! Thanks for making it through the whole thing and stopping by to comment Chu!
Same.
Underrated video. There is so much value here!
Very kind of you to say. I’m glad if provided some for you. Thanks Cesar.
i dont have any education in design etc, but this resources make me day. and it's free. thank you so much
Wonderful to hear 😀Thanks Achmad
I'm never deleting this video so good!!!! 😭😭
You just helped me with my color-anxiety,thank you.
Your presentation was very clean.
That’s awesome! :) glad to hear it and thanks 😊
Yeah, right?
Omg finally!!!!! I have watched tons of tutorials on color theory, this is the exact type of explanation I was looking for. Thank you so much
Thanks Nedge! It’s a great feeling when it finally clicks! Good luck to you!
Good lord... undoubtedly the best video on RUclips for learning color theory. Already hooked ....
Haha thanks Abinav 😄
My design life just changed. Thank you!
Amazing!!!
22:27 YES, thank you so much for this video. Removing as much of the guess work as possible does help soo much in learning anything. Once you know the rules, you can start getting more creative and even breaking the rules on purpose.
I love the way you said that! It’s so true. It really does make a huge difference. 💜
Finally I have found a more concise explanation to color theory and harmony. Good job beautiful!
This is in fact super-practical. I can code and design a programme but i am in-adept when it comes to nice graphics. This helped and solved so many of my UI problems i had! Thank you!
This is incredible to hear!! You are going to be unstoppable now! Good luck 😄
Something I love so much about how she teaches is the EASE, she makes learning design super peaceful like a therapy session......Thank you so much
I love to hear that ☮️
After so much research, trying to understand how to choose colors I finally found a well-detailed video explaining colors. THANK YOU! 👏
I'm a self taught digital artist close to industry level but still I always have been doubting myself for not able to understand color theory and which has been slowing me down a bit but this video sort of cleared my confusion about color a little and because of that I've improved alot and got a lot of positive feedbacks in my work. Thankyou so much for the lesson.
Your comment really warmed my heart because I know exactly the feeling. I had been designing for so long and always felt a little like an imposter when it came to my confidence in color, that’s what made me start to research deeply into the nature of it. Wonderful to hear you were able to apply it to your work too. Cheers
I've been building a design system for my company and found your video in the process. Such an amazing video. Thank you!
That’s so great to hear! Thank you so much and good luck on your design system!
😭😭 Thank you so muchhh! This content right here is epic! I absolutely agree with referencing print media in UX/UI because those were the actual foundation of design
I'm a photographer and I found this extremely helpful with choosing colors to edit with. Thank you!
That’s great to hear! Thank you for sharing Kore!
You are Blessed Elizabeth 😇 and by making these videoes you are being blessing for us. I must admit this by far the best tutorial on color palettes. Easy, relatable, practical and quick guide to start off a new design. God Bless You. I would love to see more of your content. Keep Uploading. 😊
I appreciate your very kind words and your support. ☺️Working on a new video this week!
extremely grateful that I watched this video.
Remarkable! I finished a course on UX/UI and noticed a huge area for growth in understanding color. I watched other videos on color models and harmonies, which were a great base of understanding, but this takes it an extra level and applies it specifically to UI design. Thank you!
That’s really wonderful to hear Francisco! Thank you 😊 and congratulations on completing your course!
This has to be one of the best tutorials on the topic. Thanks and congrats
Thank you Ben! That means a lot 😀
i have no words to describe this video other than PERFECT, thank you so much !
Aww thank you so much!
A game changing masterpiece with such well explained content. I'm so glad I found this channel. Definitely taking notes from this video.
That means a lot and I appreciate it! Glad you found us too!
In a nutshell - I would be repeating all the comments below that I could read! This tutorial goes along with the most change ever to LR. Unique form of making it simple. Cheers
I appreciate your comment Carlos.
I mean such a high level content ..Can't believe my eye... she should teach all the teacher how to teach the world...As always great content elizabeth
Haha thanks very much Ayush, I really appreciate that 😊
this video turned my mind 180 degrees!
I am not a fan of comments but I had to come back to like, suscribe and comment on this video after watching! Thanks for saving me from frustrations!!!!
I appreciate you taking the time to do so. It really helps my channel and helps me know what type of content to create!
thank you, you're an awesome human being as a beginner this is what I was searching for 1 and a half year
I’m so happy wonderful to hear this helped you! You are an awesome human being as well! Thank you 🙏🏽
Clear and practical. All explained and edited delightfully. Great job! many thanks
Thank you Sergi, I appreciate you saying so. You're most welcome.
Thank you so much for this video :) My Senior Graphic/Web Designer suggested me to watch this video.
Great! Teoría y Práctica del Color of José María Parramón is the best color study I know. Yours is the second.
This is one of the best art classes I've ever watched!! Thank you so much for putting this together. High-value tutorial on Colour. Artists, Filmmakers, Graphic Designers, Fashion Designers and all types of visual artists will find this super valuable. A gem.
Oh wow, thanks so much for your reccomendation, much appreciated!!!
@@DesignerUp
I am a painter and this video helped me a lot.
This is brilliant. I could never have so much clarity about color. Thankyou so much! ❤️
Underrated video right here. I'm happy to learn this now. This is top notch class right here :D
Thanks much Julián!
The best 24 minutes of learning and understanding.Got a lot of clarity..thanks a lot
This video was so helpful. Seeing the colors broken down in this way helped not make delving into creating my own palette as overwhelming. As someone who likes being able to categorize and break things down that way, I appreciate how you shared all the info ! Definitely saving this for future reference!
GOLDEN TIP: is way more useful to refer to colors as hues, temperatures, tints, tones, shades and mutes than call them by their names, because their names more often than not do not reveal how they are related to each other on the color spectrum.
For example: calling the color "baby blue" instead a very desaturated and very bright tinted and toned version of a blueish color hue is a lot more understandable than simply calling that color "baby blue".
Jesus. This is amazing. The part you started talking about color categories and families was so refreshing and good.
Aw thanks Ravin! Means a lot.
The best lesson on color I've ever had!
So wonderful to hear! Thanks for watching and subscribing!
This is really helpful and beautifully edited video, thank you! 💫🎨
Oh thank you so much @Linnea! Appreciate you saying so 👩🏾💻💌
This was an amazingly well explained color theory! Thank you for your effort, it's a very valuable content.
Thank you Syla, I appreciate that very much!
Your voice just as soothing as pastel tones.
Your channel is exactly what I have been looking for in last few months. After spending hours and hours on RUclips videos, your channel helped me the most. Thank you for great work. Your channel is the best.
That’s really amazing to hear. Thanks Spider-man :)
I just started to study Web Design and I've been stuck on fonts and color theory for a while. This video is a major help for me with color picking 😍 Thank you so so so much for this explanation!!! I'll be referring to this video a lot until I'll get used to all this!
That’s so awesome to hear!!! You’re so welcome. I hope it makes your work much easier. Thank you for your comment 💜
The best description of colour theory I have found on RUclips - and I've looked at too many.
A beautiful, crystal clear explanation. Reminds me of the mathematics videos on RUclips from 3Blue1Brown
in terms of style and clarity and that is high praise indeed. Thank-you.
Firstly, thank you for introducing me to 3Blue1Brown! I hadn't come across this channel before and I'm hooked! Thank you for the high compliment, I appreciate it greatly.
youtube suggestion is definitely getting better! the voice, the animation are very well presented, great video!
Thanks Nam!
I couldn't believe this content is free. Love it!!!
Perfect explanation, thank you for such a great job:)
You're very welcome! Thank you for watching :)
This is extremely useful even for a digital artist to get started with.
Are you a digital artist? I am here to dive into it
@@realestateinbedduringcovid647 yeah. I'm not really posting anything online since I'm still learning figure drawing and such, so. :P
@@renealbrechtsen9743 is figure drawing like drawing humans? I have been. Drawing since a child and I evem entered college for it but. I let so much get in the way and stopped everything but now But God is in my life and speeding me up to reclaim all that is mine by helping others get all that is theirs. I would love to send you my new book when it's release called "The Identifier of Real vs Truth; The ongoing battle that's already Won". And so many behind it is coming. I am here because I'm no longer putting off taking over children books, cartoons, gaming etc and I could use all the help I can get
You have made it beyond theory. Thank you very much for posting it.
Thanks AJ 😁You’re very welcome
I've never seen such a video on RUclips. You taught colour like 🤯🤯🤯
Hahaha thank you Annadora!
I just want to say thank you so much for this video! I'm not even a designer. I'm a filmmaker who has had issues identifying colours. So having to colour grade is a mental challenge for me. I try to learn more so I can have a kind of formula that works for me. You simplified this video so well and now I understand what I've been wanting to know is how how the 6 categories work. This is the most beautiful and instructional video I've seen on colour. Thank you!
That’s wonderful, so happy to hear it helped. I use it for color grading videos as well! Good luck with your work.
Thank you for producing this video. It’s nice to find someone who understands this complex subject. I offer only two minor suggestions… “cyan” is pronounced “sy-en”, not “cayenne”, and the preferred pronunciation of “often” is “of-en” without the “t”. Otherwise, excellent.
I agree about the pronunciation of cyan. However, pronouncing often as "of-en" is debatable, based on the English-speaking country you are in. Webster's Dictionary says both pronunciations are correct :)
As a painter I loved this tutorial
Finally I understand colors better. Thank you for making this video!
Hi! and thanks a lot for sharing your color experience! Brilliant way of presenting and examples of colours.
I request you to make a video for using CMYK colour for Packaging design and Offset Printing, the way you have shown here in this video.
Thanks a lot.!☺
Sou Brasileiro e agradeço muito por esse conteúdo de qualidade, abraços do Brasil!
The best video about the color theory I have ever watched!
Haha that’s high praise! Thank you so much!
My goodness, I'm literally lost for words... at the beginning of the video I thought it was going to be one of those long winded jargon filled videos... but my Wooooord, I echo everyone's sentiments by reiterating that this was unmistakably the best 24mins spent learning a new thing this year... if this is just a snippet of what you cover in your course, I shudder to think what the rest of the iceberg looks like! Encore🎉
Oh wow! 🥹Thanks so much for your comment, this really made my day! 😊And yes this is just one of over 74 videos just like this in the course where I dissect all of the UX and UI and Product Strategy concepts with actionable exercise. Maybe I’ll see you in there! Thanks again for watching and subscribing!
thank you ! that video was amazing . I'm a Backend developer and i was able to learn lol
That’s so excellent to hear. 🎉That was my hope! Thanks for commenting and good luck with your colors!
Will come in handy in my graphic design images. In web design, I'd simply appreciate if designers would stop using retinal burning white as the background color. I have to turn on windows nightlight just to stand it.
Great work teacher. Thanks. I strive as GD for 20 years.
I think this is the best video about colour theory i have seen ever ... totally forgot about the time. Extremely best way to explain .... also i noticed the soothing background music feel like helping absorb the knowledge. wonderful
Well this is one of the best comments I’ve ever gotten too! 😀Thank you so much, I used some binural beats at the end that are suppose to be great for your brain! Amazing that you noticed it! Thanks 🙏🏽
Great info!
Also, I think it's pronounced "Syan", not "Cayenne" :D
I have to join the positive comments. This video was the ONE i was looking for. Thank you very much for dumb-ing down the complex theory of color, so that even someone like me, could understand this topic und using it to his advantage!
one of the best content I've seen. Thank you
By far, the best video on color theory! Keep up the great work.
I wish I could like this video twice... beautiful!
Just wanted to leave a HUGE thank you
I HUGELY appreciated it! 🥰
Why do I have a feeling that this is the sort of stuff that would be conveniently overlooked in a university graphic design course.......
Thanks so much, this was very helpful
I can confirm this is true. Took many years to figure out this method for myself 🙃
Thanks for such an independent to color theory. The masterclass sounds great. New subbie!
This video is GOLDEN. I'm a full stack developer though that just means I'm a Backend developer who can use react and I am terrible at designing front ends. This video has shed so much light on design. Design always felt something you had or just never had. THANKS
Hey Richie that’s so great to hear! 😃 Yes this video was inspired by many of my dev friends who struggled with color theory. So glad it was useful to you! Let me know what else you have trouble with in terms of design so that I can make more videos!
Great video without beating about the bush , love it
Absolutely amazing your work and the way you show us how to manipulate color in a professional way. Thanks a lot.
The best video on Color Theory! Thank you so much for this guide!!!
Excellent explanation of colors!
Best video about this topic, thank you so much!
The content, visuals, voice over, and background music are on point. It was an effortless, almost hypnotic learning experience.
What a wonderful comment to read Ali 😊It was a real labor of love for me. I do wish I had toned down the music a bit towards the end, but I’m glad the intention landed for you. Thank you.
Coming back again after 3 months,to revisit this video.This channel deserves more subscribers
Really appreciate that Amit
Favorite lesson so far!!!
Thank you so much for such great and easily to comprehend content.
this is the best video i have seen on this subject, you are brilliant and very detailed and patient in teaching, thank you
Thank you so much for your comment 😊appreciate it
Excellently created and explained... and for many a fresh way to look at working with colors 👏👏👌
I am FOREVER grateful for you, I finally understand it now, thank you!!
That’s so wonderful to hear! Good luck to you 🙂