How to Apply a Color Palette to Your Design

Hello everyone, in this tutorial, we will explore one of the fundamental rules of color design: the 60/30/10 rule. This rule is a practical guide that will help you apply a color palette effectively in your designs, achieving visual harmony and coherence. We will also see how this rule is applied in a real design to give you a complete understanding.

The 60/30/10 rule is a general rule that suggests how to distribute colors in a design to achieve a visual balance. According to this rule, you should use the main color approximately 60% of the time, the secondary color around 30%, and the accent color only 10%.

• Main Color (60%): It is the dominant color in your design and will be used in most elements, such as backgrounds, content blocks, and headers. This color should be the most prominent and establish the visual foundation for your design.
• Secondary Color (30%): It complements the main color and is used to highlight certain elements or important sections. You can apply it to subtitles, buttons, or prominent sections.
• Accent Color (10%): It is the most vibrant and eye-catching color in your palette. It should be used sparingly to add visual interest to specific elements, such as call-to-action buttons, icons, or links.

The "Color Ratio" refers to the proportion in which we use the colors from our palette in a design. This proportion is related to the 60/30/10 rule but focuses on how each color is used in different elements and areas of the design.

For example, if you have a palette of four colors: white, yellow, red, and green, the main color could be white (60%), the secondary colors could be yellow and red (30%), and the accent color would be green (10%).

Once you have defined your color palette and its proportion, you can apply it to a real design. Let's imagine we have a web page design, and our color palette is blue (main), green (secondary), and yellow (accent).

1. Header and Menu: Use the blue color as the background for the header and menu, occupying approximately 60% of the space. The menu buttons and text can be in green (30%), providing subtle highlights.
2. Main Content: Continue with the blue color for the background of the main content section, occupying 60% of the space. The text and links will be in black, ensuring good readability.
3. Call-to-Action: Utilize the yellow color for call-to-action buttons and links. This color will stand out and attract attention, occupying only 10% of the space.
4. Details and Decorative Elements: Use the green color for some decorative details, such as icons or separators. This will add cohesion and balance to the design.
5. Footer: For the footer, revert to the blue color as the background and highlight some links with yellow (10%).

By following the 60/30/10 rule and Color Ratio, you will gain several benefits in your design:

• Visual Harmony: The balanced distribution of colors creates a sense of harmony in the design.
• Cohesion: Colors complement each other, giving a cohesive look to the entire design.
• Visual Hierarchy: The color hierarchy helps direct the viewer's attention to important elements.
• Readability: Proper color application enhances readability and the overall user experience.

The Color Ratio and the 60/30/10 rule are valuable tools to apply a color palette effectively and cohesively in your designs. Along with considering the context and purpose of your design, these guidelines will provide a solid foundation for making consistent and aesthetically pleasing color choices.

Always experiment with different color combinations and trust your intuition to create unique and memorable designs. I hope this tutorial has been helpful, and you feel more confident in applying color palettes to your future design projects! Good luck with your creations!

Original video