Primary and secondary colors in the interface design are accent colors. They are used for elements such as call-to-action, buttons, and links. And also as color inclusions in other elements: list markers, quote marks, labels, icon colors, icon backdrops, etc.
In general, these are small elements that help draw the user's attention and create an accent color on the screen or page.
Sometimes just the primary color is enough and can be used to accent all elements, for example, if both buttons and links are made with it.
Secondary color helps diversify the accents and make them stand out. For example, the color of the buttons is primary, and the color of the icons is secondary. This creates a less monotonous design and clearly define primary as an action.
You may need tertiary color for some other group of accents that you want to highlight logically with color. But no more than that, you shouldn't use more than three colors in accents.
There is a 60/30/10 rule in interior design. Where 60% is the primary color in the interior, 30% is the secondary, and 10% is the accent color. In interior design, this rule works. It is mistaken to transfer it to the UI design. It does not work.
The design of interfaces rarely has similar proportions of colors. Usually, the dominant color is white, which can take up 80% of the screen or page, and it will not be the primary color because it makes no sense. White is just the background color. White is a utility color in UI. So is black, as a rule.
In web design, it makes no sense to follow this color rule in interiors. The interface design has its own rules of construction and color ratios. Primary and secondary colors are accent colors on a site or in an application. They are only colors fleck to attract attention. Their ratio to other colors does not lend itself to the exact proportions.
Interface design can use many colors for different needs: accents, backgrounds, statuses, states, charts, gradients, decorative colors. There are no golden proportions or formulas for their ratios.
When designing an interface, you need a lot of colors in the palette, especially if you make a dashboard or any other complex UI that includes forms, states, notifications.
Primary and secondary colors are used for accents in the design. These can be buttons, links, icon colors, labels, and other elements on which emphasis and focus is placed.
The primary color can often be the brand color if there is one. If not, the color chosen is the one that will be the accent color among all the other design elements.
The secondary color helps provide variety in accents. For example, the buttons are made with a primary color and links with a secondary. But the secondary color is not required; if it's not there, then all the accents can be primary.
Black and white colors are used for text colors, backgrounds, borders, and many other design needs.
As a rule, the black color is selected with a mixed primary color to create a harmonious and balanced palette. So, if the primary color is blue, then black can have a bluish shade. If the primary color is red, black can have a reddish shade accordingly. However, there is no problem if black has a pure hue without impurities.
Based on black and white, also build a scale of opacity colors to implement shadows, additional colors of borders, and other elements.
States colors are used in the design for focus and hover states, for error, successful and other notifications, links, buttons, and other controls.
Often states colors can be the same as primary and secondary. For example, if the primary has a blue or purple hue, the active may be exactly the same. Or if the secondary is red, it may also be a negative state color.
States colors have a wide range of uses and play semantic roles in displaying information that requires a negative or positive meaning. For example, a positive color can be used in the statistics to show the text of a positive trend: +235 sales. A negative color to display the corresponding trend: -348 visits.
Active color has information meaning and can display data or elements of the corresponding value.
Miscellaneous colors are used for gradients, charts, products and services if they have their color-coding.
These colors can have a brighter tone or be completely different in tone from primary and secondary because their purpose is to help build specific elements like charts or create color coding of products, which can have their meanings and goals.
Misc colors help build beautiful gradients because they can be bright, clean, and balanced just to build them. Primary and secondary may not always work creating gradients, especially if they have different variations.
Neutral colors are used to build backgrounds, borders, default states of controls for text, and other needs.
The neutral color scale is based on black mixed with white, and you can lower or raise the saturation in each color as needed for overall harmony and uniform tone.
A tints and shades scale is also created for primary, secondary, states, and misc colors. These colors help make modules or elements in a single color tone and different variations and states.
For tints, pure color is blended with white by increasing its lightness and, if necessary, increasing or decreasing saturation to harmonize the entire scale.
For shades, on the contrary, lightness is increased. Saturation, as with tints, is adjusted up or down to achieve the desired color balance.
The 'Warning' state makes no sense and you do not need to create it in the design and color states.
It really doesn't make any sense in warning messages or error messages, ever. A warning state can easily be replaced with a contextually appropriate one. If you are warning about something, the blue information message will be obsolete. If you display a warning error that could significantly impact the user's work, red will do.
Of course, this does not mean that you should avoid orange. For example, status colors have a meaning as a waiting status. But it has nothing to do with the warning state.
The colors for building gradients are usually brighter than any other interface colors. Therefore, it is worth selecting them separately in order to get harmonious and beautiful gradients.
The colors of the gradients can be different from the primary, secondary colors and have their own shades, tone and brightness.
When you create a gradient of two colors that are not side by side on the color wheel, you get a dirty color in the middle.
Add the in-between color in the middle, and you have a clean and beautiful-looking gradient.
