I made the best way to choose colors for UI design - Realtime Colors v1
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- NEW - Watch the V3 updates: • I made Realtime Colors...
------
Let's see how we can choose colors for UI design using Realtime Colors, the first UI color picker that allows for visualizing your UI color choices on a real website.
// ✨ Helpful links:
Realtime Colors: realtimecolors.com
Figma Plugin: www.figma.com/community/plugi...
Simplest JS Theme Switcher Code: codepen.io/Juxtopposed/pen/OJ...
HSL Color Difference Game: codepen.io/Juxtopposed/full/g...
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
Dribbble: dribbble.com/juxtopposed
Github: github.com/juxtopposed
Thanks for watching!
--------
// Timestamps:
00:00 Intro
00:19 Color design is HARD
00:39 Introducing Realtime Colors
00:58 About Colors
01:12 Simplest UI Color Design Tutorial
01:25 Step 1: Test with Realtime Colors
01:59 Color Schemes
02:59 Step 2: Export the Colors
03:17 Step 3: Design with the Colors
03:38 Step 4: Code with the Colors
04:11 60-30-10 Rule
04:36 Color Psychology
04:57 The Takeaway
--------
What is Realtime Colors?
Basically, it's a tool that allows you to pick your own colors for every element so you can have a better understanding of your color palettes and color design on different devices.
- Skip spending several hours on implementing the colors in a design software,
- Send the links of the colors to your friends,
- Download the palettes in image and code,
- Export the palettes on Figma through the plugin,
- and many more features, like font picking, etc. :)
In this video I'm also going through the implementation of the colors in both design (in Figma) and code, and explaining colors in UI design, including color schemes, the 60-30-10 rule, etc.
---------
#colors #colordesign #colorpalette #RealtimeColors #uidesign #choosingcolors #webdesign
-------
► Track Info:
► Video Link : • No Copyright Music for...
Music provided by TikTak No Copyright Music. - วิทยาศาสตร์และเทคโนโลยี
![บุษบา - เมนทอล [Official MV]](http://i.ytimg.com/vi/IGnWPokSEis/mqdefault.jpg)
NEW - V3 Updates: th-cam.com/video/zy7Kf8WiSyE/w-d-xo.htmlsi=l1pyrBKpsOy1oPny
What do you think about Realtime Colors? Does it help make your job easier?
If you have any suggestions, or if there are features you'd like to see on it, let me know down below! ✨
This is so cool - going to start using it exclusively for color planning
It'd be an awesome feature, that you get a QR code which pops up on clicking "share" (I think its called modal popup?).
That way the costumer / client can quickly look how it would look like on some mobile devices.
Its awesome
Could we get an option to set the text color for each button?
Can you also dive deeper into the problem of colors looking different on different devices ? I know that every screen has different color calibration so is there a way to overcome this problem?
I just found your channel now, and it looks like you’ve only had it for a while. These videos are really high quality. Please don’t stop
Yep! Subscribed too
same
Yeees. Exactly my thoughts 🎉
I was really saddened to see they have only 4 videos, I'm excited to see what else they'll make.
"dooon't stop ... beliiieevin'"
Storytelling, animation, rythm, even the subject...
This is art at its finest !
I'm an artist and this has been more useful than all the color theory videos I've ever seen, thank u so much😭😭
This is actually the best thing that was ever created. I cannot express my words on how grateful I am, that you provide this feature for free. I hope you all the best
FINALLY an Ad that held my interest to the last second!
Short, simple and a problemsolver! freaking Genius!
i was literally JUST looking for ways to find colors and i went to like 5 websites looking for “best website color designs” or whatever, and the next morning i find this.
you deserve way more than 13k subs. you’ve definitely got me as a +1 now
You've just completely blown my mind. Such a cool idea, flawless execution, concise video instructions with massive amounts of information in 5 minutes. Please never stop! May you have a million subscribers by next year ❤ and I will share this with my web design student group
Great tool, the only thing I'm missing there is "locking" certain colors and then generating the rest of the colors to complement the fixed colors. When I already know my primary color, but want to choose others, I would just lock it and then randomize the rest. Other tools for color themes have this and for me, that's probably the only thing that gives them the advantage. Otherwise very nice and clean, saved to my bookmarks!
That's a great suggestion, and I've been dwelling on the idea as well. I think it'll be helpful so I'm adding it to the to-do list :) Thanks! ✨️
@@juxtopposed I was actually thinking of this aswell and made a comment but didn't realize this was already here. I think this is a good idea as well or even be able to just randomize just one of the things individually as well as all at the same time. Different way of doing the same thing but either would work great. Great work though. Cheers!
@@juxtopposed Would also suggest showing the pattern through which the colors are generated as a little image next to the recommended color schemes, makes it more intuitive to understand than just reading "square" or "complimentary" etc. but idk might be stupid suggestion just something I thought of while watching the video :)
@@juxtopposed Hey, I actually just recently thought about this again but you should look into potentially creating a VsCode extension (or dev package?) that could auto-inject the hexcode colors into a scss variable or tailwind css variable. as long as someone sets their site up with the variables they can randomize the color palette to whatever they so choose. Something to think about.
Another fantastic video. You have a great way at explaining these things in just the right amount of detail at just the right speed. Fantastic video editing as well.
I think adding readability score based on contrast between text and background would be quite nice, also having more dark mode features like start with light backgrounds and auto supply dark mode dark background and light text colour would be very useful.
good suggestion +1
Was looking to see if someone else suggested this. There’s been an uptick in lawsuits over web accessibility and color contrast can be an easy way to loose, but there are very few tools that make the process easy. It would be amazing to have readability score considered with this!
Omfg what an incredible tool! As primarily a backend dev I cannot even begin to express how much I appreciate you right now ❤
I would say this channel is way too underrated, with this type of content there's a huge potential for growth. just don't stop! ✌
I don't comment often on TH-cam but I just wanted to leave one here to say your content is such high quality for a channel that's just starting out. The pace, the subjects, the accompanying visuals, explanations, good editing, etc. if you continue like this u will 100% get a decently sized audience. I for one cant wait for more interesting video's and to see your channel grow. 🗿👍
It's crazy how much work you put into making that site! It's super cool, and I hope to see it getting more attention and use in the future.
This is incredible work. You’ve actually changed the playing field. Well done and thank you for all your efforts. I’m excited for all the well deserved success that’s about to pour your way in the near future with an idea like this.
just found your channel, this is ABSOLUTELY wonderful content. You honestly DESERVE to be bigger. Keep it up!!
Your channel really has the potential it needs to grow big - 700,000 rather than the 700 subs you're looking at right now! Your videos are well-made, entertaining and informative. Keep it up!
That is an AMAZING website. I was looking for something just like this. The colors make sense in the context of a website, unlike using a random color pallete that will just give you 10 random colors.
This is honestly amazing, I have always used just plain dark and light themes in my projects but now I feel like I start working with more colors, thank you ^^.
As many have mentioned before: this amazing and the content execution is 11/10. Super excited to see what you come up with next and keep up the amazing work!!
You are one of the few people that simplify design!
Thanks for sharing your knowledge and skills.
This website's gonna be really helpful for me. I am a more technical person that lacked any artistic talent and always hated the color aspect when making my own websites. Definitely going to use this site for my next project. Thanks alot😁
you are criminally underrated. Thankyou for this
Couldn’t agree more. This isn’t even my craft and this was compelling.
I'm not an artist and have little experience choosing colors but sometimes I really need a good color palette for certain projects and assignments and this tool is literally a lifesaver.
You should consider also supporting Oklab colors (as supposed to just HSL). It tends to be much more accurate when it comes to representing colors how they are actually perceived compared to HSL, HSV, etc.
You need more subs, this channel is underated! 🎉
I saw that video in my TH-cam recommendations, and i don't regret watching it. Thanks for your amazing site, it's an incredible work !
I want to take a second to thank you so much for this amazing tool. I've been searching for the perfect colors that match my personal website for 2 days and it has took over my mind. In literally 3 minutes I found the perfect colors for it. Thank you. Subbed!
Awesome content! I can definitely see you growing bigger in the future. You deserver way more attention!
Keep doing your thing, you'll be successful one day! :)
You should create something like this for font styles and font sizes, more creative than google fonts.
👌
it's actually in development :) will make a video about it soon. stay tuned!
@@juxtopposed ok subscribed
Extremely high quality video for a new channel. I love the humor, included in teaching. Keep it up, this channel has the potential to make it big.
No but you don't understand how much I love you for this 😭 as a new designer, I've been looking for something like this desperately!!! An old video showed material design had a tester like this but they just scrapped it? in the new version for some reason. Coolors also has a similar thing but it seems more graphic design focused. I definitely prefer this. Thank you sooo much ❤️
Damn this was one of the ideas I've had in my "ideas to develop" list ahaha
Well done 👍
At this point I'll tell you also one thing that I had in my mind. The website would have been a gallery of mockup websites, all of them where you could preview your palette. This would be a nice addition on your website. Realistically I don't think I'll have much time to do something like this, so I give the idea to you ahah
Haha.. I also find myself a bit frustrated and amazed when someone else comes up with the exact idea I had put in my ideas list.. the amazing part is how particular and similar the other one is!
If you point a client to a colours-picking tool, they will inevitably choose clashing colours. Even if you warn them, or try to mutate the pallet so that it works, they will insist that you use exactly these colours. Later, a client or confidant of theirs will comment that the colours look off and it will magically be all your fault.
Exactly!... I dont like to give too many choices.. The reason why they hire a professional is for them to not think.. We can only catch their idea and not the way they would implement.
I need to say:
YOU ARE AMAZING!!!
My friend and I have been studying UI principles and one of the biggest challenges is color. With your solution we can understand and test in the best way.
Thanks!🎉
Thank you so much. i was struggling in picking the right colors for my website and your tool saved me a lot of time. i wish you all the best!
This is amazing. Exactly what I needed. Also, amazing animation at 3:00. Got me laughing 🤣
How beautiful your website is, the colour picker on Windows, Firefox, is just infuriating. Have you tried (or thought) about making a custom colour picker for the website, way more elegant than the Windows default one?
And here some more useful things, I'd love:
- Renaming your export, so all files have that name (kind of like naming the palette);
- A link to the site with this palette applied in the txt file when exporting.
Yep, the colorpicker will definitely get updated because of issues it might have on different browsers. It's on the to-do list currently, so hopefully soon :) Also great suggestions ✌️
Really great to see a sort of preview website, way better than just looking at a few colors without a more finished result
Oh My God Nara!
Loved your presentation! The amount of effort in editing and storytelling is insane!
did i just watch an ad?
It's a 100% free app so no, not an ad. Just someone sharing an incredible app.
@@dxvidmr whenever video is an ad is not determined by is the app free or not. most likely video is an ad when you pay for other people to see it. my comment was actually a joke btw
Incredibly rare advertisement W
Girl! You're the best. I hope you gain many awards and stuff!!!
This is really good. You just simplified color theory for me! The website was a great help. One thing I hate about developing websites and web apps is designing them especially choosing color themes. Now this is way easier.
LIked the way the info was presented, clear and more detailed in less than 6 minutes
DEFINITELY incorporating this into my process. Thank you! And Colors bless you.
This is a super awesome project. Job well done Juxtopposed!
Possibly the best/most relevant video TH-cam has ever recommended to me. This looks awesome. Thanks!
THIS IS SO USFUL!! You just saved my life, finding the right coulors for a website can be so frustrating but you made it so much easier. THANK YOU!!😁
I'm so grateful TH-cam recommended me this video 🎉🤩. Such a great resource. Thank you so much for creating it and sharing it with the community 💖
Not only is the website creation inspiring, so is the channel format! 👏
Please post videos more often, your content is outstanding and I just solved a problem which was stuck in my mind for a week!
Finally, TH-cam recommended a proper channel on my feed. This is going to be part of my design process now, so cool!
This is genuinely the best tool out there for designers right now. AMAZING!!! THANK YOU SO MUCH!!!
This is absolutely fantastic. Great work! Keep doing what you're doing.
I love this video, the website you made, and I LOVE the pragmatic approach to design.
Awesome concept and congrats on the website! Hope it helps every UI designer out there!
I just discovered your videos and your channel. It’s beutiful. I absolutely love the quality. Thanks!!!😄
Awesome video🔥. Really nice job.
One of the best value per minute videos about colors for ui I've watched ever 👍
I agree, you have made an incredible tool for testing colors schemes quickly! Great work!
Amazing effortless content. Straight to the point, NO BS.. Content like this are gemmm❤️❤️
best channel I've seen in last months. Congratz! Keep up the good work
Omfg thank you for this. This is the greatest project I've come across in a while. I'm really grateful that the algorithm sent me to this vid :D I instantly bookmarked the website, definitely gonna use it :)
You're literally becoming a sensation rn, keep it going ✨
This is awesome ! A live saver for a developer with little to no ui/ux experience. Thank you !
Well done, insightful video. It was so fun to watch and learn from you!
Please keep making them. You definetly know your things and you present them so well.
As a colorblind web developer your site is a godsent. Thank you for that!
What a great channel! loved the way you present things.
Have a good luck in your journey! and thanks for this tool!
I've been waiting for someone to make this exact thing for so long, thank you very much.
Thanks TH-cam for recommending me this fantastic channel.Keep up the good work and don’t stop.
This video was amazing! I am already good at colors because now 6+ years of experience in the field. I believe I can always learn something from others.
Really high quality stuff there!
I loved that you have not only created the website but the entire system where the link can be shared and the corresponding figma plugin!! wow ❤
i just found out this site and let me tell you. its a game changer, and the fact that its 100% free is so amazing. thank you so much!!
The editing on these videos is next level. Thanks for sharing your tool!
You are just the perfect combination of knowledge and memes
+ all of that in the field that UI
That's awesome
You rock!! Fantastic tool and really great bonus lesson on color choice/design!
THIS - Holy SMOKESS, This has to be the MOST AWESOME TOOL I've come across ever since i started learning FrontEnd. THANK YOU SO MUCH ❤❤
I just discovered your channel with video and damn that is crazy lol. That website idea is just perfect. As a front-end dev I can guarantee you that it'll be incredibly useful!
are you kidding me? you're website is freaking awesome and you are freaking awesome, thank you sooo much
The plans and pricing section is absolutely hilarious! Thanks for making this awesome website and enabling us to use it for free!
noo way i just came across this website yesterday and now i see this. I absolutely love realtime colors, this was exactly what i needed!!!!
omg I saw and used this on codepen the day you released it, love it!
Honestly this is awesome and something I've been struggling with for so long!
this helped me with my design problems. Thank you! Very underrated, you got our supports and our backs! keep it up!
man, i swear this is what i wanted a long time ago, since i'm always have been bad when it comes to colors, thank you for this video and this magnificent tool
Just found your channel through this video, you just got yourself a new subscriber, thank you for the video and website, you've done amazing with both
I am so gratefull I found your video :3 thank you lady. Please feel pasionately loved ❤
This is actually a game changer, i just like designing apps and sites for fun and this is gonna make it easier. Great video too
This is the best colour palette generating tool I have found. I used so many others, but they don't really preview the palette. Thank you!
I had log in because I decided I must leave a comment.
THIS IS SOOOOOOOO HELPFUL
I mean, my #1 challenge is being able to pick the right color combinations for my UI designs but with this tool, I feel my UI design skills have just reached a new level
Thank you very much for building a tool like this but more also providing it to us designers for FREE.
As a junior-mid frontend developer, thank you! Finally an easy way to get over the color scheme part whenever building new personal projects. I watched so many color theory videos, even started taking ui/ux classes, with very little success. The design part of the process was such a big time investment for me which you simplified greatly.
Im always happy to see my ideas coming to life xD fantastic channel
Best resource I've found for inspiration so far...Thank you.
you've become one of my favourite youtube channels! amazing content(:
Just had this problem the other week so I'm glad I found this!
you way of describing and talking and the scripting is just amazing, love this content
It really helps me by A LOT. always had a hard time just to deciding color combinations
Omg this is just incredible. I cannot believe just a good tool is on the web, thank you so much
this is pretty sweet, thanks for sharing this. very well made and thought out
Now the main concept of the video about palettes was amazing and helpful, but what managed to trump that even more was the fact that vars, themes and the function of HSL exist. I've never know about these and they're sooo usual. 11/10 video overall..
You will grow fast, keep up the good work.
Absolutely amazing! You nailed it