u/Akonovain r/Frontend • Recommends
On “How to choose colors ?”
I used to be so bad at this until i found this awesome tool: Realtime Colors
Its creator explains how to use it here: video tutorial
0:00 / 0:00
#realtimecolors#colorpalette#uidesign
I made the best way to choose colors for UI design - Realtime Colors v1
Juxtopposed
475K subscribers • 1 video on Hallway
- Recommended by 1 person: 1 in engineering communities.
- Presented by Juxtopposed
- Made by the vendor. The company whose product it covers made or sponsored it.
Beginner. No background in the topic needed.
669K views3 years ago1 recommendation
Web developmentSoftware designCSS and layout
Juxtopposed demonstrates Realtime Colors, a tool for visualizing UI color palettes on a live website.
NEW - Watch the V3 updates: youtu.be/zy7Kf8WiSyE ------ 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: figma.com/community/plugin/1234060894101724457 Simplest JS Theme Switcher Code: codepen.io/Juxtopposed/pen/OJBxEXV HSL Color Difference Game: codepen.io/Juxtopposed/full/gOBWdaY // ✨ Let's connect: Twitter: twitter.com/juxtopposed CodePen: codepen.io/Juxtopposed Dribbble: dribbble.com/juxtopposed Github: github.com/juxtopposed Thanks for watching! -------- // Timestamps: Intro Color design is HARD Introducing Realtime Colors About Colors Simplest UI Color Design Tutorial Step 1: Test with Realtime Colors Color Schemes Step 2: Export the Colors Step 3: Design with the Colors Step 4: Code with the Colors 60-30-10 Rule Color Psychology 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 : youtube.com/watch?v=nIrzhZNPaX8&t=0s Music provided by TikTak No Copyright Music.Why it's here
1 person recommends thisWhat people say. Recommended as an awesome tool and tutorial for choosing color palettes in UI design.