Web DesignAugust 5, 2026 · 12 min read

60+ Color Combinations That Actually Work (With Examples)

A tested library of 60+ color combinations with hex codes for websites, brands, interiors, and UI — organized by mood and industry, with usage notes for each.

Every designer keeps a swipe file of palettes that work. This article is ours, opened up: sixty-plus combinations with actual hex values, organized by the job you need them to do rather than by color name. Each entry includes a short note on why the pairing succeeds and where it performs best, because a palette without context is just decoration.

A quick note on method: every combination here follows at least one classical harmony (monochromatic, analogous, complementary, split-complementary, or triadic) — if the logic behind those schemes isn't familiar, our color theory guide explains the mechanics in ten minutes. And since contrast matters as much as harmony, we've flagged combos that pass WCAG AA for body text; run anything else through the checker on our explore page before committing.

Calm & professional (SaaS, finance, healthcare)

Reliable palettes built on cool neutrals with disciplined accents.

  1. Deep Atlantic#2D3436 · #0984E3 · #DFE6E9 · #FFFFFF. Charcoal anchors, cobalt acts, pale blue-gray breathes. The default answer for trustworthy B2B.
  2. Nordic Fog#3B4252 · #4C566A · #D8DEE9 · #ECEFF4. Monochromatic slate ramp; ideal for documentation and developer tools.
  3. Clinic White#1565C0 · #42A5F5 · #F5F9FF · #0D47A1. Layered blues signal hygiene and competence; strong choice for health tech.
  4. Graphite Ledger#212529 · #495057 · #ADB5BD · #F8F9FA. Near-total neutral scheme for fintech dashboards where data must dominate.
  5. Trust Teal#00695C · #26A69A · #E0F2F1 · #004D40. Teal reads as both professional and fresh; passes contrast easily when paired with white.
  6. Ink & Paper#1B2A4A · #3E5C96 · #C9D6EA · #FAFBFD. Navy-forward, print-inspired; law firms and consultancies.
  7. Silver Screen#37474F · #607D8B · #CFD8DC · #FFFFFF. Cool gray quartet that photographs well; portfolio sites.

Warm & editorial (media, food, hospitality)

Analogous warmth that feels human and appetizing.

  1. Terracotta Press#B3573F · #D98E73 · #F2E3D5 · #5C2E22. Clay tones over parchment; food blogs and boutique hotels.
  2. Golden Hour#FFDDC1 · #FFAB73 · #FF6F61 · #C84B31. Sunset gradient family; lifestyle magazines.
  3. Espresso Cream#3B1F0E · #714A2E · #C68642 · #F3EBE0. Coffee-house browns; cafés and bakeries wanting warmth without red.
  4. Ochre Field#BC8A3C · #8C5E2A · #EFE0CB · #402E13. Mustard-on-linen; artisan brands.
  5. Paprika Table#9C2B1F · #C1503D · #F4D8C0 · #401711. Deep paprika with cream; restaurants that want appetite appeal minus fast-food clichés.
  6. Harvest Analog#C4622D · #E09F3E · #5F797B · #F6F1E7. Warm spice balanced by a single cool counterweight; farm-to-table everything.

Bold & energetic (sports, gaming, youth brands)

High-contrast pairs used with restraint read as confident, not chaotic.

  1. Cyber Sunset#FF3864 · #2DE1FC · #170F2B · #FFF8F0. Hot pink against cyan on near-black; streaming and esports.
  2. Voltage#111111 · #FFE600 · #FFFFFF · #FF3EA5. Black plus electric yellow; streetwear and event posters.
  3. Court Classic#E63946 · #1D3557 · #F1FAEE · #457B9D. Red/navy/ivory; athletic programs and news sites.
  4. Arcade Triad#7209B7 · #F72585 · #4CC9F0 · #10002B. A violet-based triadic set; playful apps for younger audiences.
  5. Ember Alert#FF5714 · #353535 · #FFFFFF · #FFB3C1. Blaze orange on charcoal; fitness and outdoor gear.
  6. Stadium Night#0B132B · #1C2541 · #5BC0BE · #FF5A5F. Dark navy with neon teal and coral accents; ticketing and fan platforms.

