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).
Banner (dominant)
-
#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:
- Quiet Authority: feels premium, calm, expensive (best for security/resilience trust)
- Ops-Forward: feels gritty/real, “we do the work” (best for resilience + incident reality)
- Modern Technical: feels cyber/infra, crisp (best for AI/engineering credibility)
- 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”)
4) Palette Gallery (20 options)
Use the table to scan quickly. The CTA column shows a good default button pairing.
| ID | Palette (vibe) | Primary | Secondary | Accent | Background | Text | CTA (bg/text) | Text/BG contrast |
|---|---|---|---|---|---|---|---|---|
| P01 | Solanasis Core (Navy + Parchment + Copper) quiet authority / premium / resilient | #020532 | #091652 | #C47A3D | #FEF9F1 | #111827 | #C47A3D / #0B1220(~5.5:1) | ~16.9:1 |
| P02 | Navy + Mint Signal modern / clean / confident | #091652 | #0D3389 | #2AF5C8 | #F8FAFC | #0F172A | #2AF5C8 / #0B1220(~13.4:1) | ~17.1:1 |
| P03 | Navy + Safety Orange ops / raw / urgent-when-needed | #020532 | #374273 | #FF6A2A | #F6F2EA | #111827 | #FF6A2A / #0B1220(~6.6:1) | ~15.9:1 |
| P04 | Ink + Cyan (Light) cyber / crisp / not cheesy | #0B1020 | #143B6B | #22D3EE | #F6FBFF | #0F172A | #22D3EE / #0B1220(~10.4:1) | ~17.1:1 |
| P05 | Navy + Brushed Gold executive / premium / steady | #0A2540 | #1F3A5F | #D4AF37 | #FBF6EF | #1C1917 | #D4AF37 / #0B1220(~8.9:1) | ~16.3:1 |
| P06 | Navy + Rust + Bone authentic / grounded / tactile | #0B1020 | #334155 | #B45309 | #FDF6EC | #0F172A | #B45309 / #FFFFFF(~5.0:1) | ~16.6:1 |
| P07 | Ink + Cyan (Dark Mode) serious / technical / high contrast | #0B1020 | #143B6B | #22D3EE | #070A12 | #E5E7EB | #22D3EE / #0B1220(~10.4:1) | ~16.0:1 |
| P08 | Graphite + Lime Signal (Dark) ops-ready / energetic but controlled | #0F172A | #334155 | #A3E635 | #0B1220 | #F8FAFC | #A3E635 / #0B1220(~12.4:1) | ~17.9:1 |
| P09 | Black + Burnt Orange (Dark) industrial / decisive / punchy CTAs | #0B0F14 | #2B3440 | #F97316 | #0B0F14 | #F9FAFB | #F97316 / #0B1220(~6.7:1) | ~18.4:1 |
| P10 | Deep Teal + Mint (Dark) calm power / unique / modern | #062A2B | #0E6B6F | #2AF5C8 | #031313 | #E6FFFB | #2AF5C8 / #0B1220(~13.4:1) | ~18.1:1 |
| P11 | Deep Purple + Magenta (Dark) distinct / brandable / bold | #1B1028 | #5B2A86 | #FF4D8D | #0D0816 | #F5F3FF | #FF4D8D / #0B1220(~6.0:1) | ~18.0:1 |
| P12 | Midnight + Rose Alert (Dark) security-forward / sober / sharp alerts | #0B1020 | #1F2937 | #E11D48 | #05070E | #F8FAFC | #E11D48 / #FFFFFF(~4.7:1) | ~19.2:1 |
| P13 | Espresso + Gold + Cream warm premium / consulting / human | #2B1D14 | #6B4F3A | #D4AF37 | #FBF6EF | #1C1917 | #D4AF37 / #0B1220(~8.9:1) | ~16.3:1 |
| P14 | Forest + Sky trust / calm / outdoorsy edge | #0E2A1F | #1E6F5C | #2D9CDB | #F3F7F5 | #0F172A | #2D9CDB / #0B1220(~6.1:1) | ~16.5:1 |
| P15 | Charcoal + Sand + Saffron clean / modern / friendly | #111827 | #4B5563 | #F4B740 | #FFF7ED | #0B1220 | #F4B740 / #0B1220(~10.4:1) | ~17.6:1 |
| P16 | Slate + Coral approachable / memorable / contemporary | #1F2937 | #0E7490 | #FF6B6B | #F6FBFF | #0F172A | #FF6B6B / #0B1220(~6.7:1) | ~17.1:1 |
| P17 | Stone + Olive + Clay earthy / authentic / non-corporate | #1F2937 | #556B2F | #C2410C | #F7F4EF | #111827 | #C2410C / #FFFFFF(~5.2:1) | ~16.2:1 |
| P18 | Steel + Royal Purple enterprise / distinct / confident | #1F2937 | #4B5563 | #6D28D9 | #F9FAFB | #111827 | #6D28D9 / #FFFFFF(~7.1:1) | ~17.0:1 |
| P19 | Solanasis Variant (Navy + Violet) brand-forward / sharp / modern | #091652 | #1748A0 | #7C3AED | #F8FAFF | #0F172A | #7C3AED / #FFFFFF(~5.7:1) | ~17.1:1 |
| P20 | Ink + 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 ID | Trust / Authority | Distinctiveness | “Raw / Authentic” | Readability | Works for Deck/PDF | Notes |
|---|---|---|---|---|---|---|
| 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