Solanasis Color Palette Chooser (Markdown)

This is a working palette chooser you can use for your website + pitch deck + PDFs.
Goal: authentic / raw (not stock-corporate) but still professional (trustworthy, calm, high-signal).


1) Colors pulled from your current banner + logo (approx)

These were extracted from your reference images (so treat as directional, not sacred).

  • #020532 (50.3%)
  • #091652 (44.1%)
  • #4D4F6A (1.6%)
  • #0D3389 (1.3%)
  • #9597A9 (0.6%)
  • #6D6F89 (0.5%)

Logo (dominant)

  • #FEF9F1 (94.6%)
  • #F0EBE4 (2.5%)
  • #E7E2DC (1.0%)
  • #6C6D70 (0.6%)
  • #D6D2CD (0.6%)
  • #9F9E9D (0.6%)

What this says about your taste so far

  • You like deep navy as the anchor (serious, resilient).
  • You like parchment/off-white as a human, tactile base (less “sterile SaaS white”).
  • You’re already flirting with “quiet premium” (serif + lots of breathing room).

2) How to choose fast (no overthinking)

Pick one of these brand “lanes,” then choose the palette that matches it:

  1. Quiet Authority: feels premium, calm, expensive (best for security/resilience trust)
  2. Ops-Forward: feels gritty/real, “we do the work” (best for resilience + incident reality)
  3. Modern Technical: feels cyber/infra, crisp (best for AI/engineering credibility)
  4. Human Premium: warm + grounded (best for consulting + relationships)

Rule of thumb:

  • Use 1 main accent for CTAs.
  • Keep neutrals warm (parchment/stone) if you want “authentic.”
  • Use deep color (navy/ink/forest) for authority.

3) Quick shortlist (most aligned with “raw + professional”)

If you want to stay close to your banner/logo vibe and still stand out:

  • P01 — Navy + Parchment + Copper (quiet authority, premium, very on-brand)
  • P03 — Navy + Safety Orange (ops-forward, sharp CTAs, feels real)
  • P06 — Navy + Rust + Bone (tactile + grounded, “authentic consulting”)
  • P05 / P13 — Navy/Espresso + Gold + Cream (warm premium, trust-building)
  • P17 — Stone + Olive + Clay (earthy edge, least “generic tech”)

Use the table to scan quickly. The CTA column shows a good default button pairing.

