1 / 1
60-30-10 Color Ratio Rule
This snippet illustrates the 60-30-10 color rule, showing how the same layout can appear 'cheap' or 'expensive' based on color distribution. The 'cheap' version uses many colors at full saturation, creating visual noise, while the 'expensive' version uses a calm neutral base (60%), a supporting secondary color (30%), and a single accent for key actions (10%), creating clear hierarchy and a refined feel.
csscontrastcolorslayoutuidesignvisualhierarchy