Contrast
How to select colors
Let's dive into the quick process of selecting colors for UI using Realtime Colors.
You can follow a basic 3-step process to achieve quick results.
- Step 1: Select neutral colors for the text and the background.
- Step 2: Select one primary color and a less highlighted one for the secondary color.
- Step 3: Choose one accent color, used for highlights, checkmarks, boxes, links, etc.
This process is likely beneficial to those who:
- have some colors in mind,
- just want to try out their colors on a real website before proceeding to designing/coding,
- are looking to play around to find their colors on their own.
How to find new colors
If you don't have any specific colors in mind, you might have to go through another process.
There are several features that can help you find your colors:
- Color locking: Using this feature, you can lock up to 4 colors and get suggestions for the rest on the main page. Again, these are randomly generated colors that would look good with your selected colors.
- Randomization: If you have no idea what you're looking for, the randomization can give you an infinite number of unique inspirations and suggestions based on any color scheme you want. Just use the Spacebar from the Shortcuts to get started.
You should also pay attention to your industry/field/product. Go for colors that represent your brand identity beyond the randomization results.
How many colors should I choose?
Normally, 3-5 colors along with their shades are great. Having more than 6 colors on your product can make it a bit hard to keep consistency throughout the design.
Updated on September 24, 2023