Natural & organic (sustainability, wellness, outdoors)

Muted mid-tones borrowed from landscape.

  1. Forest Floor#2D4A32 · #5B8266 · #DAD7CD · #1B3022. Layered greens over stone; eco brands done tastefully.
  2. Sage & Stone#9CAF88 · #71816D · #EFEBE4 · #4A5340. Desaturated sage family; wellness studios.
  3. Coastal Dune#C8A97A · #76B5BE · #F5F0E6 · #5E5045. Sand meets seafoam; travel and coastal real estate.
  4. River Rock#5C6B73 · #9DB4C0 · #E0FBFC · #253237. Cool mineral grays; meditation and sleep apps.
  5. Botanical Ink#1B4332 · #2D6A4F · #95D5B2 · #081C15. Deep botanical ramp; premium organic packaging.
  6. Clay Canyon#A24936 · #C97B63 · #EAD8C3 · #54311F. Desert strata; ceramics and handmade goods.

Dark mode natives (dev tools, crypto, media players)

Dark surfaces need light text tiers and one luminous accent — not five dim ones.

  1. Midnight Gallery#191C1D · #1B31E7 · #BDC2FF · #F8F9FA. Our gallery's namesake: black surface, electric cobalt action, periwinkle highlights.
  2. Terminal Mint#0D1117 · #161B22 · #39D353 · #E6EDF3. GitHub-dark inspired; code products.
  3. Ultraviolet#12002E · #5A189A · #E0AAFF · #F8F7FF. Purple depth ladder; creative tools.
  4. Deep Sea Neon#000865 · #3E51FF · #E8E8FF · #BDC2FF. Abyssal blue with electric surfacing; music and nightlife.
  5. Carbon Amber#121212 · #1F1F1F · #FFB74D · #ECEFF1. Material dark plus warm amber; reading apps.

Soft & pastel (beauty, children, weddings)

Low-saturation families where lightness does the work.

  1. Blush Studio#F7C5C5 · #F4C2C2 · #C27BA0 · #5C3A45. Blush pinks anchored by plum text; beauty salons.
  2. Lavender Haze#E6E6FA · #D8BFD8 · #BA55D3 · #4A3B52. Lilac ramp with one saturated anchor; boutique gifting.
  3. Cloud Nursery#FFE5B4 · #FFDAB9 · #A2D2FF · #556270. Peach-and-sky pastels; children's products.
  4. Powder Suite#B0D4E8 · #D6E2E9 · #89C2D9 · #3A506B. Icy blues; dental, air, and water brands.
  5. Rose Quartz Wedding#F9E4E4 · #ECC5C0 · #B5838D · #6D6875. Dusty rose with muted mauve; invitations and editorial.
  6. Matcha Milk#D8F3DC · #B7E4C7 · #40916C · #334155. Green-tinted whites; modern wellness DTC.

Luxury & dramatic (fashion, jewelry, spirits)

Deep values, restrained hue, generous negative space.

  1. Onyx & Gold#0A0A0A · #1C1C1C · #C9A227 · #F4F1EC. Black-on-black with antique gold; jewelry standard for good reason.
  2. Velvet Merlot#2B0F1E · #5C1A3A · #C99DA3 · #F5EDF0. Wine-dark plum suite; fashion editorial.
  3. Midnight Teal Luxe#003434 · #006666 · #9ECCA4 · #F2F7F5. Deep teal with mint lift; boutique hotels.
  4. Smoked Pearl#444556 · #C5C5D9 · #F0F1F2 · #1B31E7. Our Clean Corporate set: smoky neutrals with one precise blue.
  5. Noir Bordeaux#14080E · #3D1226 · #A5677C · #EFE6EA. Near-black bordeaux; perfume and lingerie.
  6. Gilded Ivory#F5EFE0 · #E3D3B3 · #8C7853 · #2E2A26. Inverted luxury: ivory dominant, gold as ink.