IDPalette (vibe)PrimarySecondaryAccentBackgroundTextCTA (bg/text)Text/BG contrast
P01Solanasis Core (Navy + Parchment + Copper)
quiet authority / premium / resilient
#020532 #091652 #C47A3D #FEF9F1 #111827 #C47A3D / #0B1220
(~5.5:1)
~16.9:1
P02Navy + Mint Signal
modern / clean / confident
#091652 #0D3389 #2AF5C8 #F8FAFC #0F172A #2AF5C8 / #0B1220
(~13.4:1)
~17.1:1
P03Navy + Safety Orange
ops / raw / urgent-when-needed
#020532 #374273 #FF6A2A #F6F2EA #111827 #FF6A2A / #0B1220
(~6.6:1)
~15.9:1
P04Ink + Cyan (Light)
cyber / crisp / not cheesy
#0B1020 #143B6B #22D3EE #F6FBFF #0F172A #22D3EE / #0B1220
(~10.4:1)
~17.1:1
P05Navy + Brushed Gold
executive / premium / steady
#0A2540 #1F3A5F #D4AF37 #FBF6EF #1C1917 #D4AF37 / #0B1220
(~8.9:1)
~16.3:1
P06Navy + Rust + Bone
authentic / grounded / tactile
#0B1020 #334155 #B45309 #FDF6EC #0F172A #B45309 / #FFFFFF
(~5.0:1)
~16.6:1
P07Ink + Cyan (Dark Mode)
serious / technical / high contrast
#0B1020 #143B6B #22D3EE #070A12 #E5E7EB #22D3EE / #0B1220
(~10.4:1)
~16.0:1
P08Graphite + Lime Signal (Dark)
ops-ready / energetic but controlled
#0F172A #334155 #A3E635 #0B1220 #F8FAFC #A3E635 / #0B1220
(~12.4:1)
~17.9:1
P09Black + Burnt Orange (Dark)
industrial / decisive / punchy CTAs
#0B0F14 #2B3440 #F97316 #0B0F14 #F9FAFB #F97316 / #0B1220
(~6.7:1)
~18.4:1
P10Deep Teal + Mint (Dark)
calm power / unique / modern
#062A2B #0E6B6F #2AF5C8 #031313 #E6FFFB #2AF5C8 / #0B1220
(~13.4:1)
~18.1:1
P11Deep Purple + Magenta (Dark)
distinct / brandable / bold
#1B1028 #5B2A86 #FF4D8D #0D0816 #F5F3FF #FF4D8D / #0B1220
(~6.0:1)
~18.0:1
P12Midnight + Rose Alert (Dark)
security-forward / sober / sharp alerts
#0B1020 #1F2937 #E11D48 #05070E #F8FAFC #E11D48 / #FFFFFF
(~4.7:1)
~19.2:1
P13Espresso + Gold + Cream
warm premium / consulting / human
#2B1D14 #6B4F3A #D4AF37 #FBF6EF #1C1917 #D4AF37 / #0B1220
(~8.9:1)
~16.3:1
P14Forest + Sky
trust / calm / outdoorsy edge
#0E2A1F #1E6F5C #2D9CDB #F3F7F5 #0F172A #2D9CDB / #0B1220
(~6.1:1)
~16.5:1
P15Charcoal + Sand + Saffron
clean / modern / friendly
#111827 #4B5563 #F4B740 #FFF7ED #0B1220 #F4B740 / #0B1220
(~10.4:1)
~17.6:1
P16Slate + Coral
approachable / memorable / contemporary
#1F2937 #0E7490 #FF6B6B #F6FBFF #0F172A #FF6B6B / #0B1220
(~6.7:1)
~17.1:1
P17Stone + Olive + Clay
earthy / authentic / non-corporate
#1F2937 #556B2F #C2410C #F7F4EF #111827 #C2410C / #FFFFFF
(~5.2:1)
~16.2:1
P18Steel + Royal Purple
enterprise / distinct / confident
#1F2937 #4B5563 #6D28D9 #F9FAFB #111827 #6D28D9 / #FFFFFF
(~7.1:1)
~17.0:1
P19Solanasis Variant (Navy + Violet)
brand-forward / sharp / modern
#091652 #1748A0 #7C3AED #F8FAFF #0F172A #7C3AED / #FFFFFF
(~5.7:1)
~17.1:1
P20Ink + Amber Signal
ops / high-clarity / warm highlights
#0B1020 #374273 #F59E0B #F8FAFC #0F172A #F59E0B / #0B1220
(~8.7:1)
~17.1:1

5) Copy/paste tokens for each palette

Expand any palette and drop the CSS variables into your theme (Divi/WordPress custom CSS, or your design system).

P01 — Solanasis Core (Navy + Parchment + Copper) (quiet authority / premium / resilient)

Tokens

