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.
// \u2728 Helpful links:
Realtime Colors:
https://realtimecolors.com
Figma Plugin:
https://www.figma.com/community/plugin/1234060894101724457
Simplest JS Theme Switcher Code:
https://codepen.io/Juxtopposed/pen/OJBxEXV
HSL Color Difference Game:
https://codepen.io/Juxtopposed/full/gOBWdaY
// \u2728 Wanna make a site hassle-free, without coding?
Use my colorful super-duper exclusive secret cheat code "pro-yearly-partner" to get 3 months for FREE on your Framer website here:
https://bit.ly/41cAqKM *
// \u2728 Let's connect:
Twitter:
https://twitter.com/juxtopposed
CodePen:
https://codepen.io/Juxtopposed
Dribbble:
https://dribbble.com/juxtopposed
Github:
https://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.
---------
* Yup, that's an affiliate link. you get 3 months free, I get a share at no extra cost to you. win-win!
#colors #colordesign #colorpalette #RealtimeColors #uidesign #choosingcolors #webdesign
-------
\u25ba Track Info:
\u25ba Video Link :
https://www.youtube.com/watch?v=nIrzhZNPaX8&t=0s
Music provided by TikTak No Copyright Music.
Share this page with your family and friends.