Earthy & rustic (craft, furniture, coffee)

  1. Workshop#191C1D · #757688 · #BC3E00 · #FFDBCF. Our Industrial Rust set: iron grays fired by rust orange.
  2. Walnut & Wool#3B1F0E · #6B3B2A · #C8A97A · #EFE6D8. Furniture-showroom warmth.
  3. Barn Red#7C2D12 · #A85751 · #E7D8C9 · #3F3A36. Faded barnwood palette; artisan food labels.
  4. Olive Grove#6B7C45 · #4E5D33 · #D9CBA8 · #2E3323. Olive-dominant earth; olive oil, literally.
  5. Stone Mill#8B7F74 · #B0A695 · #E8DDD0 · #40372F. Warm masonry neutrals; architecture studios.

Fresh & clean (hygiene, tech startups, groceries)

  1. Arctic Mint#00B4D8 · #90E0EF · #CAF0F8 · #03045E. Crisp aqua ramp capped by navy text; healthcare SaaS.
  2. Lemon Air#FFF44F · #FFE97F · #457B9D · #FFFFFF. Citrus accent with steel-blue text; cleaning products.
  3. Pure Produce#228B22 · #7CB342 · #F1F8E9 · #33691E. Grocery-fresh greens; farmers' markets.
  4. Glass House#E0F7FA · #B2EBF2 · #00ACC1 · #263238. Aqua glass layers; window, water, clarity metaphors.
  5. Crisp Invoice#FFFFFF · #F1F5F9 · #2563EB · #0F172A. The accounting-tool special: white canvas, one decisive blue.

Playful & creative (education, kids, festivals)

  1. Primary Plus#EF476F · #FFD166 · #06D6A0 · #118AB2. Four high-legibility brights; education research favorite.
  2. Crayon Box#FF6B6B · #FFD93D · #6BCB77 · #4D96FF. Even-lightness rainbow set; classroom materials.
  3. Bubblegum Punk#FF87AB · #FFD6BA · #8AC6D1 · #3D348B. Pastels undercut by deep indigo; zines and indie games.
  4. Confetti Pop#F15BB5 · #FEE440 · #00BBF9 · #9B5DE5. Party-bright tetrad for festival branding; use sparingly on white.
  5. Storybook#F4A261 · #E76F51 · #2A9D8F · #264653. Warm-to-cool story arc; children's publishing.

Monochrome minimalism (portfolios, photography, fashion)

  1. Paper Trail#FFFFFF · #E5E5E5 · #7A7A7A · #111111. Full neutral ramp from paper to ink; photography portfolios.
  2. Blueprint#0F2A43 · #27496D · #A9C1D9 · #EDF2F7. Single-hue blue monochrome; engineering firms.
  3. Greyscale Gallery#1b1b1b · #595959 · #8c8c8c · #bfbfbf. Our Urban Nights theme: pure value study, zero chroma.
  4. Sepia Archive#F4EFE6 · #D9C7AE · #8A6F4D · #2B2118. Aged-paper monochrome; archives and heritage brands.

How to use this list properly

Three rules turn these swatches into finished designs:

  1. Assign proportions before pixels. Apply 60-30-10: one dominant surface color, one structural secondary, one accent. Every palette above supports that split even though only some are listed with percentages.
  2. Check text contrast per pair, not per palette. A palette "passes" or "fails" only in specific foreground/background combinations. Verify body text, button labels, and links separately — the ratios are computed automatically across our gallery collections.
  3. Preview in context, then export. Swatch rows hide proportion problems. Render your shortlist on a realistic mockup in the playground, then ship it to Tailwind config or CSS variables via the exporter.

If none of these fit exactly, treat the closest match as a seed and mutate it — shift the hue, deepen the darkest step, swap the accent. That's precisely what our palette generator automates: start from a proven structure and make it yours in seconds.

Put it into practice

Try the techniques from this guide in our free tools — no sign-up required.

More in Web Design · All articles · FAQ

Keep reading