NEW - Watch the V3 updates:    • I made Realtime Colors 100x Better (v3)  

------

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: https://realtimecolors.com
Figma Plugin: https://www.figma.com/community/plugi...
Simplest JS Theme Switcher Code: https://codepen.io/Juxtopposed/pen/OJ...
HSL Color Difference Game: https://codepen.io/Juxtopposed/full/g...

// ✨ Let's connect:
Twitter:   / 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.

---------

#colors #colordesign #colorpalette #RealtimeColors #uidesign #choosingcolors #webdesign

-------
► Track Info:
► Video Link :    • No Copyright Music for Cooking | Back...  
Music provided by TikTak No Copyright Music.