:root {
  --color-primary: #020532;
  --color-secondary: #091652;
  --color-accent: #C47A3D;
  --color-bg: #FEF9F1;
  --color-text: #111827;
 
  --color-link: #091652;
  --color-link-hover: #C47A3D;
 
  --gradient-hero: linear-gradient(135deg, #020532 0%, #091652 65%, #C47A3D 130%);
  --button-cta-bg: #C47A3D;
  --button-cta-text: #0B1220; /* contrast ~5.5:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P02 — Navy + Mint Signal (modern / clean / confident)

Tokens

:root {
  --color-primary: #091652;
  --color-secondary: #0D3389;
  --color-accent: #2AF5C8;
  --color-bg: #F8FAFC;
  --color-text: #0F172A;
 
  --color-link: #0D3389;
  --color-link-hover: #2AF5C8;
 
  --gradient-hero: linear-gradient(135deg, #091652 0%, #0D3389 65%, #2AF5C8 130%);
  --button-cta-bg: #2AF5C8;
  --button-cta-text: #0B1220; /* contrast ~13.4:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P03 — Navy + Safety Orange (ops / raw / urgent-when-needed)

Tokens

:root {
  --color-primary: #020532;
  --color-secondary: #374273;
  --color-accent: #FF6A2A;
  --color-bg: #F6F2EA;
  --color-text: #111827;
 
  --color-link: #374273;
  --color-link-hover: #FF6A2A;
 
  --gradient-hero: linear-gradient(135deg, #020532 0%, #374273 65%, #FF6A2A 130%);
  --button-cta-bg: #FF6A2A;
  --button-cta-text: #0B1220; /* contrast ~6.6:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P04 — Ink + Cyan (Light) (cyber / crisp / not cheesy)

Tokens

:root {
  --color-primary: #0B1020;
  --color-secondary: #143B6B;
  --color-accent: #22D3EE;
  --color-bg: #F6FBFF;
  --color-text: #0F172A;
 
  --color-link: #143B6B;
  --color-link-hover: #22D3EE;
 
  --gradient-hero: linear-gradient(135deg, #0B1020 0%, #143B6B 65%, #22D3EE 130%);
  --button-cta-bg: #22D3EE;
  --button-cta-text: #0B1220; /* contrast ~10.4:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P05 — Navy + Brushed Gold (executive / premium / steady)

Tokens

:root {
  --color-primary: #0A2540;
  --color-secondary: #1F3A5F;
  --color-accent: #D4AF37;
  --color-bg: #FBF6EF;
  --color-text: #1C1917;
 
  --color-link: #1F3A5F;
  --color-link-hover: #D4AF37;
 
  --gradient-hero: linear-gradient(135deg, #0A2540 0%, #1F3A5F 65%, #D4AF37 130%);
  --button-cta-bg: #D4AF37;
  --button-cta-text: #0B1220; /* contrast ~8.9:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P06 — Navy + Rust + Bone (authentic / grounded / tactile)

Tokens

:root {
  --color-primary: #0B1020;
  --color-secondary: #334155;
  --color-accent: #B45309;
  --color-bg: #FDF6EC;
  --color-text: #0F172A;
 
  --color-link: #334155;
  --color-link-hover: #B45309;
 
  --gradient-hero: linear-gradient(135deg, #0B1020 0%, #334155 65%, #B45309 130%);
  --button-cta-bg: #B45309;
  --button-cta-text: #FFFFFF; /* contrast ~5.0:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P07 — Ink + Cyan (Dark Mode) (serious / technical / high contrast)

Tokens

:root {
  --color-primary: #0B1020;
  --color-secondary: #143B6B;
  --color-accent: #22D3EE;
  --color-bg: #070A12;
  --color-text: #E5E7EB;
 
  --color-link: #22D3EE;
  --color-link-hover: #22D3EE;
 
  --gradient-hero: linear-gradient(135deg, #0B1020 0%, #143B6B 65%, #22D3EE 130%);
  --button-cta-bg: #22D3EE;
  --button-cta-text: #0B1220; /* contrast ~10.4:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P08 — Graphite + Lime Signal (Dark) (ops-ready / energetic but controlled)

Tokens

:root {
  --color-primary: #0F172A;
  --color-secondary: #334155;
  --color-accent: #A3E635;
  --color-bg: #0B1220;
  --color-text: #F8FAFC;
 
  --color-link: #A3E635;
  --color-link-hover: #A3E635;
 
  --gradient-hero: linear-gradient(135deg, #0F172A 0%, #334155 65%, #A3E635 130%);
  --button-cta-bg: #A3E635;
  --button-cta-text: #0B1220; /* contrast ~12.4:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P09 — Black + Burnt Orange (Dark) (industrial / decisive / punchy CTAs)

Tokens

:root {
  --color-primary: #0B0F14;
  --color-secondary: #2B3440;
  --color-accent: #F97316;
  --color-bg: #0B0F14;
  --color-text: #F9FAFB;
 
  --color-link: #F97316;
  --color-link-hover: #F97316;
 
  --gradient-hero: linear-gradient(135deg, #0B0F14 0%, #2B3440 65%, #F97316 130%);
  --button-cta-bg: #F97316;
  --button-cta-text: #0B1220; /* contrast ~6.7:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P10 — Deep Teal + Mint (Dark) (calm power / unique / modern)

Tokens

:root {
  --color-primary: #062A2B;
  --color-secondary: #0E6B6F;
  --color-accent: #2AF5C8;
  --color-bg: #031313;
  --color-text: #E6FFFB;
 
  --color-link: #2AF5C8;
  --color-link-hover: #2AF5C8;
 
  --gradient-hero: linear-gradient(135deg, #062A2B 0%, #0E6B6F 65%, #2AF5C8 130%);
  --button-cta-bg: #2AF5C8;
  --button-cta-text: #0B1220; /* contrast ~13.4:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P11 — Deep Purple + Magenta (Dark) (distinct / brandable / bold)

Tokens

:root {
  --color-primary: #1B1028;
  --color-secondary: #5B2A86;
  --color-accent: #FF4D8D;
  --color-bg: #0D0816;
  --color-text: #F5F3FF;
 
  --color-link: #FF4D8D;
  --color-link-hover: #FF4D8D;
 
  --gradient-hero: linear-gradient(135deg, #1B1028 0%, #5B2A86 65%, #FF4D8D 130%);
  --button-cta-bg: #FF4D8D;
  --button-cta-text: #0B1220; /* contrast ~6.0:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P12 — Midnight + Rose Alert (Dark) (security-forward / sober / sharp alerts)

Tokens

:root {
  --color-primary: #0B1020;
  --color-secondary: #1F2937;
  --color-accent: #E11D48;
  --color-bg: #05070E;
  --color-text: #F8FAFC;
 
  --color-link: #E11D48;
  --color-link-hover: #E11D48;
 
  --gradient-hero: linear-gradient(135deg, #0B1020 0%, #1F2937 65%, #E11D48 130%);
  --button-cta-bg: #E11D48;
  --button-cta-text: #FFFFFF; /* contrast ~4.7:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P13 — Espresso + Gold + Cream (warm premium / consulting / human)

Tokens

:root {
  --color-primary: #2B1D14;
  --color-secondary: #6B4F3A;
  --color-accent: #D4AF37;
  --color-bg: #FBF6EF;
  --color-text: #1C1917;
 
  --color-link: #6B4F3A;
  --color-link-hover: #D4AF37;
 
  --gradient-hero: linear-gradient(135deg, #2B1D14 0%, #6B4F3A 65%, #D4AF37 130%);
  --button-cta-bg: #D4AF37;
  --button-cta-text: #0B1220; /* contrast ~8.9:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P14 — Forest + Sky (trust / calm / outdoorsy edge)

Tokens

:root {
  --color-primary: #0E2A1F;
  --color-secondary: #1E6F5C;
  --color-accent: #2D9CDB;
  --color-bg: #F3F7F5;
  --color-text: #0F172A;
 
  --color-link: #1E6F5C;
  --color-link-hover: #2D9CDB;
 
  --gradient-hero: linear-gradient(135deg, #0E2A1F 0%, #1E6F5C 65%, #2D9CDB 130%);
  --button-cta-bg: #2D9CDB;
  --button-cta-text: #0B1220; /* contrast ~6.1:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P15 — Charcoal + Sand + Saffron (clean / modern / friendly)

Tokens

:root {
  --color-primary: #111827;
  --color-secondary: #4B5563;
  --color-accent: #F4B740;
  --color-bg: #FFF7ED;
  --color-text: #0B1220;
 
  --color-link: #4B5563;
  --color-link-hover: #F4B740;
 
  --gradient-hero: linear-gradient(135deg, #111827 0%, #4B5563 65%, #F4B740 130%);
  --button-cta-bg: #F4B740;
  --button-cta-text: #0B1220; /* contrast ~10.4:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P16 — Slate + Coral (approachable / memorable / contemporary)

Tokens

:root {
  --color-primary: #1F2937;
  --color-secondary: #0E7490;
  --color-accent: #FF6B6B;
  --color-bg: #F6FBFF;
  --color-text: #0F172A;
 
  --color-link: #0E7490;
  --color-link-hover: #FF6B6B;
 
  --gradient-hero: linear-gradient(135deg, #1F2937 0%, #0E7490 65%, #FF6B6B 130%);
  --button-cta-bg: #FF6B6B;
  --button-cta-text: #0B1220; /* contrast ~6.7:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P17 — Stone + Olive + Clay (earthy / authentic / non-corporate)

Tokens

:root {
  --color-primary: #1F2937;
  --color-secondary: #556B2F;
  --color-accent: #C2410C;
  --color-bg: #F7F4EF;
  --color-text: #111827;
 
  --color-link: #556B2F;
  --color-link-hover: #C2410C;
 
  --gradient-hero: linear-gradient(135deg, #1F2937 0%, #556B2F 65%, #C2410C 130%);
  --button-cta-bg: #C2410C;
  --button-cta-text: #FFFFFF; /* contrast ~5.2:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P18 — Steel + Royal Purple (enterprise / distinct / confident)

Tokens

:root {
  --color-primary: #1F2937;
  --color-secondary: #4B5563;
  --color-accent: #6D28D9;
  --color-bg: #F9FAFB;
  --color-text: #111827;
 
  --color-link: #4B5563;
  --color-link-hover: #6D28D9;
 
  --gradient-hero: linear-gradient(135deg, #1F2937 0%, #4B5563 65%, #6D28D9 130%);
  --button-cta-bg: #6D28D9;
  --button-cta-text: #FFFFFF; /* contrast ~7.1:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P19 — Solanasis Variant (Navy + Violet) (brand-forward / sharp / modern)

Tokens

:root {
  --color-primary: #091652;
  --color-secondary: #1748A0;
  --color-accent: #7C3AED;
  --color-bg: #F8FAFF;
  --color-text: #0F172A;
 
  --color-link: #1748A0;
  --color-link-hover: #7C3AED;
 
  --gradient-hero: linear-gradient(135deg, #091652 0%, #1748A0 65%, #7C3AED 130%);
  --button-cta-bg: #7C3AED;
  --button-cta-text: #FFFFFF; /* contrast ~5.7:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability
P20 — Ink + Amber Signal (ops / high-clarity / warm highlights)

Tokens

:root {
  --color-primary: #0B1020;
  --color-secondary: #374273;
  --color-accent: #F59E0B;
  --color-bg: #F8FAFC;
  --color-text: #0F172A;
 
  --color-link: #374273;
  --color-link-hover: #F59E0B;
 
  --gradient-hero: linear-gradient(135deg, #0B1020 0%, #374273 65%, #F59E0B 130%);
  --button-cta-bg: #F59E0B;
  --button-cta-text: #0B1220; /* contrast ~8.7:1 */
}

Where it shines

  • Primary: headers, top nav, section dividers
  • Secondary: links, subheadings, UI chrome (borders, cards)
  • Accent: primary CTA, badges, “important” callouts
  • Background: page base / light sections
  • Text: body + long-form readability

6) A simple scoring worksheet (paste & fill)

Give each palette a score 1–5 for each category.
Then pick the top 2 and test them on a hero section + CTA button + one text-heavy section.

Palette IDTrust / AuthorityDistinctiveness“Raw / Authentic”ReadabilityWorks for Deck/PDFNotes
P__
P__
P__

7) Practical application map (so it doesn’t get messy)

Primary

  • Nav background, section titles, heavy dividers, dark hero overlays

Secondary

  • Links, icon fills, card borders, subtle section headers, hover states

Accent

  • Primary CTA button, badges, “important” callouts, underline highlights

Background

  • Page base + light sections

Text

  • Long-form body text

Raw/pro trick: use subtle texture or line-art overlays (like your triangle motif) in 10–20% opacity using Secondary or a pale neutral.


If you tell me your preferred lane:

Quiet Authority vs Ops-Forward vs Modern Technical vs Human Premium,
I’ll narrow this to a final 2–3, and give you the exact:

  • button states (hover/active/disabled)
  • link colors
  • card/border neutrals
  • alert colors (success/warn/error) that don’t clash