I accidentally made the best way to choose colors for UI design - Realtime Colors v1
NEW - Watch the V3 updates:
------
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:
Figma Plugin:
Simplest JS Theme Switcher Code:
HSL Color Difference Game:
// ✨ Become a supporter:
// ✨ Let’s connect:
Twitter:
CodePen:
Dribbble:
Github:
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 :
Music provided by TikTak No Copyright Music.