This palette pairs a warm salmon coral with a deep midnight teal to create a vivid, modern contrast that feels both expressive and grounded. The result is a memorable system for brands that want energy, polish, and a slightly editorial edge.
This palette pairs a warm salmon coral with a deep midnight teal to create a vivid, modern contrast that feels both expressive and grounded. The result is a memorable system for brands that want energy, polish, and a slightly editorial edge.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a clear warm-versus-cool relationship that is immediately recognizable and easy to build into a brand system. Salmon brings approachable warmth while midnight green adds depth and restraint, giving the palette strong contrast without feeling harsh.
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 create a clear warm-versus-cool relationship that is immediately recognizable and easy to build into a brand system. Salmon brings approachable warmth while midnight green adds depth and restraint, giving the palette strong contrast without feeling harsh.
RolesLogo, Btn Primary Bg
This warm coral drives recognition and gives the brand a lively, inviting first impression.
#F57F6A245, 127, 1069, 87, 690, 48, 57, 4RolesLink, Btn Secondary Bg, Headline
This deep teal adds seriousness and stability, making the palette feel composed and trustworthy.
#0D5B5A13, 91, 90179, 75, 2086, 0, 1, 64The support colors extend the salmon-and-teal relationship with muted, usable accents that stay subordinate to the main contrast. They add structure and interface clarity without competing for attention.
RolesIcon, Border
This subdued mauve-gray softens the palette and works well for functional UI details.
#6E6A78110, 106, 120257, 6, 448, 12, 0, 53RolesDivider, Outline, Btn Outlined Border, Btn Outlined Text
This cooler teal bridges the main colors and keeps outlined elements aligned with the core brand mood.
#2D7C7A45, 124, 122178, 47, 3364, 0, 2, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4EFE8244, 239, 23235, 35, 930, 2, 5, 4RolesBg Dark, Text, Btn Primary Text
#12121218, 18, 180, 0, 70, 0, 0, 93Copy 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-salmon-coral: #F57F6A;
--color-midnight-green: #0D5B5A;
--color-ash-mauve: #6E6A78;
--color-tidal-teal: #2D7C7A;
--color-pure-white: #FFFFFF;
--color-warm-ivory: #F4EFE8;
--color-ink-black: #121212;
}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: #F57F6A;
--role-btn-primary-bg: #F57F6A;
--role-link: #0D5B5A;
--role-btn-secondary-bg: #0D5B5A;
--role-headline: #0D5B5A;
--role-icon: #6E6A78;
--role-border: #6E6A78;
--role-divider: #2D7C7A;
--role-outline: #2D7C7A;
--role-btn-outlined-border: #2D7C7A;
--role-btn-outlined-text: #2D7C7A;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #121212;
--role-text: #121212;
--role-btn-primary-text: #121212;
}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.{
"salmon-coral": "#F57F6A",
"midnight-green": "#0D5B5A",
"ash-mauve": "#6E6A78",
"tidal-teal": "#2D7C7A",
"pure-white": "#FFFFFF",
"warm-ivory": "#F4EFE8",
"ink-black": "#121212"
}