Crimson#DC143C
Navy#003366
Gold#D4AF37
Slate Blue#6688AA
Cool Gray#8A8F98
Palette direction

Crimson Navy Gold Color Palette

This palette combines bold and sophisticated colors to embody a premium, modern academic brand with a revolutionary spirit for 2026. The main colors work together in a triadic scheme creating energetic yet balanced contrast that ensures strong brand recognition. Support colors add understated elegance and subtle visual depth that complement and stabilize the vibrant main colors without overwhelming them. Three distinct neutrals provide clarity and accessibility across backgrounds, text, and UI elements, ensuring readability and refined presentation.

Split ComplementaryEducationacademicpremiummodernrevolutionary
palette-preview.example
Education color direction

Crimson Navy Gold Color Palette

This palette combines bold and sophisticated colors to embody a premium, modern academic brand with a revolutionary spirit for 2026. The main colors work together in a triadic scheme creating energetic yet balanced contrast that ensures strong brand recognition. Support colors add understated elegance and subtle visual depth that complement and stabilize the vibrant main colors without overwhelming them. Three distinct neutrals provide clarity and accessibility across backgrounds, text, and UI elements, ensuring readability and refined presentation.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo White #FFFFFFon Navy #00336612.6:1 Excellent
Logo Charcoal #1A1A1Aon Gold #D4AF378.3:1 Excellent
Logo White #FFFFFFon Crimson #DC143C5.0:1 Strong
Logo Charcoal #1A1A1Aon White #FFFFFF17.4:1 Excellent
Icon color
BackgroundCrimson#DC143CTextWhite#FFFFFF
Primary Button4.99:1
AA

Best for the main action users should notice first.

BackgroundNavy#003366TextWhite#FFFFFF
Secondary Button12.61:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCrimson#DC143C
Outlined Button4.99:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCrimson#DC143C
Text Button4.99:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsSplit Complementary color relationship
9:41Crimson Navy Gold Color Palette Color role balance
Split Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCrimson Navy Gold Color PaletteEducation brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The triadic harmony of Crimson, Navy, and Gold creates a vibrant yet sophisticated foundation, reinforcing the brand’s premium and revolutionary character with distinct and memorable colors.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Crimson #DC143C
HeadlineUsed for main titles and key messages.Navy #003366
LinkUsed for links and interactive text.Crimson #DC143C

Buttons

Primary Button
BackgroundCrimson #DC143C
TextWhite #FFFFFF
Secondary Button
BackgroundNavy #003366
TextWhite #FFFFFF
Outlined Button
BackgroundCrimson #DC143C
TextCrimson #DC143C

Interface

TextDefault readable body text.Charcoal #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F5F5F5
IconSmall interface icons and marks.Slate Blue #6688AA
BorderCards, inputs, and component borders.Slate Blue #6688AA
DividerSubtle separators between content.Slate Blue #6688AA
OutlineFocus rings and emphasis outlines.Slate Blue #6688AA

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The triadic harmony of Crimson, Navy, and Gold creates a vibrant yet sophisticated foundation, reinforcing the brand’s premium and revolutionary character with distinct and memorable colors.

PrimaryCrimson

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Crimson adds energetic passion and intensity that conveys the revolutionary and bold spirit of the brand.

HEX#DC143C
RGB220, 20, 60
HSL348, 83, 47
CMYK0, 91, 73, 14
SecondaryNavy

RolesHeadline, Btn Secondary Bg

Navy offers a stable, trustworthy anchor that communicates professionalism and premium academic tradition.

HEX#003366
RGB0, 51, 102
HSL210, 100, 20
CMYK100, 50, 0, 60
TertiaryGold

Gold injects a sense of luxury and success, elevating the brand’s prestigious and modern image.

HEX#D4AF37
RGB212, 175, 55
HSL46, 65, 52
CMYK0, 17, 74, 17

Support Colors

Support colors extend the palette through muted blues and cool grays that reinforce the main colors’ sophistication while providing balance and visual relief.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue softly balances the strong main colors with a cooler tone that maintains clarity and refinement.

HEX#6688AA
RGB102, 136, 170
HSL210, 29, 53
CMYK40, 20, 0, 33
Cool Gray

Cool Gray offers understated neutrality that complements the dark navy headline and stabilizes the visual hierarchy without distraction.

HEX#8A8F98
RGB138, 143, 152
HSL219, 6, 57
CMYK9, 6, 0, 40

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-crimson: #DC143C;
  --color-navy: #003366;
  --color-gold: #D4AF37;
  --color-slate-blue: #6688AA;
  --color-cool-gray: #8A8F98;
  --color-white: #FFFFFF;
  --color-ivory: #F5F5F5;
  --color-charcoal: #1A1A1A;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #DC143C;
  --role-link: #DC143C;
  --role-btn-primary-bg: #DC143C;
  --role-btn-outlined-border: #DC143C;
  --role-btn-outlined-text: #DC143C;
  --role-headline: #003366;
  --role-btn-secondary-bg: #003366;
  --role-icon: #6688AA;
  --role-border: #6688AA;
  --role-divider: #6688AA;
  --role-outline: #6688AA;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --role-text: #1A1A1A;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "crimson": "#DC143C",
    "navy": "#003366",
    "gold": "#D4AF37",
    "slate-blue": "#6688AA",
    "cool-gray": "#8A8F98",
    "white": "#FFFFFF",
    "ivory": "#F5F5F5",
    "charcoal": "#1A1A1A"
}
Press Space to load new palette