I made the best way to choose colors for UI design - Realtime Colors v1
Juxtopposed Juxtopposed
214K subscribers
604,595 views
0

 Published On May 3, 2023

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...

// ✨ Become a supporter:
https://ko-fi.com/juxtopposedme

// ✨ 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.

show more

Share/Embed