How to choose three colors for a website
Instead of choosing three attractive colors separately, decide what the combination needs to do. Compare these six directions through a broad background, a structural color, and a small accent.
Describe the purpose of your screen in one sentence
Try “a portfolio that lets the work speak,” “a shop for natural home materials,” or “a dark interface with clearly selected controls.” Pick one main mood and one use case rather than collecting a long list of adjectives.
The suggestions below are editorial choices, not measured rankings of how often each HEX combination is used. Photography, type, and area can change the impression of the same colors.
Quiet portfolios and editorial design
- 60%
#F5F1E8 - 30%
#25344A - 10%
#F47735
Try paper-like ivory around project images, navy for headings and broad structural areas, and orange for a small action. This direction adds one lively focal point while keeping the overall mood composed.
Relaxed, natural home and lifestyle pages
- 60%
#F4F0E5 - 30%
#294A3C - 10%
#C7784D
Linen, deep green, and terracotta suggest plants, earth, and natural materials. Keep the foundation generous and check whether product photography competes with the palette. Leave space for the materials to show rather than filling every area with green.
Clear, type-led layouts
- 60%
#F7F5F0 - 30%
#242424 - 10%
#D83A32
A nearly neutral base and charcoal support a small red accent. Choose one place to draw attention, such as an exhibition title or important notice. If red also marks an error, use wording or shape to distinguish decorative emphasis from system status.
Dark backgrounds with an energetic accent
- 60%
#161A19 - 30%
#E5E9DD - 10%
#BCED5B
A deep base, bright secondary color, and lime are clearly differentiated. This is a suggested direction for digital products or sports-related work. A large lime area changes the mood substantially, so begin with a small selected state or button.
Soft, romantic color contrast
- 60%
#EBF4F1 - 30%
#255F4C - 10%
#D84173
This palette contrasts mint and rose. A light foundation and deep green provide structure, with rose as a small focal point. For a softer impression, choose images and typography that do not compete too strongly with the colors.
Something a little less familiar
- 60%
#EEE7F3 - 30%
#5F4B30 - 10%
#4BCE97
Lavender, brown, and mint form a triadic palette. Compare them with a broad pale foundation before giving all three large, vivid areas. You can also use Copy for AI to carry the same colors and proportions into a prompt.
Three things to check before committing
- Is the primary action clear on a small screen? If the accent is scattered everywhere, revisit the hierarchy.
- Is the text distinct from the background? Harmony and text contrast are separate questions. Check the W3C contrast guidance.
- Does the mood survive real photography? If an image has strong colors of its own, reducing the palette accent may feel more natural.
Explore all 144 combinations and narrow them down by harmony or base brightness. Select the heart to save a palette in your browser and compare it later.