This palette is inspired by the deep serene blue and clean white from the image, combined with muted warm browns and cool grays to create a balanced and professional brand system. The main blues establish trust and calm, supported by subtle earth tones and neutrals to maintain clarity and approachability.
This palette is inspired by the deep serene blue and clean white from the image, combined with muted warm browns and cool grays to create a balanced and professional brand system. The main blues establish trust and calm, supported by subtle earth tones and neutrals to maintain clarity and approachability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The three main colors combine a deep blue with a muted warm brown and an off-white, creating a calm, trustworthy, and balanced visual hierarchy distinct from common palettes.
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 three main colors combine a deep blue with a muted warm brown and an off-white, creating a calm, trustworthy, and balanced visual hierarchy distinct from common palettes.
RolesLogo, Link, Btn Primary Bg
Steel Blue conveys dependability and calm, making it ideal for logos and primary interactive elements.
#2E598446, 89, 132210, 48, 3565, 33, 0, 48RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Chestnut provides a warm, earthy accent that balances the cool blue with friendly approachability.
#A67B5B166, 123, 9126, 30, 500, 26, 45, 35RolesHeadline
Alabaster adds lightness and clarity to headlines, ensuring legibility and freshness in the palette.
#F5F4EE245, 244, 23851, 26, 950, 0, 3, 4Support colors extend the palette with cooler and warmer neutrals that enhance usability and subtle visual separation without competing with the main colors.
RolesIcon, Border, Divider, Outline
Granite Gray supports the palette with neutral contrast for borders and icons, complementing both blue and brown.
#8C8C8C140, 140, 1400, 0, 550, 0, 0, 45RolesBg Light
Sandstone offers a warm near-white background color that is softer than pure white, promoting comfort and readability.
#C2B8A3194, 184, 16341, 20, 700, 5, 16, 24Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F4EE245, 244, 23851, 26, 950, 0, 3, 4RolesText
#2F2F2F47, 47, 470, 0, 180, 0, 0, 82Copy 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: #2E5984;
--color-chestnut: #A67B5B;
--color-alabaster: #F5F4EE;
--color-granite-gray: #8C8C8C;
--color-sandstone: #C2B8A3;
--color-pure-white: #FFFFFF;
--color-charcoal: #2F2F2F;
}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: #2E5984;
--role-link: #2E5984;
--role-btn-primary-bg: #2E5984;
--role-btn-secondary-bg: #A67B5B;
--role-btn-outlined-border: #A67B5B;
--role-btn-outlined-text: #A67B5B;
--role-headline: #F5F4EE;
--role-icon: #8C8C8C;
--role-border: #8C8C8C;
--role-divider: #8C8C8C;
--role-outline: #8C8C8C;
--role-bg-light: #C2B8A3;
--role-bg-dark: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-text: #2F2F2F;
}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": "#2E5984",
"chestnut": "#A67B5B",
"alabaster": "#F5F4EE",
"granite-gray": "#8C8C8C",
"sandstone": "#C2B8A3",
"pure-white": "#FFFFFF",
"charcoal": "#2F2F2F"
}