Perfect color scheme for web/mobile development
Create an attractive color palettes using 60-30-10 Rule
As a developer color scheme is crucial for any web/mobile application, and many developers are facing problems to pick the right color palette for their projects. If you are confused then you are landing a perfect place to get information with some resource that makes your life easy.
I try to make this article small and easy to understand and I categorized it into sub-parts so you will get a clear picture.
First of all, It is important to understand the 60-30-10 color scheme rule.
What is the 60-30-10 rule?
The 60-30-10 color rule is a guideline for creating a color palette that is balanced and visually appealing. This rule suggests that you should use a three colors combination. Let's break the 60-30-10 rule into three parts: 60 is 60% of your web/mobile application. similarly, 30 is 30% and 10 is 10%.
What is the dominant color in your application?
60% is the dominant color or the primary color in your application. This is the main color that will take the majority of your application, such as the background color.
This color contributes a major rule to explain the meaning of your application because every color has there own meaning.
For example, the meaning of color with the brand logo are given below.
Green color means Relaxing and Natural (android, Spotify)
Blue color means Confidence and Security (hp, dell)
Red color means Boldness Passion (Coca-Cola, McDonald's)
What is the secondary color in your application?
30% is the secondary color used in smaller amounts than the primary color, such as the color of the main content. This color should provide a contrast to the dominant color.
What is the accent color in your application?
The call to action color is 10% of your application. This color should be used to add visual interest and draw the user's attention to specific elements for doing something with it.
Concluding 60-30-10 with an important note, When using the 60-30-10 color rule for development, it is important to consider contrast and accessibility. Make sure that your color scheme meets accessibility standards by using colors that have enough contrast to ensure readability.
Best Resource for picking color palletes:
ColorSpace: This site helps you to pick secondary and accent colors by giving input as a primary color.
Color Wheel: This site is a Canva color wheel. You can adjust the hues and saturation levels to get the perfect color combination.
Color Hunt: Most of you know this site.
Adobe Color Wheel: This site is amazing you can create multiple color palettes by adjusting a single palette.