How I make UI color palettes

Поділитися
Вставка
  • Опубліковано 17 чер 2024
  • 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  Рік тому +20

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

  • @KingDebo-rm7gj
    @KingDebo-rm7gj Рік тому +275

    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  Рік тому +9

      Awesome 🙌 Glad it's helpful!

  • @MikeTrif
    @MikeTrif Рік тому +202

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

    • @prajwalsharma2794
      @prajwalsharma2794 Рік тому +5

      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 7 місяців тому

      @@prajwalsharma2794 how do yo do it manualy ?

    • @prajwalsharma2794
      @prajwalsharma2794 6 місяців тому +3

      ​@@Rishik_Jha With estimations.

    • @marcelino-dev
      @marcelino-dev 3 місяці тому

      Try using the tool on 0to255

  • @manoskand
    @manoskand 5 місяців тому +35

    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 місяців тому +3

      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 Рік тому +92

    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 місяців тому +1

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

  • @atharvadikondawar8268
    @atharvadikondawar8268 19 днів тому +1

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

  • @vicyoslinuxofficial2607
    @vicyoslinuxofficial2607 4 місяці тому +10

    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 Рік тому +37

    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  Рік тому +1

      Thanks for the kind words!

  • @devanshjolapara6964
    @devanshjolapara6964 4 місяці тому +2

    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.

  • @rockyromay
    @rockyromay 20 днів тому +1

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

  • @juliesz78
    @juliesz78 Рік тому +26

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

  • @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.

  • @Wormsandconditions
    @Wormsandconditions 2 місяці тому

    I have over 4000 liked videos across UA-cam, 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.

  • @rammrras9683
    @rammrras9683 2 місяці тому

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

  • @naimurrahman9979
    @naimurrahman9979 10 місяців тому +2

    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

  • @luismelhorancaa
    @luismelhorancaa 11 місяців тому

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

  • @Egon15
    @Egon15 4 місяці тому

    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😊

  • @uifry
    @uifry 10 місяців тому

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

  • @andrelegris998
    @andrelegris998 7 місяців тому

    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.

  • @pavantodupunuri2562
    @pavantodupunuri2562 7 місяців тому

    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!

  • @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

  • @kristinkulasik3177
    @kristinkulasik3177 10 місяців тому

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

  • @alexander3845
    @alexander3845 9 місяців тому

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

  • @lawalayomideadeyemi5041
    @lawalayomideadeyemi5041 11 місяців тому +1

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

  • @UmairUlhaque
    @UmairUlhaque Рік тому +16

    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  Рік тому +2

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

  • @llu2736
    @llu2736 10 місяців тому

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

  • @lekhaibang3655
    @lekhaibang3655 8 місяців тому

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

  • @danielahermosillo8991
    @danielahermosillo8991 Рік тому +1

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

  • @sophiaumezinwa9655
    @sophiaumezinwa9655 3 місяці тому

    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!
    😊❤

  • @alberto-444
    @alberto-444 Рік тому

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

  • @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.

  • @binh1298ify
    @binh1298ify 10 місяців тому

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

  • @PizzaPastaAndGaming-pu2ko
    @PizzaPastaAndGaming-pu2ko Місяць тому

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

  • @aronfarsang1481
    @aronfarsang1481 23 дні тому

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

  • @stuart2151
    @stuart2151 9 місяців тому

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

  • @Matthijs1308
    @Matthijs1308 2 місяці тому

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

  • @arjunhadke1113
    @arjunhadke1113 9 місяців тому

    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.

  • @urbaniv
    @urbaniv 3 місяці тому

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

  • @fictionplus
    @fictionplus Рік тому

    This is so simple and to the point!

  • @robertkreft5653
    @robertkreft5653 Рік тому +2

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

  • @RoRo-gu9ug
    @RoRo-gu9ug 16 днів тому

    This was a game-changer. Thank you!!

  • @ErrikosAlexiou
    @ErrikosAlexiou Рік тому

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

  • @2013nicolas
    @2013nicolas 5 місяців тому

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

  • @vasiovasio
    @vasiovasio Рік тому

    Practical and Objective Overview! Thank you!

  • @FaizanAnwerAli
    @FaizanAnwerAli 10 місяців тому

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

  • @anubhavgiri6547
    @anubhavgiri6547 8 місяців тому

    Probably the best and most simple video.

  • @adevikthur
    @adevikthur Рік тому

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

  • @neeshsamsi
    @neeshsamsi Рік тому +15

    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!

  • @97Syahmie
    @97Syahmie 6 місяців тому +1

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

  • @Mahshod
    @Mahshod 3 місяці тому

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

  • @sarafyhr9873
    @sarafyhr9873 10 місяців тому

    Amazing tutorial! Thank you so much!

  • @SatyamBarnwal090
    @SatyamBarnwal090 15 днів тому

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

  • @kombinatsiya6000
    @kombinatsiya6000 Рік тому +3

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

    • @uxtools
      @uxtools  Рік тому

      Thank you! That's what we strive for 🙌

  • @leandro0rsantos
    @leandro0rsantos 6 місяців тому

    Great video! Thanks for sharing this valuable information!

  • @melaniekim8244
    @melaniekim8244 2 місяці тому

    So clear. So succinct. THANK YOU

  • @NicaSimon13
    @NicaSimon13 4 місяці тому

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

  • @stargazing0010
    @stargazing0010 9 місяців тому

    Absolutely amazing! Thanks so much

  • @liz_lavorenko
    @liz_lavorenko 3 місяці тому

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

  • @diegovitehernandez6832
    @diegovitehernandez6832 11 місяців тому

    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!

  • @_axtinct
    @_axtinct Рік тому

    Wow
    Thanks for sharing this, very helpful 🙏🏼

  • @ninas1675
    @ninas1675 4 місяці тому

    Thank you so much - this is really helpful!

  • @danielmevit
    @danielmevit 11 місяців тому

    This is golden. Thank you!

  • @csillakovacs196
    @csillakovacs196 Рік тому +1

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

    • @uxtools
      @uxtools  Рік тому

      Glad it's useful Csilla!

  • @arunkrishnamoorthytamil
    @arunkrishnamoorthytamil Рік тому

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

  • @BlackxesWasTaken
    @BlackxesWasTaken 3 місяці тому

    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

  • @thiagovilla970
    @thiagovilla970 3 місяці тому

    Very practical, I enjoy it.

  • @cerosdotcom
    @cerosdotcom 8 місяців тому +1

    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!

  • @rahulrawat5736
    @rahulrawat5736 Рік тому

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

  • @zixe6373
    @zixe6373 6 днів тому

    Amazing, this video is just great!

  • @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!

  • @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!

  • @ellivizcaino4307
    @ellivizcaino4307 Рік тому

    This was great, thank you!

  • @user-pj8qt1qx2o
    @user-pj8qt1qx2o 11 місяців тому

    Quality of this video is amazing

  • @inayathkhan100
    @inayathkhan100 Рік тому +1

    Very useful information, thank you

  • @armankubenov3119
    @armankubenov3119 Рік тому

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

    • @uxtools
      @uxtools  Рік тому +1

      Thanks for watching!

  • @DariiaAlex-pl7hx
    @DariiaAlex-pl7hx 11 місяців тому

    thank you! that was really helpful

  • @youngzproduction7498
    @youngzproduction7498 3 місяці тому

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

  • @user-rf4vc7mt4d
    @user-rf4vc7mt4d 3 дні тому

    This is the best video on the topic

  • @ItsMeLeto
    @ItsMeLeto 8 місяців тому

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

  • @sallyhefny4154
    @sallyhefny4154 6 місяців тому

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

  • @YuriiBiloholovskyi
    @YuriiBiloholovskyi 3 місяці тому

    The best video for this topic
    Thanks

  • @CRAismyname
    @CRAismyname Рік тому

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

    • @uxtools
      @uxtools  Рік тому

      Glad it's helpful, thanks for watching!

  • @siyamshekh3436
    @siyamshekh3436 9 місяців тому

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

  • @PadenClayton
    @PadenClayton 11 місяців тому

    Awesome video!

  • @nikitaluparev6478
    @nikitaluparev6478 5 місяців тому

    great tutorial. Thanks a lot

  • @the_true_hier_to_the_sharingan

    The most helpful video on creating a color palette.

    • @uxtools
      @uxtools  Рік тому

      Wow, feeling honored!

  • @jmcsorley
    @jmcsorley 4 місяці тому

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

  • @CBUXDesigns
    @CBUXDesigns Рік тому +1

    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.

  • @Design_Ai
    @Design_Ai 8 місяців тому +1

    Very interesting video!

  • @favourohio
    @favourohio 9 місяців тому

    Very nice. Thank you!

  • @borgejohnsen
    @borgejohnsen 3 місяці тому

    Great video! 😃

  • @aristosxanthus658
    @aristosxanthus658 10 місяців тому +1

    6:06 Never knew that this is what Tailwindcss color sets are based on. Makes total sense and they all go well with each other.

  • @Jashandeep31
    @Jashandeep31 Рік тому

    Thanks bro its helps a lot.

  • @trueplexx
    @trueplexx 4 місяці тому

    Thats next level

  • @rajahutan1698
    @rajahutan1698 10 місяців тому

    this is wonderful

  • @AriaHarmony
    @AriaHarmony Рік тому

    Thank you! This is very useful!

  • @TiffannyDoll
    @TiffannyDoll 10 місяців тому

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

  • @06121987kanak
    @06121987kanak 10 місяців тому

    nice video & very informative Thank you😃

  • @ozancaner5901
    @ozancaner5901 Рік тому

    Awesome! Thanks for that video

    • @uxtools
      @uxtools  Рік тому

      Thank you for watching!

  • @Hidekuma
    @Hidekuma 11 місяців тому

    great video, thank you