How I make UI color palettes

Ғылым және технология

Creating a UI color palette can sometimes feel a bit complicated and messy. But I’ve developed a systematic, efficient method for making a color system. In this video, I run through the 5 steps I use (plus a few extra tips for working with color)!
Learn more about our product designer’s field guide to color: uxtools.co/shop/color
00:00 Intro
00:20 What we need
01:29 Step 1: Find a starting point
02:37 Using HSB
03:23 Step 2: Choose supporting colors
04:18 Step 3: Create shades
06:07 Step 4: Pick the neutrals
06:34 Step 5: Test it out
08:00 Field guide to color
08:30 Outro
👨🏻‍💻 About UX Tools
We make videos with practical lessons, resources, and news for the product design community.
Find out more: uxtools.co/
🐦 Follow Jordan on Twitter where he shares more tutorials for designers: / jrdnbwmn
#colorpalette #uidesign #designtutorial

Пікірлер: 332

  • @uxtools
    @uxtools Жыл бұрын

    Tell us some of your own color tips! And learn more about our field guide to color here: uxtools.co/shop/color

  • @freespeech515

    @freespeech515

    Жыл бұрын

    I am designing one.

  • @sampsonorson

    @sampsonorson

    3 ай бұрын

    What does vlog kit and setup consist of?

  • @KingDebo-rm7gj
    @KingDebo-rm7gj Жыл бұрын

    2 years of trying to master colors using articles and videos and this is the most clear the process has ever been illustrated

  • @uxtools

    @uxtools

    Жыл бұрын

    Awesome 🙌 Glad it's helpful!

  • @MikeTrif
    @MikeTrif Жыл бұрын

    The arc method for picking shades seems like a game-changer.

  • @prajwalsharma2794

    @prajwalsharma2794

    Жыл бұрын

    I agree. I made my first case study's color palette with a plugin. But, I think doing with the arc method manually is even better. You have more flexibility.

  • @Rishik_Jha

    @Rishik_Jha

    6 ай бұрын

    @@prajwalsharma2794 how do yo do it manualy ?

  • @prajwalsharma2794

    @prajwalsharma2794

    6 ай бұрын

    ​@@Rishik_Jha With estimations.

  • @marcelino-dev

    @marcelino-dev

    3 ай бұрын

    Try using the tool on 0to255

  • @manoskand
    @manoskand5 ай бұрын

    For the people that trying to find the method to find the arc, what i do is this : - I Pick the starting point color as he says - From that color, in order to create the bright colors, i add -20 to Saturation and +5 To Brightness and i increase it by -20 and +5 untill i reach to the brightess color - I do the same for the black but the other way arround, meaning that i add from the starting color +5 Saturation and -20 Brightness and i increase. You will see by doing this the colors are fitting on the arc that the video says. I hope i helped you.

  • @dmytrokhomenchuk2619

    @dmytrokhomenchuk2619

    5 ай бұрын

    Hey, thanks for your sharing. I used this promt in Bard: I have 5 tints. 

 The first one: has a saturation of 8 and a brightness of 100. 
 The fifth has: has a saturation of 77 and a brightness of 92. 

 Could you interpolate, calculate fade from the first tint to the fifth one, and show this in the table with values "S" and "B"?

  • @renovatingcity6050

    @renovatingcity6050

    4 ай бұрын

    Thanks it's much easier to understand and execute

  • @joshuamensah9309

    @joshuamensah9309

    4 ай бұрын

    You are a legend, thank you for this!

  • @MrBumbo90
    @MrBumbo90 Жыл бұрын

    I am a front-end web developer that had always struggled with picking colors. I have watched hours of content on this but your video gave me the most clarity. Thank you.

  • @jeromysoto8492

    @jeromysoto8492

    Жыл бұрын

    Same

  • @waleedreaper

    @waleedreaper

    11 ай бұрын

    Same. I haven't tried it out yet but I hope it works practically as well just like explained in the video.

  • @vicyoslinuxofficial2607
    @vicyoslinuxofficial26074 ай бұрын

    Video content 10 out of 10 Video editing 10 out of 10 Video resolution quality 10 out of 10! Thank you so much!

  • @avedisdakesian9785
    @avedisdakesian9785 Жыл бұрын

    First video I see from this channel, and as a product designer, I like you! Genuine, not trying to sell anything, not exaggerating anything. As if a colleague was talking to me showing their process. Keep being real!

  • @uxtools

    @uxtools

    Жыл бұрын

    Thanks for the kind words!

  • @atharvadikondawar8268
    @atharvadikondawar826816 күн бұрын

    After watching a dozen videos this is the only video anyone needs to understand color

  • @rockyromay
    @rockyromay17 күн бұрын

    Simply: from far, your tutorial is the best in the world . Thank you a lot!

  • @devanshjolapara6964
    @devanshjolapara69644 ай бұрын

    I am startup founder, I'm just starting out, and as I'm writing this message, I'm just so happy for finding this video. Because, I'm not joking at all when I say that I blew my eyes out just trying to find the right colours for our new SaaS product. I found this video extremely helpful. Thank you so much for sharing these tips.

  • @juliesz78
    @juliesz78 Жыл бұрын

    The level of detail and clarity is really impressive. Thank you, that's super helpful!

  • @Wormsandconditions
    @Wormsandconditions2 ай бұрын

    I have over 4000 liked videos across KZread, mostly in the realm of design, business, etc. This is one of the best and most informative videos I have ever seen on here. Thanks for the video, immensely.

  • @luismelhorancaa
    @luismelhorancaa11 ай бұрын

    This is indeed the most clear process and explanation for UI Color Palettes. Thank you!

  • @adedejijubril8048
    @adedejijubril8048Ай бұрын

    this is the best resource I've come across concerning the creation of colour palettes. You've just helped me overcome my longstanding battle with colours. Thanks a lot

  • @sophiaumezinwa9655
    @sophiaumezinwa96553 ай бұрын

    OMG, you are the best in this whole earth, I've been confused and lost about color but you made the explanation real. I get the whole logic now, thank you and God bless I'm so happy , Yo! 😊❤

  • @alexander3845
    @alexander38459 ай бұрын

    The best video on color palette I've ever seen. Thanks for making it!

  • @Egon15
    @Egon154 ай бұрын

    Thank you from the bottom of my heart❤. I'm a student trying to make a website. I've seen many sources mention colour palate, but non of them explained specifically when and where to use them on the website. This one really helped a lot😊

  • @lawalayomideadeyemi5041
    @lawalayomideadeyemi504111 ай бұрын

    This is the best content i have watched on thee color tips. This is amazing, easy to follow and understand. Great work

  • @pavantodupunuri2562
    @pavantodupunuri25627 ай бұрын

    oh man, what can I say? I have been searching for months on techniques to pick a color. I couldn't possibly find a better video than this. It's simple, precise and to the point. No forced jokes, no unnecessary animation. So plain and simple, yet conveys all the information under 10 mins. Using HSB over Hex color code is a game changer for me in terms of how you think. I have added your video to my playlist and downloaded the video just in case. Thank you so much!

  • @rammrras9683
    @rammrras96832 ай бұрын

    This is pure gold for someone like me who's trying to build nice and easy to operate HMI.

  • @tuija21
    @tuija21 Жыл бұрын

    Thank you! Creating color scales has been a puzzle to me but you explained it perfectly! I will make use of it right away.

  • @andrelegris998
    @andrelegris9987 ай бұрын

    All this time struggling to figure out which palettes to use and why some colors work and others don't and all I had to do was watch your video and now color palettes make sense!! Thanks so much for doing this.

  • @llu2736
    @llu273610 ай бұрын

    One of the best explanations so far. Thanks for the effort.

  • @97Syahmie
    @97Syahmie6 ай бұрын

    This is a game changing video on how to pick colors, God bless you!

  • @UmairUlhaque
    @UmairUlhaque Жыл бұрын

    Hi Jordan, thank you for providing valuable knowledge about using colors from the HSB model. I was always confused about how brands come up with complete color systems, including lots, tints, and shades, specifically when working on digital products like web apps and mobile apps. I am learning product design from the very basics, so keep delivering such knowledge. 👏

  • @uxtools

    @uxtools

    Жыл бұрын

    Thanks so much, glad it was helpful! Best of luck on your product design journey 💪

  • @uifry
    @uifry10 ай бұрын

    "Bravo! This design is a work of art that brilliantly combines aesthetics and functionality."

  • @alberto-444
    @alberto-444 Жыл бұрын

    This is by far the most useful UI video I've seen, you got a new subscriber right away! 👍

  • @kristinkulasik3177
    @kristinkulasik317710 ай бұрын

    Thank you for breaking this down so clearly! I am going to try out these tips in my next project.

  • @lekhaibang3655
    @lekhaibang36558 ай бұрын

    Thank you! This is very helpful, I really appreciate your effort that you and your team made. Keep going on it!! Thank you again. 😊

  • @anubhavgiri6547
    @anubhavgiri65478 ай бұрын

    Probably the best and most simple video.

  • @diegovitehernandez6832
    @diegovitehernandez683211 ай бұрын

    This is the first video of yours that i have seen and i really loved how you explained and demonstrated things, thank you very much for sharing!

  • @uxtools

    @uxtools

    10 ай бұрын

    Thanks for watching!

  • @aronfarsang1481
    @aronfarsang148120 күн бұрын

    This video is extremely helpful, I've been using this method ever since.

  • @robertkreft5653
    @robertkreft5653 Жыл бұрын

    This was amazing! Such a short video with so much insight, thank you!

  • @uxtools

    @uxtools

    Жыл бұрын

    Glad to hear it!

  • @PizzaPastaAndGaming-pu2ko
    @PizzaPastaAndGaming-pu2koАй бұрын

    This is probably the best tutorial for non designer I ever seen

  • @kombinatsiya6000
    @kombinatsiya6000 Жыл бұрын

    This is very hands-on and easy to follow. Thank you.

  • @uxtools

    @uxtools

    Жыл бұрын

    Thank you! That's what we strive for 🙌

  • @arjunhadke1113
    @arjunhadke11139 ай бұрын

    I pray for those who are disliking this video. God help them. This is just awesome. Precise, short, easy to pick up the concept. Brilliant job.

  • @SatyamBarnwal090
    @SatyamBarnwal09012 күн бұрын

    Really this is the most fantastic video i have seen on colour theory. Amazing😍😍

  • @danielahermosillo8991
    @danielahermosillo8991 Жыл бұрын

    Impressive video! Truly to the point, really learned from it, thank you!

  • @urbaniv
    @urbaniv3 ай бұрын

    Wow by far the best color palette video ... Thank you!!

  • @rodlivz
    @rodlivz Жыл бұрын

    The best colour selection tutorial I've ever seen!!! The best stumble upon yet!!! 😊😊 Thank you

  • @uxtools

    @uxtools

    Жыл бұрын

    Glad to hear it Rodney, thanks for watching!

  • @fictionplus
    @fictionplus Жыл бұрын

    This is so simple and to the point!

  • @naimurrahman9979
    @naimurrahman997910 ай бұрын

    I'm a web developer but the video was very helpful for me, because sometimes we developers needs to choose the color palette for ourself for some projects, this mini course helped me a lot to learn about colors, thanks very much

  • @Matthijs1308
    @Matthijs13082 ай бұрын

    this makes a lotta sense, even though i have never heard someone explain it this way. Thank you!

  • @vasiovasio
    @vasiovasio Жыл бұрын

    Practical and Objective Overview! Thank you!

  • @stuart2151
    @stuart21518 ай бұрын

    I can't believe I haven't come across this sooner, this is so helpful! Thank you!

  • @FaizanAnwerAli
    @FaizanAnwerAli10 ай бұрын

    The most useful video I found in a while. Great job 👍

  • @RoRo-gu9ug
    @RoRo-gu9ug13 күн бұрын

    This was a game-changer. Thank you!!

  • @rahulrawat5736
    @rahulrawat5736 Жыл бұрын

    so technical yet so simple and efficient way, keep creating more videos, these are really great and helpful thank you 🤩☺

  • @uxtools

    @uxtools

    Жыл бұрын

    Thanks Rahul!

  • @ErrikosAlexiou
    @ErrikosAlexiou Жыл бұрын

    best color palette and most infomative video i have seen related to this topic.

  • @the_true_hier_to_the_sharingan
    @the_true_hier_to_the_sharingan Жыл бұрын

    The most helpful video on creating a color palette.

  • @uxtools

    @uxtools

    Жыл бұрын

    Wow, feeling honored!

  • @user-rf4vc7mt4d
    @user-rf4vc7mt4d17 сағат бұрын

    This is the best video on the topic

  • @melaniekim8244
    @melaniekim82442 ай бұрын

    So clear. So succinct. THANK YOU

  • @binh1298ify
    @binh1298ify10 ай бұрын

    I'm a front-end dev trying to make my own blog and this is video is really helpful. Thank you very much

  • @neeshsamsi
    @neeshsamsi Жыл бұрын

    Wow this is extremely helpful. I’ve always wondered how frameworks like Tailwind creates their palettes and how I can make similar palettes with my own colors and didn’t find any resources this comprehensive.

  • @uxtools

    @uxtools

    Жыл бұрын

    Happy to help Avaneesh!

  • @csillakovacs196
    @csillakovacs196 Жыл бұрын

    Incredible useful content in such a short video, THANKS A LOT!! Just wow! 🥳🤩🙏

  • @uxtools

    @uxtools

    Жыл бұрын

    Glad it's useful Csilla!

  • @2013nicolas
    @2013nicolas5 ай бұрын

    THIS is soOoo brilliant. Thank you. First time I feel I get it for real.

  • @NicaSimon13
    @NicaSimon134 ай бұрын

    The video I did not know I needed. But youtube did. Thanks for sharing your knowledge!

  • @user-pj8qt1qx2o
    @user-pj8qt1qx2o10 ай бұрын

    Quality of this video is amazing

  • @thiagovilla970
    @thiagovilla9703 ай бұрын

    Very practical, I enjoy it.

  • @CRAismyname
    @CRAismyname Жыл бұрын

    Thank you so much! The creating shades section saved me so much

  • @uxtools

    @uxtools

    Жыл бұрын

    Glad it's helpful, thanks for watching!

  • @georgescreates
    @georgescreates Жыл бұрын

    There are great values in this video. I use to try some new UI concepts. I will be considering this video when working on them.

  • @adevikthur
    @adevikthur Жыл бұрын

    This is really helpful, thank you so very much! 🌹

  • @sarafyhr9873
    @sarafyhr987310 ай бұрын

    Amazing tutorial! Thank you so much!

  • @Mahshod
    @Mahshod3 ай бұрын

    this is exactly what I was looking for! thanks a lot!

  • @stevestremsterfer6038
    @stevestremsterfer6038 Жыл бұрын

    Thanks for this awesome video. Creating a new palette can be daunting, but these steps make it seem simple and almost foolproof.

  • @uxtools

    @uxtools

    Жыл бұрын

    Great to hear Steve, thanks for watching!

  • @leandro0rsantos
    @leandro0rsantos6 ай бұрын

    Great video! Thanks for sharing this valuable information!

  • @cerosdotcom
    @cerosdotcom8 ай бұрын

    Creating UI color palettes can be quite a process, and your method simplifies it beautifully! We at Ceros are all about sharing knowledge and techniques that empower creativity. Your content is a wonderful contribution to the design community. Keep the creative inspiration flowing!

  • @stargazing0010
    @stargazing00109 ай бұрын

    Absolutely amazing! Thanks so much

  • @liz_lavorenko
    @liz_lavorenko3 ай бұрын

    Thank you so much! That's what I needed.

  • @danielmevit
    @danielmevit11 ай бұрын

    This is golden. Thank you!

  • @ninas1675
    @ninas16754 ай бұрын

    Thank you so much - this is really helpful!

  • @arunkrishnamoorthytamil
    @arunkrishnamoorthytamil Жыл бұрын

    what a man just amazed very useful keep creating and keep educating us

  • @armankubenov3119
    @armankubenov3119 Жыл бұрын

    Awesome! This is such a great tutorial. Massive respect!

  • @uxtools

    @uxtools

    Жыл бұрын

    Thanks for watching!

  • @_axtinct
    @_axtinct Жыл бұрын

    Wow Thanks for sharing this, very helpful 🙏🏼

  • @BlackxesWasTaken
    @BlackxesWasTaken3 ай бұрын

    Dude this is insanely helpful.. 1 year ago and god damn this is just amazing I struggle so bad with selecting colors and iterated the palette of a project so many times yet was still not satisfied nor did it look good Now.. BOOM it looks good and the colors don't fight eachother which is .. well.. I hope I could express my delight :D

  • @zixe6373
    @zixe63733 күн бұрын

    Amazing, this video is just great!

  • @CBUXDesigns
    @CBUXDesigns Жыл бұрын

    This was helpful!! I use HSB , but HSL is my go to. I have been trying to find a color video for months! When I was first learning colors. But I finally learn something that works. Thank you for the great lesson.

  • @uxtools

    @uxtools

    Жыл бұрын

    HSL is great, too! Glad this is helpful 🙌

  • @CodecrafterArtemis

    @CodecrafterArtemis

    Жыл бұрын

    I've started tinkering with OKLCH lately, a very neat model! Helps you avoid the uneven color brightness ("squiggly line") problem.

  • @inayathkhan100
    @inayathkhan100 Жыл бұрын

    Very useful information, thank you

  • @youngzproduction7498
    @youngzproduction74983 ай бұрын

    This is a nice tutorial for a newbie like me. Thanks for the effort. :D

  • @YuriiBiloholovskyi
    @YuriiBiloholovskyi3 ай бұрын

    The best video for this topic Thanks

  • @mbp5863
    @mbp58639 ай бұрын

    Quick question, how do I practically pick colors along that arc? Is there a function in Figma to help choose colors on the arc? Or is there a mathematical framework for changing the HSB values to get the right shades? This is really useful man, great framework!

  • @lemonke8132

    @lemonke8132

    5 ай бұрын

    yeah i can't believe this wasn't answered

  • @zflxw

    @zflxw

    4 ай бұрын

    I haven't yet found a function for that in Figma, but I have a work-around that I use. First, I open the color picker in Figma, select the HSB color space, and select a hue I like. Then, I screenshot the box of the color picker and insert the image in the Figma file. After that, I take a line and place it from the top left to the bottom right corner. You can then double click the line to enter the "Edit Object" mode. Select the Bend tool and click on the bottom right point. Now drag this point to the top right corner (or a little less, depending on how you want your arc to look). Now you have the arc from the video. Press "Done" do leave edit mode and now place circles (no fill, only stroke) at the approximated locations on the line. You can now disable the arc render and use the color picker (pipette tool) to select the colors inside the circles you placed. It is a bit hacky, I admit, but I haven't figured out a better way.

  • @mbp5863

    @mbp5863

    4 ай бұрын

    @@zflxw Thanks, that seems to work pretty well!

  • @ellivizcaino4307
    @ellivizcaino4307 Жыл бұрын

    This was great, thank you!

  • @siyamshekh3436
    @siyamshekh34369 ай бұрын

    Amazing vdo. It helps me in my project. Thanks❤

  • @sallyhefny4154
    @sallyhefny41546 ай бұрын

    Many thanks for you sir 🙏🙏🙏.. Hope you make a lot of videos for ux designs steps

  • @DariiaAlex-pl7hx
    @DariiaAlex-pl7hx11 ай бұрын

    thank you! that was really helpful

  • @ItsMeLeto
    @ItsMeLeto8 ай бұрын

    Wow, this video is really informative! It helped me a lot, thanks! ;D

  • @jmcsorley
    @jmcsorley4 ай бұрын

    Amazing, saved so I can watch it again... yes it was that good 🤓

  • @nikitaluparev6478
    @nikitaluparev64785 ай бұрын

    great tutorial. Thanks a lot

  • @borgejohnsen
    @borgejohnsen3 ай бұрын

    Great video! 😃

  • @PadenClayton
    @PadenClayton11 ай бұрын

    Awesome video!

  • @AriaHarmony
    @AriaHarmony Жыл бұрын

    Thank you! This is very useful!

  • @uxtools

    @uxtools

    Жыл бұрын

    Happy to help!

  • @favourohio
    @favourohio9 ай бұрын

    Very nice. Thank you!

  • @GajanandaAdhikari
    @GajanandaAdhikari Жыл бұрын

    Awesome explanation!

  • @uxtools

    @uxtools

    Жыл бұрын

    Glad you found it useful!

  • @Design_Ai
    @Design_Ai8 ай бұрын

    Very interesting video!

  • @trueplexx
    @trueplexx4 ай бұрын

    Thats next level

  • @TiffannyDoll
    @TiffannyDoll10 ай бұрын

    I love this video . Thanks so much for that and God bless you

  • @danielolajide194
    @danielolajide19410 ай бұрын

    Teach me colour design system like I'm 5.. Boom this video🔥🔥

  • @tryoxiss
    @tryoxiss3 ай бұрын

    One big tip is you can use simple patterns to derive the semantic/alternate colors. For example my main color is a purple, so putting I picked an orange and violet as the natural quad of it. Of course also consider your use case, as my stuff tends to deal with a lot of code blocks so making sure you have colors that work well on the neutral backgrounds is important.

  • @06121987kanak
    @06121987kanak10 ай бұрын

    nice video & very informative Thank you😃

  • @vitorribeiro2002
    @vitorribeiro2002 Жыл бұрын

    Great, great job!!

  • @uxtools

    @uxtools

    Жыл бұрын

    Thanks!

Келесі