Steel Blue#3F5B71
Muted Gold#D9C581
Cadet Blue#5B7991
Ashen Beige#A29D7F
Palette direction

Steel Blue Yellow Color Palette

This palette combines sophisticated blues and muted yellows to create a balanced, professional identity. The main colors are distinct and work together with subtle support tones that enhance usability without overpowering the core hues. The neutrals anchor the design for clear readability and versatile backgrounds.

ComplementaryEducationblueyelloweducationprofessional
palette-preview.example
Education color direction

Steel Blue Yellow Color Palette

This palette combines sophisticated blues and muted yellows to create a balanced, professional identity. The main colors are distinct and work together with subtle support tones that enhance usability without overpowering the core hues. The neutrals anchor the design for clear readability and versatile backgrounds.

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 Charcoal #1A1A1Aon Muted Gold #D9C58110.2:1 Excellent
Logo White #FFFFFFon Steel Blue #3F5B717.1:1 Excellent
Logo Charcoal #1A1A1Aon White #FFFFFF17.4:1 Excellent
Logo Charcoal #1A1A1Aon Ashen Beige #A29D7F6.4:1 Strong
Icon color
BackgroundSteel Blue#3F5B71TextWhite#FFFFFF
Primary Button7.13:1
AAA

Best for the main action users should notice first.

BackgroundMuted Gold#D9C581TextCharcoal#1A1A1A
Secondary Button10.16:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSteel Blue#3F5B71
Outlined Button7.13:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextSteel Blue#3F5B71
Text Button7.13:1
AAA

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

Palette composition7 colorsComplementary color relationship
9:41Steel Blue Yellow Color Palette Color role balance
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.

CSteel Blue Yellow Color PaletteEducation brand direction ColorFly.design
Strategic palette preview

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.Steel Blue #3F5B71
HeadlineUsed for main titles and key messages.Muted Gold #D9C581
LinkUsed for links and interactive text.Steel Blue #3F5B71

Buttons

Primary Button
BackgroundSteel Blue #3F5B71
TextWhite #FFFFFF
Secondary Button
BackgroundMuted Gold #D9C581
TextCharcoal #1A1A1A
Outlined Button
BackgroundSteel Blue #3F5B71
TextSteel Blue #3F5B71

Interface

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

Palette Colors

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

Main (Brand) Colors

The palette features complementary steel blue and muted yellow main colors, creating a harmonious yet dynamic contrast that supports brand recognition.

PrimarySteel Blue

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

Steel Blue provides a stable and trustworthy foundation, evoking professionalism and calm confidence.

HEX#3F5B71
RGB63, 91, 113
HSL206, 28, 35
CMYK44, 19, 0, 56
SecondaryMuted Gold

RolesBtn Secondary Bg, Headline

Muted Gold adds warmth and approachability, balancing the cooler primary blue with a friendly, inviting tone.

HEX#D9C581
RGB217, 197, 129
HSL46, 54, 68
CMYK0, 9, 41, 15

Support Colors

Supporting hues are softer blues and contrasted beige tones that extend the palette for accents and interface elements, maintaining cohesion and subtlety without competition.

Cadet Blue

RolesIcon, Border, Divider, Outline

Cadet Blue complements Steel Blue as a lighter accent, providing depth and texture in interface components.

HEX#5B7991
RGB91, 121, 145
HSL207, 23, 46
CMYK37, 17, 0, 43
Ashen Beige

Ashen Beige supports Muted Gold with a grounded neutral tone, offering balance and reducing visual strain.

HEX#A29D7F
RGB162, 157, 127
HSL51, 16, 57
CMYK0, 3, 22, 36

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Gray
HEX#F4F4F4
RGB244, 244, 244
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesBg Dark, Text, Btn Secondary Text

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-steel-blue: #3F5B71;
  --color-muted-gold: #D9C581;
  --color-cadet-blue: #5B7991;
  --color-ashen-beige: #A29D7F;
  --color-white: #FFFFFF;
  --color-light-gray: #F4F4F4;
  --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: #3F5B71;
  --role-link: #3F5B71;
  --role-btn-primary-bg: #3F5B71;
  --role-btn-outlined-border: #3F5B71;
  --role-btn-outlined-text: #3F5B71;
  --role-btn-secondary-bg: #D9C581;
  --role-headline: #D9C581;
  --role-icon: #5B7991;
  --role-border: #5B7991;
  --role-divider: #5B7991;
  --role-outline: #5B7991;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #1A1A1A;
  --role-text: #1A1A1A;
  --role-btn-secondary-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.
{
    "steel-blue": "#3F5B71",
    "muted-gold": "#D9C581",
    "cadet-blue": "#5B7991",
    "ashen-beige": "#A29D7F",
    "white": "#FFFFFF",
    "light-gray": "#F4F4F4",
    "charcoal": "#1A1A1A"
}
Press Space to load new palette