Best Website Color Combinations (With HEX Codes You Can Copy)

Choosing website color combinations from scratch is slow, and a palette that looks great as five swatches often falls apart once it holds real text, buttons and photos. Below are 12 of the best color combinations for websites, each with HEX codes you can copy, the roles each color should play, and the kinds of sites it suits. You will also learn how to adapt any combination to your own brand without breaking readability.

What Makes a Website Color Combination Work

Good color schemes for websites share a few traits that have little to do with taste:

• A neutral that does most of the work. Backgrounds and body text should be calm so content stays readable.
• One clear action color. Buttons and links need a color that is used for little else.
• Enough lightness difference. Text must reach at least 4.5:1 contrast against its background for WCAG AA (3:1 for large text).
• A deliberate relationship between hues. Complementary, analogous or single-hue schemes feel intentional; random picks feel accidental.
• Neutrals with a hint of temperature. Off-whites like #F8FAFC (cool) or #F5F0E8 (warm) feel more considered than pure white and quietly reinforce the mood of the accent.

Every combination below follows these rules. The contrast figures quoted were calculated with the WCAG formula, so you can rely on them as a starting point.

12 Best Website Color Combinations (With HEX Codes)

1. Navy, Off-White and Coral

Colors: navy #0F172A, off-white #F8FAFC, coral #FF6B6B.

Use it for: SaaS products, startups and agency sites that want to feel trustworthy but not stiff. Navy carries text and the header, coral marks calls to action. Put navy text on coral buttons (about 6.4:1); white text on this coral is only about 2.8:1.

2. Forest Green, Cream and Gold

Colors: forest green #14532D, cream #FAF7F0, gold #A16207.

Use it for: organic food, sustainability brands, outdoor gear and hospitality. Green text on cream reaches about 8.5:1. The gold works for links and small highlights at about 4.6:1 on cream.

3. Black, White and Electric Blue

Colors: near-black #0A0A0A, white #FFFFFF, electric blue #2563EB.

Use it for: developer tools, tech portfolios and documentation. The high-contrast base keeps content sharp, and the blue gives links and buttons an unmistakable job. White on the blue is about 5.2:1.

4. Charcoal, Sand and Terracotta

Colors: warm charcoal #292524, sand #F5F0E8, terracotta #C2410C.

Use it for: interior design, ceramics, restaurants and lifestyle blogs. The warm neutrals feel handmade rather than corporate. White on terracotta buttons is about 5.2:1.

5. Teal, Mint White and Orange

Colors: deep teal #0F766E, mint white #F0FDFA, orange #F97316.

Use it for: travel, health and fitness apps. Teal and orange sit roughly opposite on the color wheel, so the orange CTA pops. Use dark text such as #0F172A on the orange (about 6.4:1). Our guide to using complementary colors in design explains why this pairing works.

6. Slate, Off-White and Emerald

Colors: slate #334155, off-white #F8FAFC, emerald #047857.

Use it for: fintech, analytics dashboards and B2B tools. Emerald suggests growth and success without the alarm of red. White on this emerald is about 5.5:1; the lighter #059669 drops to about 3.8:1.

7. Burgundy, Blush and Amber

Colors: burgundy #7F1D1D, blush #FDF2F8, amber #B45309.

Use it for: wine, beauty, wedding and boutique retail sites. Burgundy headings on blush feel rich and editorial (about 9.2:1), and amber adds warmth to buttons.

8. Midnight, Slate and Cyan (Dark Mode)

Colors: midnight #0B1120, slate surface #1E293B, light text #E2E8F0, cyan #22D3EE.

Use it for: gaming, crypto, developer products and any dark-first interface. Cyan on midnight reaches about 10.4:1, so it works for links and buttons alike.

9. Sky Blue, Sunshine Yellow and Deep Navy

Colors: sky blue #0EA5E9, yellow #FACC15, deep navy #0C4A6E.

Use it for: education, kids products and playful consumer apps. Use sky blue for illustrations and section backgrounds, navy for text, and yellow buttons with navy text (about 6.2:1). Avoid white text on the sky blue, which is under 3:1.

10. Monochromatic Blue

Colors: #EFF6FF, #93C5FD, #2563EB, #1E3A8A.

Use it for: corporate sites, documentation and banking. One hue at different lightness levels feels calm and cohesive; the darkest blue on the lightest tint is about 9.5:1. See our guide to monochromatic color schemes for building your own.

11. Soft Pastels With Deep Plum

Colors: lilac white #FDF4FF, pink #FBCFE8, aqua #A5F3FC, deep plum #4C1D95.

Use it for: bakeries, baby products, stationery and wellness brands. Pastels are too light for text, so plum handles all text and buttons. For more on balancing soft colors, read how to use pastel colors.

12. Deep Purple, Lavender and Amber

Colors: deep purple #3B0764, lavender #F5F3FF, amber #F59E0B.

Use it for: creative tools, music and event sites that want a premium but energetic feel. Purple headers with amber buttons create strong contrast; purple text on amber is about 7.0:1.

Want more starting points? Browse the curated palette library, which collects 100 preset palettes grouped by style.

Quick Reference: Matching a Combination to Your Site

Whichever you pick, apply it with sensible proportions. The 60-30-10 color rule is a reliable default: mostly neutral, some secondary, a little accent.

How to Adapt a Combination to Your Brand

Copying a palette exactly is fine for a prototype, but you will usually want to swap in your own brand color. Here is how to do that without losing balance:

1. Keep the structure, change the hue. Replace the accent or primary with your brand color, but keep the same lightness relationship to the background.
2. Generate a matching set. Enter your brand color in the Color Harmony Generator and pick a harmony (analogous, complementary, split-complementary, triadic, tetradic or monochromatic). It returns five swatches plus CSS you can paste into your project.
3. Extend each color into a scale. The Color Shades Generator turns one color into a 10-step lightness scale, which gives you hover states, borders and subtle backgrounds.
4. Plan a dark variant early. Light combinations rarely flip cleanly. The Light and Dark Theme Previewer shows your accent in side-by-side light and dark mock UIs, lightens it for the dark theme, and outputs CSS custom properties for both.
5. Store the result as tokens so the combination is applied consistently:

:root {
  --color-bg: #F8FAFC;
  --color-text: #0F172A;
  --color-accent: #FF6B6B;
  --color-on-accent: #0F172A; /* navy text keeps coral buttons readable */
}

Naming the text-on-accent color separately, as --color-on-accent does here, prevents the common bug where someone later puts white text on a light accent and the button quietly fails contrast.

Check Contrast and Color Blindness Before You Ship

A combination can look balanced and still fail real users. Before launch:

• Test every text and background pair in the Color Contrast Checker. It reports the ratio and pass or fail for AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large).
• Run important pairs, such as your accent against its background or success against error, through the Color Blindness Simulator to see if they remain distinguishable.
• Do not rely on color alone for meaning. Add icons, labels or underlines to links and status messages.

Conclusion

The best website color combinations are not the trendiest ones; they are the ones that keep text readable, make actions obvious and fit your audience. Start from one of the 12 combinations above, adapt the accent to your brand, set proportions so neutrals dominate, and verify contrast before you ship. When you need more ideas, the palette library and harmony tools give you plenty of tested starting points.