How to Build a Color Palette for Product Design | Guide to UI Colors

Color can make or break your product, and I say that quite literally. I've designed several dozen color palettes for digital products, some good, some not so good. And finally I took some time to dissect some of the best tech products as well as my own process in order to come up with this in-depth guide to UI Colors for aspiring product designers. Hope you enjoy! :)
By the way, I have a Skillshare class for Graphic Designers looking to get into UI/UX! Watch the trailer here:
skl.sh/3pcWnGC
❐ TIME STAMPS ❐
00:00 Intro
00:56 What should your palette include?
05:02 Tweaking with HSB
06:40 Color Perception
07:28 Implementation
❐ LINKS ❐
Stark: www.getstark.co/
More Designers' Guides: bit.ly/3pSQGzA
✨Let's be friends!✨
Instagram ➭ @maddybeard.ux
Monthly Newsletter ➭ maddybeard.com/visual-qs
Behance ➭ behance.net/maddybeard

[@pmill95]

Thank you so much for this. I just came across this but your video is soooo informative. I recently just transitioned from being a graphic designer to a full time ui/ux/product designer for a start up company and most of my ux knowledge I have had to just learn as I go. While I understand a lot about UI and UX, its little details like this that aren't often explained in detail, and I have been having so many moments of imposter syndrome and starting to wonder if I was just dumb for not getting it. So thank you for really going through all the little steps with this.❤

[@100coinstar2]

This was probably the best design tips video I've seen for mobile design. Thank you!

[@AndyTellsThings]

This is one of the best UI colors guide I've ever seen! Congrats Maddy. You have an excellent teaching and the pacing of the video is on spot. Cheers!

[@MaddyBeard]

Wow, thank you! I'm so so glad it was helpful :)

[@samfortune589]

Absolutely love your channel, the production quality and content is insane!

[@MaddyBeard]

Awww thank you so much!! 🥰

[@bojanpecanac]

This was very helpful, Maddy. Thanks for sharing.

[@marie_toni]

This channel is sooooooo underrated. Thanks for spending the time to craft content like this Maddy

[@MaddyBeard]

Thank you so much! That means a lot :) I love doing it!

[@sadaf1133]

this was SO helpful!!! Can you please do a video on how to create a mood board and style tiles? Would love to see how you create those!

[@SoImAlexa]

Thanks so much Maddy! This is super helpful, I've never heard that tip about creating off-white and off-black shades but it makes sense!

[@MaddyBeard]

You're so welcome! Glad you enjoyed :)

[@natalian8333]

This was super helpful! Thanks Maddy!

[@shraddhasingh8569]

This video taught me more than any other online tutorials I have seen in the past. Great work Maddy! Thanks for the video :)

[@MaddyBeard]

Im SO glad :) thank you!

[@AyodeleKolapo-ky5xl]

This is so helpful! Wells done Maddie!

[@francoferraris3298]

Amazing guide, it helped a lot! Thank you

[@shadil8452]

Thank you maddy❤️

[@OlanrewajuOnakoya]

Thank you so much Maddy...You'll sure make a fantastic trainer, this is about the best video on color I've watched so far, short and straight to the point........❤❤❤

[@MaddyBeard]

Thank you so much!! :)

[@janjosef5073]

4:12 I did not know that🥲NOW I KNOW & will keep in mind for the future! TY MADDY!

[@furquan101]

Loved these tips, especially around making sure you have sufficient colour contrast ratios for your colour palettes

[@MaddyBeard]

Thanks so much, Furquan!

[@apurwasahu5205]

Thanks for this video❤️❤️

[@ademolaadedeji1288]

Thank you Maddy

[@mayaracarvalho4861]

Amazing content, great job!!

[@world_changers]

That was really indept. Thanks 😊

[@alicepope]

Thank you! After weeks I finally understand how to pick colors for my brand. 👍🏼

[@MaddyBeard]

So glad it was helpful!🥰

[@kitziasalgado]

this was really helpfuuuul thank you so much

[@figmauzb7978]

Thank yOu Maddy 😊🙏

[@digigoliath]

Awesome!!! TQVM!!

[@mrthiagocesar]

Thank you so much.

[@ramalsrougi]

This is gonna help me a lot 😍😍😍😭
You deserve more subscribers 🙌

[@MaddyBeard]

Thank you so much!!

[@Mr_Sin99]

I was the 1K like. YAY!!!! Great video

[@vuhoanganh2411]

thanks for sharing

[@annaelle.anfisa]

This is a really good one !

[@MaddyBeard]

Thank you!! Glad you enjoyed it!

[@TheTonyMan]

excellent!

[@gambit1357]

Hey MB @8:16 you show your dashboard. Which program are you using? Thanks for the cool vid!

[@lostintravel14]

I have been following your content for sometime & this is easily the best one so far :)

[@MaddyBeard]

Thank you!! That means a lot 😊 I put a lot into this one!

[@banetepavcevic7228]

Hi, Can you show us how you define variants of primary and secondary colors? What if I have darker green 700-800 (brand color) , how do you decide the whole range between 0-900`?

[@gloriakim8308]

Are you saying that the lighter and darker primary colors would be better background colors than a true white/black?

[@stephencarroll312]

when do you use primary colours versus secondary colours for ui elements ?

[@MaddyBeard]

Generally I'd use the primary color for the most important things on the page, like the most important Call To Action. And then the secondary colors anywhere else! For example, maybe there are 2 buttons on a page: one that says SUBMIT and another that says CANCEL. I'd make the SUBMIT button the primary color since that's the primary action, and the CANCEL button the secondary color :) Hope that helps!!

[@stephencarroll312]

@@MaddyBeard yes i get it. thank you ..would really appreciate of you could do a video on what your normal daily tasks involve .. this helps new ux designers what to expect in the job.. thanks

[@sahildeshmukh1462]

What did you major in??

[@MaddyBeard]

Graphic Design :)

[@techgourmand]

Im just a simple guy. When I see Taylor Swift, I stan. Keep it up, Maddy.

[@simonenorman3660]

There’s just something about a good blow dry😇

[@ajizah7643]

hey maddy, have an issue in your throat?