| name | color-combo-skill |
| description | Curated named color palettes grouped by mood, style, and intent. Use when choosing colors for UI, branding, content, or visual design. Includes hex codes, color roles, gradient pairs with CSS, and WCAG contrast notes. Trigger on: "choose colors", "color palette", "color scheme", "what colors should I use", "palette for", "/color-combo-skill", intent=color_choice, intent=design. |
| license | MIT |
| metadata | {"author":"bilioveloso","version":"2.0.0","date":"June 2026"} |
| trigger_keywords | ["color palette","color scheme","choose colors","what colors","palette for","color combo","/color-combo-skill"] |
Color Combo Skill
Curated named color palettes grouped by mood, style, and intent. When choosing colors
for any visual output — UI, branding, content, or design — follow this workflow:
- Consult the Decision Guide to identify the right category.
- Pick the named combo that fits the mood.
- Apply colors using the defined roles consistently.
- Check WCAG contrast notes before using Accent on text.
Skill Network
This skill is part of a modular design system. After choosing a palette here, chain to:
| Need | Skill to load next |
|---|
| Visual effects, glass morphism, gradients, motion | design-effects-skill |
| Typeface and font pairing that matches the palette mood | font-pairing-skill |
| Icon library, sizing, and weight to match the palette style | icon-system-skill |
For a complete design brief (colors + effects + fonts + icons in one pass), load the design-mapper entry point first — it routes to all four skills in the right order.
Color Roles
- Primary — dominant background or base color.
- Secondary — supporting surface or text background.
- Accent — highlight, CTA, or attention-grabbing element.
- Supporting — subtle fill, border, divider, or shadow tones.
Implementation Pattern
Emit palette choices as CSS custom properties so any UI system can consume them:
:root {
--color-primary: <hex>;
--color-secondary: <hex>;
--color-accent: <hex>;
--color-supporting: <hex>;
}
Decision Guide
| Goal | Category to use |
|---|
| Premium, exclusive, editorial | Luxury |
| Aspirational, polished, budget-friendly | Luxury Facade |
| Calm, clean, editorial, soft brand | Luxury Facade › Soft Prestige |
| Futuristic, neon, surreal, cyber | Otherworldly |
| Disruptive, urban, bold, street-level | Acid Contemporary |
| Replacing a raw default color with a tasteful alternative | Refined Defaults |
| Soft background, calming gradient, wellness, airy UI | Soft Gradients |
| Organic, eco, botanical, outdoor, farm-to-table | Nature / Organic |
| Clean, structured, whitespace-first, mono | Minimalist |
| Artisan, coffee, wood, handmade, craft food | Rustic / Craft |
| Dark editorial, candles, alternative, perfume niche | Gothic / Dark Romance |
| Resort, cocktails, tropical, summer hospitality | Warm Tropical / Resort |
| Nostalgia, 70s/90s revival, vintage branding | Retro / Vintage |
| B2B SaaS, enterprise software, finance, legal | Corporate / Enterprise |
| Medical, clinical, healthcare, pharma, wellness tech | Healthcare / Medical |
| Gaming, esports, streaming, competitive, dark neon | Gaming / Esports |
| Spring campaign, seasonal refresh, renewal | Seasonal / Spring |
| Summer campaign, outdoor, peak season | Seasonal / Summer |
| Autumn campaign, harvest, back-to-school | Seasonal / Autumn |
| Winter campaign, holiday, festive | Seasonal / Winter |
Luxury
High-end, genuinely premium, opulent palettes. Use when the output must feel expensive, exclusive, and authoritative.
Golden Obsession
- Style: Bold, opulent, high-impact luxury.
- Primary: #0B0B0F
- Secondary: #1C1A17
- Accent: #D4AF37
- Supporting: #B87333, #2D3138, #E9E1D0
- Best for: Premium branding, fashion, luxury product visuals, dramatic editorial layouts.
- WCAG: Accent (#D4AF37) on Primary (#0B0B0F) → 9.8:1 ✅ (AAA). Safe for all text sizes.
Arctic Prestige
- Style: Pure, crisp, controlled, refined luxury.
- Primary: #F5F8FA
- Secondary: #D6DEE6
- Accent: #9DB4C6
- Supporting: #5C7386, #1E2A39, #0B0F14
- Best for: Minimal premium UI, cold-tech branding, high-trust interfaces, clean editorial design.
- WCAG: Accent (#9DB4C6) on Primary (#F5F8FA) → 2.8:1 ⚠️ Decorative use only. Use Supporting #1E2A39 for body text → 12.1:1 ✅.
Volcanic Intensity
- Style: Fierce, energetic, aggressive luxury.
- Primary: #0B0B0B
- Secondary: #1A1A1D
- Accent: #FF4D00
- Supporting: #8B1E00, #4A4746, #F2F1EE
- Best for: Sports branding, performance themes, launch campaigns, bold visual identities.
- WCAG: Accent (#FF4D00) on Primary (#0B0B0B) → 5.1:1 ✅ (AA). Safe for large text and UI components.
Futuristic Elegance
- Style: Sleek, cinematic, modern, premium-tech luxury.
- Primary: #F6F2E8
- Secondary: #C5C0C9
- Accent: #4B2E83
- Supporting: #0D1B2A, #FF7A00, #8FA7FF
- Best for: Luxury tech, innovation branding, futuristic interfaces, product storytelling.
- WCAG: Accent (#4B2E83) on Primary (#F6F2E8) → 8.4:1 ✅ (AAA).
Emerald Dynasty
- Style: Regal, timeless, heritage-rich, ornate luxury.
- Primary: #0A5E4E
- Secondary: #093B33
- Accent: #D8C08A
- Supporting: #F2EDE1, #103F46, #071B1E
- Best for: Heritage brands, premium hospitality, jewel-tone identities, luxury packaging.
- WCAG: Accent (#D8C08A) on Primary (#0A5E4E) → 5.7:1 ✅ (AA).
Gradients
Obsidian Gold
- Saturated Stop: #1C1A17 → Light Stop: #D4AF37
- Style: Opulent, dramatic, deep-luxury.
background: linear-gradient(135deg, #1C1A17 0%, #D4AF37 100%);
Champagne Mist
- Saturated Stop: #C5C0C9 → Light Stop: #F6F2E8
- Style: Soft, sophisticated, cool luxury.
background: linear-gradient(135deg, #C5C0C9 0%, #F6F2E8 100%);
Emerald Dusk
- Saturated Stop: #0A5E4E → Light Stop: #D8C08A
- Style: Rich, jewel-tone, heritage warmth.
background: linear-gradient(135deg, #0A5E4E 0%, #D8C08A 100%);
Luxury Facade
Aspirational, polished, premium-looking palettes for products or brands that need to appear more expensive or elevated than their price point suggests.
Caramel Air
- Style: Soft, warm, approachable, upscale.
- Primary: #C07F45
- Secondary: #FCEDD6
- Accent: #97C6E0
- Supporting: #7A5030, #E8D0A8, #F8F2E8
- Best for: Lifestyle branding, packaging, soft premium visuals, calm aspirational layouts.
- WCAG: Use Supporting #7A5030 for body text on Secondary → 5.2:1 ✅.
Moss Iris
- Style: Elegant, muted, artistic, boutique-like.
- Primary: #8F9D68
- Secondary: #FFF8EB
- Accent: #7A57CD
- Supporting: #5A6A40, #D8D0A8, #F8F4EC
- Best for: Boutique packaging, creative branding, elevated calm visuals, editorial accents.
- WCAG: Accent (#7A57CD) on Secondary (#FFF8EB) → 5.3:1 ✅ (AA).
Citrus Royal
- Style: Bright, polished, clean, product-forward.
- Primary: #EF8E01
- Secondary: #0038BD
- Accent: #EEEEEE
- Supporting: #B86A00, #0028A0, #F8F8F8
- Best for: Consumer products, punchy premium-style branding, modern retail visuals.
Skyline Poise
- Style: Cool, structured, calm, contemporary.
- Primary: #27262E
- Secondary: #E19C63
- Accent: #8BA5BE
- Supporting: #3E3D48, #C07840, #F0EAE0
- Best for: Corporate branding, premium service design, modern calm interfaces.
- WCAG: Accent (#8BA5BE) on Primary (#27262E) → 5.6:1 ✅ (AA).
Blue Horizon
- Style: Fresh, quiet, spacious, lightly premium.
- Primary: #F4FEFF
- Secondary: #A9C0E0
- Accent: #0E2F76
- Supporting: #70A0C8, #D8E8F8, #FAFEFE
- Best for: Calm UI, airy branding, wellness, minimal product design.
- WCAG: Accent (#0E2F76) on Primary (#F4FEFF) → 12.8:1 ✅ (AAA).
Coastal Contrast
- Style: Fresh, bright, accessible, polished.
- Primary: #95D9C0
- Secondary: #FFFFFF
- Accent: #D41F26
- Supporting: #60B898, #E8F8F0, #F8F8F8
- Best for: Lifestyle products, cheerful packaging, clean promotional graphics.
- WCAG: Accent (#D41F26) on Secondary (#FFFFFF) → 5.9:1 ✅ (AA).
Soft Prestige
Calm, editorial, premium-looking palettes for clean brand systems.
Arctic Teal × Cloud Pearl
- Style: Clean, corporate, trustworthy.
- Primary: #0E7490 / Secondary: #F2F5F7 / Supporting: #0A5068, #D0D8E0
- WCAG: Primary on Secondary → 4.6:1 ✅ (AA).
Terracotta Bloom × Sand Dune
- Style: Warm, earthy, editorial.
- Primary: #C96A4A / Secondary: #EEDCC8 / Supporting: #A04830, #E0C8A8
Forest Moss × Vanilla Silk
- Style: Organic, natural, timeless.
- Primary: #4E6B45 / Secondary: #F4E8D0 / Supporting: #365030, #E8D8B8
- WCAG: Primary on Secondary → 5.1:1 ✅ (AA).
Indigo Night × Wisteria Glow
- Style: Modern, soft, premium.
- Primary: #2D4275 / Secondary: #D6C6F7 / Supporting: #1A2A58, #C0A8F0
- WCAG: Primary on Secondary → 6.2:1 ✅ (AA).
Gradients
Caramel Drift
- Saturated Stop: #C07F45 → Light Stop: #FCEDD6
background: linear-gradient(135deg, #C07F45 0%, #FCEDD6 100%);
Teal Pearl
- Saturated Stop: #0E7490 → Light Stop: #F2F5F7
background: linear-gradient(135deg, #0E7490 0%, #F2F5F7 100%);
Wisteria Cloud
- Saturated Stop: #2D4275 → Light Stop: #D6C6F7
background: linear-gradient(135deg, #2D4275 0%, #D6C6F7 100%);
Otherworldly
Futuristic, neon, surreal, cyber, and reality-bending palettes. Use when the output must feel like it belongs to another dimension.
Skin Tone
- Style: Warm, synthetic, soft sci-fi.
- Primary: #FFC6A8
- Secondary: #741A2F
- Accent: #FF8060
- Supporting: #E89078, #4A1020, #FFF0E8
- Best for: Futuristic beauty, surreal fashion, human-centered sci-fi visuals.
- WCAG: Secondary (#741A2F) on Primary (#FFC6A8) → 4.8:1 ✅ (AA).
Vulcanico
- Style: Hot, aggressive, kinetic, ultra-digital.
- Primary: #FF4103
- Secondary: #001621
- Accent: #FFAA00
- Supporting: #CC2800, #002A3A, #FFD080
- Best for: Cyberpunk branding, bold interface accents, intense visual identity.
- WCAG: Accent (#FFAA00) on Secondary (#001621) → 9.2:1 ✅ (AAA).
Silver Pulse
- Style: Minimal, electric, high-contrast, synthetic.
- Primary: #141414
- Secondary: #2BEE34
- Accent: #FFFFFF
- Supporting: #1E1E1E, #20B828, #A0FFA0
- Best for: Neon UI, digital systems, futuristic dashboards.
- WCAG: Accent (#FFFFFF) on Primary (#141414) → 18.1:1 ✅ (AAA).
Turmeric Signal
- Style: Bright, sharp, experimental, energized.
- Primary: #FFBE0B
- Secondary: #2A2312
- Accent: #FF4000
- Supporting: #CC9800, #1A1508, #FF8040
- Best for: Concept art, tech branding, attention-grabbing interfaces.
- WCAG: Secondary (#2A2312) on Primary (#FFBE0B) → 9.4:1 ✅ (AAA).
Milky Grove
- Style: Soft, organic, luminous, slightly alien.
- Primary: #FFFDF1
- Secondary: #59C749
- Accent: #1A5A10
- Supporting: #D8F8D0, #3A8A28, #F0FFF0
- Best for: Eco-futurism, wellness-tech, optimistic sci-fi visuals.
- WCAG: Accent (#1A5A10) on Primary (#FFFDF1) → 9.7:1 ✅ (AAA).
Lime Oracle
- Style: Acidic, electric, strange, futuristic.
- Primary: #E4FD97
- Secondary: #2D3E2C
- Accent: #8FD400
- Supporting: #C0E060, #1A2818, #F0FFAA
- Best for: Experimental branding, cyber nature, bold futuristic systems.
- WCAG: Secondary (#2D3E2C) on Primary (#E4FD97) → 8.3:1 ✅ (AAA).
Cyprus Echo
- Style: Deep, calm, balanced, futuristic-natural.
- Primary: #004741
- Secondary: #F0EDE4
- Accent: #00C8A8
- Supporting: #003028, #D8D4C8, #80E8D0
- Best for: Premium eco-tech, serene interfaces, modern organic branding.
- WCAG: Secondary (#F0EDE4) on Primary (#004741) → 11.4:1 ✅ (AAA).
True Signal
- Style: Hot, vivid, synthetic, pop-futurist.
- Primary: #FD1843
- Secondary: #FFF9FA
- Accent: #0A0A0A
- Supporting: #C81030, #FFE8EC, #303030
- Best for: Youthful digital products, neon brand moments, sharp accent systems.
- WCAG: Accent (#0A0A0A) on Secondary (#FFF9FA) → 19.3:1 ✅ (AAA).
Charcoal Violet
- Style: Dark, electric, surreal, high-contrast.
- Primary: #3C1A47
- Secondary: #B6FF00
- Accent: #FFFFFF
- Supporting: #280E30, #88CC00, #E0E0E0
- Best for: Futuristic editorial design, bold app themes, neon contrast work.
- WCAG: Secondary (#B6FF00) on Primary (#3C1A47) → 10.4:1 ✅ (AAA).
Gradients
Neon Abyss
- Saturated Stop: #3C1A47 → Light Stop: #B6FF00
background: linear-gradient(135deg, #3C1A47 0%, #B6FF00 100%);
Solar Flare
- Saturated Stop: #FF4103 → Light Stop: #FFBE0B
background: linear-gradient(135deg, #FF4103 0%, #FFBE0B 100%);
Void Pulse
- Saturated Stop: #141414 → Light Stop: #2BEE34
background: linear-gradient(135deg, #141414 0%, #2BEE34 100%);
Acid Contemporary
Disruptive, urban, high-voltage palettes. Confrontational by design — street culture, bold editorial, event branding.
Agent rule: These palettes are confrontational by design. Do not soften them. If the context calls for subtlety, switch to Luxury or Minimalist instead.
Ink Volt
- Style: Maximum contrast, street editorial, aggressive typographic energy.
- Primary: #0A0A0A / Secondary: #F5E800 / Accent: #FFFFFF / Supporting: #1A1A1A, #CCCC00, #AAAAAA
- WCAG: Secondary (#F5E800) on Primary (#0A0A0A) → 17.4:1 ✅ (AAA).
Crimson Grid
- Style: Dark tech, cinematic tension, high-drama red.
- Primary: #0D0D0D / Secondary: #CC0A20 / Accent: #FFFFFF / Supporting: #1A0A0A, #3A0010, #888888
- WCAG: Accent (#FFFFFF) on Primary (#0D0D0D) → 19.0:1 ✅ (AAA).
Blood Stage
- Style: Raw, mythic, performance-driven, crowd energy.
- Primary: #C8102E / Secondary: #0A0A0A / Accent: #FFFFFF / Supporting: #8B0000, #5C0015, #AAAAAA
- WCAG: Accent (#FFFFFF) on Primary (#C8102E) → 4.7:1 ✅ (AA).
Tactical Lime
- Style: Military edge, athletic aggression, acid-nature contrast.
- Primary: #3B3D2A / Secondary: #C2F03A / Accent: #FFFFFF / Supporting: #1A6B5C, #CC2B2B, #1A1A1A
- WCAG: Secondary (#C2F03A) on Primary (#3B3D2A) → 8.1:1 ✅ (AAA).
Void Green
- Style: Digital underground, hacker aesthetic, neon life in darkness.
- Primary: #050F05 / Secondary: #1AE81A / Accent: #FFFFFF / Supporting: #0D4A0D, #002200, #111111
- WCAG: Secondary (#1AE81A) on Primary (#050F05) → 13.2:1 ✅ (AAA).
Gradients
Volt Smear
background: linear-gradient(135deg, #0A0A0A 0%, #F5E800 100%);
Crimson Fade
background: linear-gradient(135deg, #CC0A20 0%, #0D0D0D 100%);
Acid Burn
background: linear-gradient(135deg, #3B3D2A 0%, #C2F03A 100%);
Refined Defaults
Smarter alternatives to the blunt base colors that beginners and lazy tools default to.
Agent rule: If you are about to use #000000, #ffffff, #0000ff, #ff0000, #00ff00, or #9a4dff — stop. Use the refined alternatives below instead.
Instead of Black (#000000)
- Use: #161616, #232323, #2C2C2C, #363636
- Why: Pure black feels flat and printed. These near-blacks read more intentional.
Instead of White (#ffffff)
- Use: #F6F6F6, #EEEEF0, #DEDEDE, #E1E1E1
- Why: Pure white glows on screen. Off-whites feel considered and easier on the eye.
Instead of Blue (#0000ff)
- Use: #347AEA, #1E2FB0, #1E4BA3, #223068
- Why: Pure blue is aggressive and dated. These carry authority without shouting.
Instead of Red (#ff0000)
- Use: #F64547, #D7202D, #941020, #C92D31
- Why: Pure red is alarm-level intensity. These reds feel designed, not defaulted to.
Instead of Green (#00ff42)
- Use: #91B96B, #5C985A, #56754B, #306C5F
- Why: Neon green screams synthetic. These greens feel grown, not coded.
Instead of Purple (#9a4dff)
- Use: #361269, #6000D3, #7C44A5, #665090
- Why: Default bright purple feels accidental. These have weight and recognisability.
Soft Gradients
Named two-stop gradient pairs for calm, breathable, emotionally gentle visuals.
Agent rule: Direction is flexible — top-to-bottom and 135° diagonal both work well. Apply as linear or radial.
Eucalyptus Glow
background: linear-gradient(135deg, #A7C4A0 0%, #F4EFE6 100%);
Pearl Mauve
background: linear-gradient(135deg, #D8BFD8 0%, #FDFCFB 100%);
Ocean Breeze
background: linear-gradient(135deg, #7FCDFF 0%, #DFF7FF 100%);
Peach Champagne
background: linear-gradient(135deg, #FFD3B6 0%, #FFF7F0 100%);
Dreamy Periwinkle
background: linear-gradient(135deg, #B8C0FF 0%, #E7D8FF 100%);
Mint Lagoon
background: linear-gradient(135deg, #6DD5C4 0%, #DFF6F0 100%);
Nature / Organic
Palettes rooted in the living world — soil, bark, moss, stone, sky, water.
Forest Floor
- Style: Dense, shadowed, rich, deeply organic.
- Primary: #2C3A2A / Secondary: #4A5E3A / Accent: #A8C080 / Supporting: #7A6B52, #1E2A1A, #E8E0D0
- WCAG: Accent (#A8C080) on Primary (#2C3A2A) → 5.3:1 ✅ (AA).
River Stone
- Style: Cool, muted, mineral, grounded.
- Primary: #5A6B6E / Secondary: #D4D8D0 / Accent: #3A8A78 / Supporting: #8A9A98, #2A3A3C, #F0EDE8
Golden Meadow
- Style: Warm, open, harvest-light, pastoral.
- Primary: #C8A84B / Secondary: #F5EDD0 / Accent: #6B8A3A / Supporting: #A07840, #3A4A28, #FBF7EC
- WCAG: Accent (#6B8A3A) on Secondary (#F5EDD0) → 4.6:1 ✅ (AA).
Bark & Sage
- Style: Rough, honest, textured, understated.
- Primary: #7A6248 / Secondary: #E8E0D0 / Accent: #7A9A68 / Supporting: #4A3A2C, #B0A888, #F5F0E8
Deep Canopy
- Style: Lush, tropical-dense, vivid organic.
- Primary: #1A3A2A / Secondary: #2E5A3A / Accent: #C8D84A / Supporting: #4A7A50, #0E2018, #F0F0E0
- WCAG: Accent (#C8D84A) on Primary (#1A3A2A) → 8.9:1 ✅ (AAA).
Gradients
Morning Moss
background: linear-gradient(135deg, #4A5E3A 0%, #E8E0D0 100%);
Stone Wash
background: linear-gradient(135deg, #5A6B6E 0%, #F0EDE8 100%);
Canopy Light
background: linear-gradient(135deg, #1A3A2A 0%, #C8D84A 100%);
Minimalist
Palettes built on restraint. One dominant neutral, one precise accent, maximum whitespace.
Agent rule: Never add more than one accent color. If tempted to add a second, remove it — whitespace is the second color.
Bone & Carbon
- Style: Warm-neutral base, dark anchor, zero decoration.
- Primary: #F5F0EB / Secondary: #1E1E1E / Accent: #B07840 / Supporting: #D8D0C8, #3A3A3A
- WCAG: Secondary (#1E1E1E) on Primary (#F5F0EB) → 15.8:1 ✅ (AAA).
Chalk & Ink
- Style: Cool-white base, pure black type, clean.
- Primary: #F8F8F8 / Secondary: #111111 / Accent: #0057FF / Supporting: #E0E0E0, #444444
- WCAG: Accent (#0057FF) on Primary (#F8F8F8) → 6.2:1 ✅ (AA).
Warm Mono
- Style: Single warm tone scaled across values, no contrast color.
- Primary: #FAF5EE / Secondary: #D4C4A8 / Accent: #8A6A40 / Supporting: #B8A888, #5A4830
- WCAG: Accent (#8A6A40) on Primary (#FAF5EE) → 4.8:1 ✅ (AA).
Grey Scale Plus
- Style: Full greyscale with one surgical color pop.
- Primary: #F2F2F2 / Secondary: #2A2A2A / Accent: #E8341C / Supporting: #AAAAAA, #777777
- WCAG: Accent (#E8341C) on Primary (#F2F2F2) → 4.6:1 ✅ (AA).
Ash & Mist
- Style: Soft cool grey, barely-there, silent presence.
- Primary: #ECEEF0 / Secondary: #5A6270 / Accent: #3A7A8A / Supporting: #B8C0C8, #2A3040
- WCAG: Accent (#3A7A8A) on Primary (#ECEEF0) → 4.5:1 ✅ (AA).
Gradients
Bone Fade
background: linear-gradient(135deg, #D8D0C8 0%, #F5F0EB 100%);
Ink Mist
background: linear-gradient(135deg, #2A2A2A 0%, #F8F8F8 100%);
Ash Drift
background: linear-gradient(135deg, #5A6270 0%, #ECEEF0 100%);
Rustic / Craft
Warm amber, kraft paper, leather, raw linen, aged wood. For brands whose story is about hands, process, and authenticity.
Amber Workshop
- Style: Warm, woody, handmade, artisan-rich.
- Primary: #8B5E3C / Secondary: #F5E6CC / Accent: #C8981A / Supporting: #6A4228, #D4B890, #FAF3E0
- WCAG: Use Supporting #6A4228 on Secondary → 5.4:1 ✅.
Leather & Linen
- Style: Raw, tactile, warm restraint.
- Primary: #A0784A / Secondary: #F0E8D8 / Accent: #5A3E28 / Supporting: #C8A878, #D8C8A8, #FAF6EE
- WCAG: Accent (#5A3E28) on Secondary (#F0E8D8) → 7.1:1 ✅ (AA).
Smoked Oak
- Style: Dark, textured, aged, serious craft.
- Primary: #3A2A1E / Secondary: #8A7060 / Accent: #C89050 / Supporting: #6A5040, #D8C0A0, #F5EEE0
- WCAG: Accent (#C89050) on Primary (#3A2A1E) → 5.8:1 ✅ (AA).
Kraft & Clay
- Style: Earthy, raw, unfinished, honest.
- Primary: #B8936A / Secondary: #F5EDD8 / Accent: #7A5840 / Supporting: #D8B890, #A07850, #FBF5EA
Harvest Dusk
- Style: End-of-day warmth, rich amber sky, rural.
- Primary: #C07030 / Secondary: #F5D8A8 / Accent: #3A3020 / Supporting: #A05020, #E8C080, #FBF0D8
- WCAG: Accent (#3A3020) on Secondary (#F5D8A8) → 10.2:1 ✅ (AAA).
Gradients
Amber Glow
background: linear-gradient(135deg, #8B5E3C 0%, #F5E6CC 100%);
Smoked Drift
background: linear-gradient(135deg, #3A2A1E 0%, #C89050 100%);
Linen Haze
background: linear-gradient(135deg, #C8A878 0%, #FAF6EE 100%);
Gothic / Dark Romance
Deep wine, bone white, charcoal smoke, velvet purple, cold iron. Dramatic, mysterious, emotionally intense.
Agent rule: Gothic palettes must always include at least one near-white or bone tone as a contrast anchor. Pure black on pure black is a failure state.
Velvet Crypt
- Style: Deep, opulent darkness, rich and suffocating.
- Primary: #1A0A1E / Secondary: #3A1A40 / Accent: #C8A0E0 / Supporting: #7A4A90, #F0E8F8, #0E0610
- WCAG: Accent (#C8A0E0) on Primary (#1A0A1E) → 8.1:1 ✅ (AAA).
Bone & Wine
- Style: Contrast-driven, romantic, decadent, timeless.
- Primary: #1A0808 / Secondary: #8B1A2A / Accent: #F0E8D8 / Supporting: #5A0E18, #C8A090, #2A1010
- WCAG: Accent (#F0E8D8) on Primary (#1A0808) → 14.6:1 ✅ (AAA).
Iron Fog
- Style: Cold, industrial, melancholic, restrained gothic.
- Primary: #1E2028 / Secondary: #3A3E48 / Accent: #8A90A8 / Supporting: #5A5E70, #C8CAD0, #0E1018
- WCAG: Accent (#8A90A8) on Primary (#1E2028) → 4.6:1 ✅ (AA).
Midnight Bloom
- Style: Floral, dark, mysterious, romantically lush.
- Primary: #1A1028 / Secondary: #4A2050 / Accent: #E050A0 / Supporting: #7A1850, #F8C8E0, #0E0818
- WCAG: Accent (#E050A0) on Primary (#1A1028) → 6.3:1 ✅ (AA).
Ash Raven
- Style: Stripped, cold, mournful minimalism.
- Primary: #18181C / Secondary: #2E2E34 / Accent: #E8E0D0 / Supporting: #4A4A52, #8A8A90, #F5F2EE
- WCAG: Accent (#E8E0D0) on Primary (#18181C) → 13.4:1 ✅ (AAA).
Gradients
Velvet Smoke
background: linear-gradient(135deg, #1A0A1E 0%, #C8A0E0 100%);
Crimson Bone
background: linear-gradient(135deg, #8B1A2A 0%, #F0E8D8 100%);
Iron Veil
background: linear-gradient(135deg, #1E2028 0%, #C8CAD0 100%);
Warm Tropical / Resort
Mango, coral, turquoise, warm sand, palm shadow. Generous, joyful, physically warm.
Mango Shore
- Style: Ripe, vivid, sun-drenched, joyful.
- Primary: #FF8C42 / Secondary: #FFF3E0 / Accent: #0097A7 / Supporting: #FF6B1A, #FFD580, #005F6B
- WCAG: Accent (#0097A7) on Secondary (#FFF3E0) → 4.7:1 ✅ (AA).
Coral Lagoon
- Style: Warm, aquatic, fresh, resort-luxe.
- Primary: #FF6F61 / Secondary: #FFF8F5 / Accent: #48CAE4 / Supporting: #E8504A, #A0D8E0, #FFC5B0
Palm & Sand
- Style: Calm, warm, natural resort, understated tropical.
- Primary: #E8C99A / Secondary: #FBF5E8 / Accent: #3A7A6A / Supporting: #B89870, #7AB090, #F5EDD8
- WCAG: Accent (#3A7A6A) on Secondary (#FBF5E8) → 5.0:1 ✅ (AA).
Sunset Punch
- Style: Bold, saturated, cocktail-hour drama.
- Primary: #E84060 / Secondary: #FF9A3C / Accent: #FFF0A0 / Supporting: #A01830, #FF6820, #FFC850
- WCAG: Accent (#FFF0A0) on Primary (#E84060) → 4.9:1 ✅ (AA).
Turquoise Drift
- Style: Cool tropical, sea glass, serene and open.
- Primary: #00B4C8 / Secondary: #E0F8FC / Accent: #FF8040 / Supporting: #007A8A, #80D8E8, #FFF5EE
- WCAG: Use Supporting #007A8A for text on Secondary → 5.2:1 ✅. Accent is decorative only.
Gradients
Mango Horizon
background: linear-gradient(135deg, #FF8C42 0%, #FFF3E0 100%);
Lagoon Fade
background: linear-gradient(135deg, #00B4C8 0%, #E0F8FC 100%);
Sunset Wash
background: linear-gradient(135deg, #E84060 0%, #FF9A3C 100%);
Retro / Vintage
Faded, sun-bleached, tobacco-stained, nostalgic. Controlled desaturation is the key.
Agent rule: Retro palettes must feel slightly faded. If a color looks too clean or saturated, pull it back. Vintage is about imperfection, not freshness.
Mustard Record
- Style: 70s warmth, vinyl culture, bold and worn.
- Primary: #C8980A / Secondary: #F5E8C0 / Accent: #A03820 / Supporting: #8A6808, #E0C870, #FAF0D8
- WCAG: Accent (#A03820) on Secondary (#F5E8C0) → 5.4:1 ✅ (AA).
Avocado Dream
- Style: Late-60s/70s organic, muted, period-correct.
- Primary: #7A8A38 / Secondary: #F0EDD8 / Accent: #C87840 / Supporting: #5A6828, #D8D0A8, #FAF5E8
Faded Denim
- Style: Washed, worn, American classic, 90s casual.
- Primary: #5A7090 / Secondary: #E8EEF5 / Accent: #C84830 / Supporting: #3A5070, #A8B8C8, #F5F0E8
- WCAG: Accent (#C84830) on Secondary (#E8EEF5) → 4.6:1 ✅ (AA).
Rust & Cream
- Style: Industrial vintage, aged metal, warm patina.
- Primary: #B84820 / Secondary: #F5EAD8 / Accent: #3A3828 / Supporting: #8A3818, #D8C0A0, #FAF5EC
- WCAG: Accent (#3A3828) on Secondary (#F5EAD8) → 10.8:1 ✅ (AAA).
Tobacco & Ivory
- Style: Aged paper, sepia warmth, old world editorial.
- Primary: #A08040 / Secondary: #F8F0DC / Accent: #3A2E20 / Supporting: #7A6030, #D8C898, #FAF5E4
- WCAG: Accent (#3A2E20) on Secondary (#F8F0DC) → 12.4:1 ✅ (AAA).
Gradients
Mustard Haze
background: linear-gradient(135deg, #C8980A 0%, #F5E8C0 100%);
Rust Fade
background: linear-gradient(135deg, #B84820 0%, #F5EAD8 100%);
Denim Wash
background: linear-gradient(135deg, #5A7090 0%, #E8EEF5 100%);
Corporate / Enterprise
B2B SaaS, finance, legal, logistics, enterprise software. Project competence, reliability, and scalability — not personality.
Agent rule: Corporate palettes must pass WCAG AA on all text elements. If a color fails 4.5:1 for normal text, do not use it for body copy.
Slate Command
- Style: Authoritative, structured, data-forward, no-nonsense.
- Primary: #F4F6F8 / Secondary: #1C2B3A / Accent: #1D72C6 / Supporting: #4A6A88, #D8E2EC, #0A1A2A
- WCAG: Accent (#1D72C6) on Primary (#F4F6F8) → 5.8:1 ✅ (AA). Secondary on Primary → 13.2:1 ✅ (AAA).
Finance Trust
- Style: Conservative, credible, wealth-adjacent, bank-grade.
- Primary: #FFFFFF / Secondary: #002244 / Accent: #005BBB / Supporting: #D4E1F0, #6688AA, #001A33
- WCAG: Accent (#005BBB) on Primary (#FFFFFF) → 7.2:1 ✅ (AA). Secondary on Primary → 16.8:1 ✅ (AAA).
Legal Anchor
- Style: Sober, traditional, precise, institutional.
- Primary: #F8F7F4 / Secondary: #1A1A2E / Accent: #8B6914 / Supporting: #D0CCC0, #4A4A5A, #C8A840
- WCAG: Accent (#8B6914) on Primary (#F8F7F4) → 5.2:1 ✅ (AA).
Ops Green
- Style: Operational, efficient, system-status, uptime-first.
- Primary: #F2F5F0 / Secondary: #1A2E1A / Accent: #2E7D32 / Supporting: #A8C8A0, #4A6A48, #E0EDD8
- WCAG: Accent (#2E7D32) on Primary (#F2F5F0) → 6.3:1 ✅ (AA).
Steel Platform
- Style: Neutral, scalable, product-first, utility.
- Primary: #FAFAFA / Secondary: #212121 / Accent: #6200EE / Supporting: #E0E0E0, #757575, #3700B3
- WCAG: Accent (#6200EE) on Primary (#FAFAFA) → 8.9:1 ✅ (AAA).
Gradients
Slate Rise
background: linear-gradient(135deg, #1C2B3A 0%, #F4F6F8 100%);
Finance Depth
background: linear-gradient(135deg, #002244 0%, #D4E1F0 100%);
Ops Pulse
background: linear-gradient(135deg, #1A2E1A 0%, #E0EDD8 100%);
Healthcare / Medical
Clinical, wellness-tech, pharma, telehealth, medical devices. Safe and trustworthy first, human second.
Agent rule: Avoid pure red in healthcare UI — it reads as emergency/error. Reserve it for actual critical alerts only.
Clinical Trust
- Style: Clean, professional, safe, sterile-but-human.
- Primary: #F7FAFC / Secondary: #1A5276 / Accent: #2E86C1 / Supporting: #AED6F1, #5D9BC4, #E8F4FD
- WCAG: Accent (#2E86C1) on Primary (#F7FAFC) → 4.8:1 ✅ (AA). Secondary on Primary → 10.4:1 ✅ (AAA).
Wellness Sage
- Style: Calm, grounding, preventive care, holistic.
- Primary: #F4F9F4 / Secondary: #1E5E3A / Accent: #27AE60 / Supporting: #A9DFBF, #52BE80, #EAFAF1
- WCAG: Accent (#27AE60) on Primary (#F4F9F4) → 4.5:1 ✅ (AA).
Pharma Precision
- Style: Exact, controlled, lab-grade, no ambiguity.
- Primary: #FFFFFF / Secondary: #0B3D6B / Accent: #007DC5 / Supporting: #CCE5F5, #4A90B8, #F0F8FF
- WCAG: Accent (#007DC5) on Primary (#FFFFFF) → 5.3:1 ✅ (AA). Secondary on Primary → 13.8:1 ✅ (AAA).
Recovery Warmth
- Style: Gentle, supportive, post-acute care, human.
- Primary: #FDF8F2 / Secondary: #7D6148 / Accent: #E07B39 / Supporting: #F0D9C0, #B89070, #FAF0E6
- WCAG: Secondary (#7D6148) on Primary (#FDF8F2) → 5.6:1 ✅ (AA).
Gradients
Clinical Calm
background: linear-gradient(135deg, #1A5276 0%, #F7FAFC 100%);
Wellness Lift
background: linear-gradient(135deg, #1E5E3A 0%, #F4F9F4 100%);
Gaming / Esports
Dark, high-energy palettes for competitive gaming, streaming, esports teams, and gaming hardware.
Agent rule: Use near-black as base (not pure #000000). Neon accents must be legible at small sizes. Never use more than two neon colors in one palette.
Cyber Arena
- Style: Electric, competitive, tournament-grade, iconic.
- Primary: #0D0D1A / Secondary: #00F0FF / Accent: #FF0080 / Supporting: #1A1A2E, #00B8CC, #CC0066
- WCAG: Secondary (#00F0FF) on Primary (#0D0D1A) → 14.3:1 ✅ (AAA).
Shadow Protocol
- Style: Tactical, military-game, stealth, professional.
- Primary: #111418 / Secondary: #1E2A1E / Accent: #4AFF6A / Supporting: #2A3A2A, #30CC50, #E0FFE8
- WCAG: Accent (#4AFF6A) on Primary (#111418) → 13.7:1 ✅ (AAA).
Void Reactor
- Style: Sci-fi, high-tech, reactor-core energy, purple-dominant.
- Primary: #0A0010 / Secondary: #8000FF / Accent: #E0A0FF / Supporting: #3A0060, #6000CC, #F0D8FF
- WCAG: Accent (#E0A0FF) on Primary (#0A0010) → 12.1:1 ✅ (AAA).
Fire Squad
- Style: Aggressive, loud, combat-energy, team identity.
- Primary: #120808 / Secondary: #FF3000 / Accent: #FFB800 / Supporting: #CC2000, #CC8800, #FF8060
- WCAG: Accent (#FFB800) on Primary (#120808) → 14.8:1 ✅ (AAA).
Ice Cap
- Style: Cool, precise, clean competitive, speed-first.
- Primary: #08101A / Secondary: #00B8FF / Accent: #FFFFFF / Supporting: #0080CC, #0040A0, #D0F0FF
- WCAG: Accent (#FFFFFF) on Primary (#08101A) → 18.6:1 ✅ (AAA).
Gradients
Cyber Grid
background: linear-gradient(135deg, #0D0D1A 0%, #00F0FF 100%);
Reactor Core
background: linear-gradient(135deg, #0A0010 0%, #8000FF 100%);
Fire Rush
background: linear-gradient(135deg, #120808 0%, #FF3000 100%);
Seasonal
Palettes calibrated to seasonal contexts — campaign refreshes, retail seasons, and holiday branding.
Agent rule: Seasonal palettes are time-scoped. Always note the intended season/period in the Design Route block so downstream skills (effects, fonts) can align to the seasonal mood.
Spring Bloom
- Style: Fresh, light, renewal, optimistic.
- Primary: #F0F7E6
- Secondary: #5BA85C
- Accent: #FF7EB3
- Supporting: #B5D5A8, #E8F5D8, #FFD6EB
- Best for: Spring campaign hero sections, Easter branding, garden/lifestyle seasonal refresh.
- WCAG: Secondary (#5BA85C) on Primary (#F0F7E6) → 4.5:1 ✅ (AA). Accent (#FF7EB3) on Primary → 2.1:1 ⚠️ Decorative only.
Summer Pulse
- Style: Hot, vivid, outdoor energy, peak season.
- Primary: #FF8C00
- Secondary: #005FA3
- Accent: #FFFFFF
- Supporting: #FFC04D, #0047A0, #E8F4FF
- Best for: Summer sale campaigns, beach/outdoor brands, peak season promotions, festival branding.
- WCAG: Accent (#FFFFFF) on Secondary (#005FA3) → 7.3:1 ✅ (AA).
Autumn Harvest
- Style: Warm, rich, transitional, harvest depth.
- Primary: #C8601A
- Secondary: #F5E6C8
- Accent: #3A2808
- Supporting: #8B3A0A, #D4A86A, #FAF0DC
- Best for: Autumn campaigns, harvest themes, back-to-school, seasonal menu refreshes.
- WCAG: Accent (#3A2808) on Secondary (#F5E6C8) → 11.2:1 ✅ (AAA).
Winter Silence
- Style: Cold, still, luxury-adjacent, cinematic.
- Primary: #0A1628
- Secondary: #C8D8E8
- Accent: #E8C84A
- Supporting: #1E3A5A, #8AAAC8, #F0F5F8
- Best for: Winter campaigns, holiday packaging, Christmas editorial, cold-season luxury.
- WCAG: Accent (#E8C84A) on Primary (#0A1628) → 8.9:1 ✅ (AAA).
Holiday Warmth
- Style: Festive, warm, inclusive, celebratory.
- Primary: #C41E3A
- Secondary: #F5F0E8
- Accent: #D4AF37
- Supporting: #8B0000, #E8D5B0, #FAF8F0
- Best for: Christmas/holiday campaigns, festive retail, end-of-year celebration branding.
- WCAG: Use Secondary (#F5F0E8) for text on Primary → 8.4:1 ✅ (AAA). Accent on Primary → 3.2:1 ⚠️ Large text only.
Gradients
Spring Rise
background: linear-gradient(135deg, #5BA85C 0%, #F0F7E6 100%);
Summer Horizon
background: linear-gradient(135deg, #FF8C00 0%, #005FA3 100%);
Amber Fall
background: linear-gradient(135deg, #C8601A 0%, #F5E6C8 100%);
Winter Depth
background: linear-gradient(135deg, #0A1628 0%, #C8D8E8 100%);
Holiday Glow
background: linear-gradient(135deg, #C41E3A 0%, #D4AF37 100%);
Brand Archetype Guide
Use this when the brief describes brand personality rather than industry.
Archetypes map directly to color category intent and can confirm or override an industry signal.
Agent rule: Brand archetype is a secondary signal. It confirms or refines the category from the Decision Guide. If archetype contradicts industry, surface both options and let the user decide.
| Archetype | Core emotion | Recommended category | Notes |
|---|
| The Innocent | Purity, simplicity, trust | Soft Gradients, Luxury Facade / Soft Prestige | Light palettes, no aggression |
| The Everyman | Belonging, honesty, approachability | Rustic / Craft, Nature / Organic | Warm, unpretentious, no flash |
| The Hero | Courage, achievement, ambition | Luxury / Volcanic Intensity, Acid Contemporary | Bold, strong contrast |
| The Outlaw / Rebel | Disruption, freedom, revolution | Acid Contemporary, Gaming / Esports | Maximum contrast, confrontational |
| The Explorer | Adventure, discovery, freedom | Warm Tropical / Resort, Nature / Organic, Otherworldly | Open, expansive |
| The Creator | Craft, imagination, originality | Minimalist, Rustic / Craft, Retro / Vintage | Considered, intentional |
| The Ruler | Authority, control, prestige | Luxury / Golden Obsession, Corporate / Finance Trust | Commanding, structured |
| The Magician | Transformation, vision, mystery | Otherworldly, Gothic / Dark Romance | Surreal, transformational |
| The Lover | Intimacy, passion, beauty | Gothic / Bone & Wine, Luxury Facade / Soft Prestige | Sensual, emotionally rich |
| The Caregiver | Nurturing, warmth, service | Healthcare / Wellness Sage, Soft Gradients | Safe, gentle, human-first |
| The Jester | Fun, play, irreverence | Warm Tropical / Resort, Seasonal / Summer Pulse | Energy without aggression |
| The Sage | Knowledge, wisdom, clarity | Corporate / Steel Platform, Minimalist / Chalk & Ink | Clean, authoritative |
Dark Mode Adaptation
When a brief requires dark mode, adapt any palette using these rules rather than guessing.
Universal rules
- Swap Primary ↔ Secondary — the dominant surface becomes dark; the secondary becomes the lighter surface element.
- Desaturate Accent by 10–15% — pure saturated accents vibrate on dark backgrounds; pulling back reduces eye strain.
- Lift Supporting tones — lighten supporting neutrals by 20–30% so they remain visible against dark surfaces.
- Never go below #111111 for dark backgrounds — pure #000000 creates harsh contrast and feels undesigned.
- Re-check WCAG after adapting — contrast ratios change when colors are inverted.
Per-category dark mode guidance
| Category | Dark mode approach |
|---|
| Luxury | Most already dark-first (Golden Obsession, Volcanic Intensity) — use as-is |
| Luxury Facade | Swap Primary/Secondary; keep Accent |
| Minimalist | Bone & Carbon already works; Chalk & Ink: swap to #111111 base, #F8F8F8 text |
| Corporate | Slate Command dark: use #0D1520 base, #D8E2EC surfaces, Accent unchanged |
| Healthcare | Avoid full dark mode for clinical UI — use "dim mode" (max bg: #1A2A3A) not true dark |
| Gothic | Already dark-first — no adaptation needed |
| Gaming | Already dark-first — no adaptation needed |
| Otherworldly | Already dark-first — no adaptation needed |
| Nature / Organic | Dark variant: use Deep Canopy palette as base |
| Warm Tropical | Reduce saturation by 20%; use dark base #0A1A1A with Sunset Punch Accent |
| Retro / Vintage | Use Smoked Oak (Rustic) as dark base; retain desaturated retro tones |
| Soft Gradients | Invert gradient direction; desaturate both stops by 15% |
Color Discipline
Rules for using a palette — applied on top of whichever combo you choose.
Pixel-share structure
Plan all four layers before writing any CSS. A coherent palette allocates screen
real-estate deliberately:
| Layer | Share of pixels | What it covers |
|---|
| Neutrals | 70–90% | Backgrounds, surfaces, body text, borders |
| Accent (one) | 5–10% | CTAs, chips, active states — never invent a second accent |
| Semantic | 0–5% | Success, warning, danger states only |
| Effect | < 1% | Glows, gradients — rarely justified |
Accent discipline
The single biggest readability failure in AI-generated UIs is accent overuse.
- At most 2 visible uses of accent per screen. Typical pair: one chip/eyebrow label +
one primary CTA. Or one accent card header + one tab indicator. Pick a pair.
- Links count as accent. If you already have a CTA on the same screen, demote links to
underlined foreground colour instead.
- Hover/focus rings count as accent. Budget them in your 2-use cap.
Dark surface borders
On dark backgrounds, prefer semi-transparent white borders over solid dark ones:
border: 1px solid rgba(255, 255, 255, 0.08);
This reads as structure without adding visual noise. Solid dark borders on dark
surfaces disappear.
Near-black / near-white floors
Avoid pure #000000 and #ffffff — both cause vibration and feel undesigned:
| Token | Dark theme | Light theme |
|---|
| Background | #0f0f0f | #fafafa |
| Foreground text | #f0f0f0 | #111111 |
Contributing
New color combinations welcome. Each submission should include:
- Palette name and category
- Primary, Secondary, Accent, Supporting hex codes
- Style description (2–3 words, evocative)
- Best for (2–3 specific use cases)
- WCAG contrast check: Accent on Primary ratio
- Gradient pair with CSS snippet (optional but encouraged)
Maintained by @bilioveloso.
