

PING BOX FS2 COLOR UI FREE
For instance, if you want to use two secondary colors, feel free to divide the 30% by two, thus achieving a 15% dominance for each of them.

This rule also provides a fair share of flexibility. Accent colors are but a fraction of your UI, but they’re there to make your interface more vibrant and energetic. A third should be reserved for the secondary color that aims to complement the dominant colors. About two-thirds of your color use should be dedicated to your primary color it’s the driving force in your palette. A great way to visualize this rule is to think of it as a suit - 60% are the pants and jacket, 30% are the shirt, and 10% are the tie. Probably one of the most popular principles that guide the use of accent colors is the “60-30-10 rule”. How do you translate this combination of colors into a harmonious UI? Let’s take a closer look at some guiding principles and best practices for using accent colors. Let’s say you’ve defined a product’s color palette and you like what you see. However, it’s important to note that having too many accent colors can make a user’s interaction with a product somewhat visually taxing.

As a result, this encourages users to interact with them.Ī second accent color allows designers to diversify the types of elements and information presented in the UI. Typically, designers select accent colors that are more saturated, allowing to make these elements more visible. Also, they’re a great way to draw the user’s attention to important information. Now that we’ve explored the context in which accent colors are used, let’s take a close look at their importance in UX design.Īccent colors are vital when it comes to accentuating a wide array of UI elements like buttons, progress bars, sliders, switchers, links, headlines, and so forth. They communicate meaning that allows people to navigate a product intuitively. Semantic colors are essential for a user’s guidance throughout a UI. They are commonly used for text color, whitespace, and so forth. Neutral colors are often anywhere in between black and white.

Accent colors aren’t used as frequently as the ones above, allowing to make certain UI elements more visible. Your accent palette is meant to complement your primary color palette. As a rule of thumb, think of accent colors as part of secondary colors, but not the other way around. It’s worth mentioning that “secondary” and “accent” colors are used interchangeably in some contexts. While not imperative, it’s always a good idea to limit their number to make the brand’s palette more recognizable. Your primary colors will be the ones you’ll use most frequently within a product’s user interface (UI) - they’re essential when it comes to translating a brand’s identity and amplifying brand awareness.īrands typically have anywhere from one to five secondary colors. Once you’ve found what appears to be the most suitable combination of colors for a product’s design, it’s essential to organize them into primary, secondary, accent, neutral, and semantic colors.
