This palette balances a strong, dependable navy with a vibrant purple and a soothing mint green, complemented by soft neutrals for text and backgrounds, creating a modern and professional branding system.
This palette balances a strong, dependable navy with a vibrant purple and a soothing mint green, complemented by soft neutrals for text and backgrounds, creating a modern and professional branding system.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a split complementary scheme combining deep navy, vibrant purple, and fresh mint, offering both contrast and harmony for a distinctive tech branding palette.
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 main colors form a split complementary scheme combining deep navy, vibrant purple, and fresh mint, offering both contrast and harmony for a distinctive tech branding palette.
RolesLogo, Btn Primary Bg, Btn Outlined Border, Link
Navy conveys trust and stability, making it ideal for the core brand identity and primary interactive elements.
#151F4521, 31, 69228, 53, 1870, 55, 0, 73RolesBtn Secondary Bg, Btn Outlined Text, Headline
Lavender Purple adds creativity and a modern edge, perfect for secondary buttons and headlines to stand out.
#8B72E6139, 114, 230253, 70, 6740, 50, 0, 10Mint provides a fresh, calm accent that contrasts well with purple, ideal for button text opposing vibrant backgrounds.
#66D7CB102, 215, 203174, 59, 6253, 0, 6, 16Support colors extend the palette with soft blue-gray and a muted aqua to subtly enhance icons, borders, and dividers without competing with main hues.
RolesIcon, Border, Divider, Outline
Blue Gray complements navy by providing depth for structural UI elements while being subdued enough to avoid visual competition.
#4B627C75, 98, 124212, 25, 3940, 21, 0, 51Muted Aqua balances the vibrancy of mint, usable in supporting graphics or subtle UI accents, maintaining harmony.
#57B9B087, 185, 176174, 41, 5353, 0, 5, 27Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#E6E6E6230, 230, 2300, 0, 900, 0, 0, 10RolesText, 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-navy: #151F45;
--color-lavender-purple: #8B72E6;
--color-mint: #66D7CB;
--color-blue-gray: #4B627C;
--color-muted-aqua: #57B9B0;
--color-white: #FFFFFF;
--color-light-gray: #E6E6E6;
--color-rich-black: #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: #151F45;
--role-btn-primary-bg: #151F45;
--role-btn-outlined-border: #151F45;
--role-link: #151F45;
--role-btn-secondary-bg: #8B72E6;
--role-btn-outlined-text: #8B72E6;
--role-headline: #8B72E6;
--role-icon: #4B627C;
--role-border: #4B627C;
--role-divider: #4B627C;
--role-outline: #4B627C;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #E6E6E6;
--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.{
"navy": "#151F45",
"lavender-purple": "#8B72E6",
"mint": "#66D7CB",
"blue-gray": "#4B627C",
"muted-aqua": "#57B9B0",
"white": "#FFFFFF",
"light-gray": "#E6E6E6",
"rich-black": "#1A1A1A"
}