Loading...
How to Use the 60-30-10 Color Rule
Complete guide to generating, previewing, and implementing professional color palettes in your website
Quick Start Guide
1
Generate Colors
Enter any color name, hex code, or description on sixtythirtyten.co
2
Review System
See your complete 60-30-10 color system with text colors
3
Preview Designs
View your colors on real website and app mockups
4
Download Template
Get ready-to-use code in your preferred framework
Understanding Your Color System
sixtythirtyten uses the proven 60-30-10 rule to create balanced color schemes
60%
Primary Color
Your dominant color. Use for backgrounds, large sections, and main UI elements.
30%
Secondary Color
Supporting color. Use for cards, sidebars, secondary sections, and contrast.
10%
Accent Color
Highlight color. Use for buttons, links, calls-to-action, and important elements.
Text Colors
Each color includes automatically calculated text colors that meet WCAG accessibility standards. Use these for any text displayed on the corresponding background color.
Framework Implementation Guides
Choose your framework to see detailed setup instructions
Best Practices
Test on real content: Preview your colors with actual text and images before finalizing
Check accessibility: Ensure all text meets WCAG contrast requirements (we do this automatically)
Maintain consistency: Use the same color system across your entire project
Start simple: Begin with the provided templates and customize as needed
Document your colors: Keep the color codes handy for future reference