I made the best way to choose colors for UI design - Realtime Colors v1
Vložit
- čas přidán 3. 08. 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. - Věda a technologie
NEW - V3 Updates: czcams.com/video/zy7Kf8WiSyE/video.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'"
I'm an artist and this has been more useful than all the color theory videos I've ever seen, thank u so much😭😭
Storytelling, animation, rythm, even the subject...
This is art at its finest !
FINALLY an Ad that held my interest to the last second!
Short, simple and a problemsolver! freaking Genius!
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
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 would say this channel is way too underrated, with this type of content there's a huge potential for growth. just don't stop! ✌
Omfg what an incredible tool! As primarily a backend dev I cannot even begin to express how much I appreciate you right now ❤
just found your channel, this is ABSOLUTELY wonderful content. You honestly DESERVE to be bigger. Keep it up!!
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.
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 ^^.
I don't comment often on CZcams 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. 🗿👍
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!
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!!
Awesome video🔥. Really nice job.
One of the best value per minute videos about colors for ui I've watched ever 👍
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!
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😁
I saw that video in my CZcams recommendations, and i don't regret watching it. Thanks for your amazing site, it's an incredible work !
I just discovered your videos and your channel. It’s beutiful. I absolutely love the quality. Thanks!!!😄
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.
You are one of the few people that simplify design!
Thanks for sharing your knowledge and skills.
Possibly the best/most relevant video CZcams has ever recommended to me. This looks awesome. Thanks!
Girl! You're the best. I hope you gain many awards and stuff!!!
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.
You need more subs, this channel is underated! 🎉
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.
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!
you are criminally underrated. Thankyou for this
Couldn’t agree more. This isn’t even my craft and this was compelling.
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! :)
DEFINITELY incorporating this into my process. Thank you! And Colors bless you.
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.
This is amazing. Exactly what I needed. Also, amazing animation at 3:00. Got me laughing 🤣
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.
Honestly this is awesome and something I've been struggling with for so long!
Finally, CZcams recommended a proper channel on my feed. This is going to be part of my design process now, so cool!
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
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!
best channel I've seen in last months. Congratz! Keep up the good work
You are just the perfect combination of knowledge and memes
+ all of that in the field that UI
That's awesome
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 ✌️
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
Please post videos more often, your content is outstanding and I just solved a problem which was stuck in my mind for a week!
This is a super awesome project. Job well done Juxtopposed!
LIked the way the info was presented, clear and more detailed in less than 6 minutes
This is absolutely fantastic. Great work! Keep doing what you're doing.
You rock!! Fantastic tool and really great bonus lesson on color choice/design!
One of the best and helpful video content, I have ever met. Thanks a lot.
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
This is awesome ! A live saver for a developer with little to no ui/ux experience. Thank you !
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 ✨
Best resource I've found for inspiration so far...Thank you.
I love this video, the website you made, and I LOVE the pragmatic approach to 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 ❤❤
are you kidding me? you're website is freaking awesome and you are freaking awesome, thank you sooo much
this helped me with my design problems. Thank you! Very underrated, you got our supports and our backs! keep it up!
omg I saw and used this on codepen the day you released it, love it!
This is insanely cool!! I will definitely use your website to generate color palettes in the future.
I'm very glad you like it! Thank you ✨
Just had this problem the other week so I'm glad I found this!
I've been waiting for someone to make this exact thing for so long, thank you very much.
Oh My God Nara!
Loved your presentation! The amount of effort in editing and storytelling is insane!
I am so gratefull I found your video :3 thank you lady. Please feel pasionately loved ❤
Amazing effortless content. Straight to the point, NO BS.. Content like this are gemmm❤️❤️
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!
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 ❤️
I'm so grateful CZcams recommended me this video 🎉🤩. Such a great resource. Thank you so much for creating it and sharing it with the community 💖
What a great channel! loved the way you present things.
Have a good luck in your journey! and thanks for this tool!
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!!!!
Thanks CZcams for recommending me this fantastic channel.Keep up the good work and don’t stop.
Truly amazing idea for a necessary function! Thank you!
Thank you so much! I've been looking for this all my life c:
THIS IS EXACTLY WHAT I WAS WISHING FOR !!
Thanks for this alot.
Absolutely amazing! You nailed it
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!
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 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!!
I rarely click on stuff youtube recommends. But this has to be one of the best ones i've got. Instantly subscribed. 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
What a amazing project you've done!
This is genuinely the best tool out there for designers right now. AMAZING!!! THANK YOU SO MUCH!!!
Omg this is just incredible. I cannot believe just a good tool is on the web, thank you so much
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!
this is pretty sweet, thanks for sharing this. very well made and thought out
It really helps me by A LOT. always had a hard time just to deciding color combinations
Im always happy to see my ideas coming to life xD fantastic channel
Insane work ! Well played
Your website is gold! Thank you!
I love this channel and I love Realtime Colors. Seriously, it's a game changer.
I would subscribe two times if I could.
Just found this channel, don't know how I missed it. Love this video, it is going to help me out so much with my color palette process.
you've become one of my favourite youtube channels! amazing content(:
you way of describing and talking and the scripting is just amazing, love this content
this is the most native youtube product showcase i've ever seen in my life. You are a true youtuber omg
This is a fantastic tool! Great job!
Really great to see a sort of preview website, way better than just looking at a few colors without a more finished result
The editing on these videos is next level. Thanks for sharing your tool!