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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette features complementary steel blue and muted yellow main colors, creating a harmonious yet dynamic contrast that supports brand recognition.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The palette features complementary steel blue and muted yellow main colors, creating a harmonious yet dynamic contrast that supports brand recognition.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Steel Blue provides a stable and trustworthy foundation, evoking professionalism and calm confidence.
#3F5B7163, 91, 113206, 28, 3544, 19, 0, 56RolesBtn Secondary Bg, Headline
Muted Gold adds warmth and approachability, balancing the cooler primary blue with a friendly, inviting tone.
#D9C581217, 197, 12946, 54, 680, 9, 41, 15Supporting hues are softer blues and contrasted beige tones that extend the palette for accents and interface elements, maintaining cohesion and subtlety without competition.
RolesIcon, Border, Divider, Outline
Cadet Blue complements Steel Blue as a lighter accent, providing depth and texture in interface components.
#5B799191, 121, 145207, 23, 4637, 17, 0, 43Ashen Beige supports Muted Gold with a grounded neutral tone, offering balance and reducing visual strain.
#A29D7F162, 157, 12751, 16, 570, 3, 22, 36Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesBg Dark, Text, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}