This harmonious palette combines three main colors in a triadic scheme for vibrant recognition, supported by softer accent hues for versatility, anchored by a set of clear neutrals to ensure readability and accessibility across digital interfaces.
This harmonious palette combines three main colors in a triadic scheme for vibrant recognition, supported by softer accent hues for versatility, anchored by a set of clear neutrals to ensure readability and accessibility across digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a triadic harmony with Coral, Navy, and Sand, providing vibrancy, depth, and warmth for strong 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 main colors form a triadic harmony with Coral, Navy, and Sand, providing vibrancy, depth, and warmth for strong brand recognition.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Coral brings energetic warmth and approachability that captures attention as the brand's focal point.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0RolesHeadline, Btn Secondary Bg
Navy conveys trustworthiness and professionalism, anchoring the palette with depth and clarity.
#0033660, 51, 102210, 100, 20100, 50, 0, 60Sand adds a warm, inviting earth tone that complements the vibrancy of Coral and the depth of Navy.
#D6A77A214, 167, 12229, 53, 660, 22, 43, 16Support colors extend the main palette with softened, low saturation hues that enhance usability and balance without overpowering the primary colors.
RolesIcon, Border, Divider, Outline
Slate Blue provides a muted blue-gray tone that supports Navy with subtle contrast for interface elements.
#A3B9C9163, 185, 201205, 26, 7119, 8, 0, 21Light Taupe complements Sand with a gentle, neutral warmth that balances vibrancy and depth.
#CDB99D205, 185, 15735, 32, 710, 10, 23, 20Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Primary Text
#22222234, 34, 340, 0, 130, 0, 0, 87Copy 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-coral: #FF6F61;
--color-navy: #003366;
--color-sand: #D6A77A;
--color-slate-blue: #A3B9C9;
--color-light-taupe: #CDB99D;
--color-ivory: #FFFFFF;
--color-alabaster: #F5F5F5;
--color-charcoal: #222222;
}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: #FF6F61;
--role-link: #FF6F61;
--role-btn-primary-bg: #FF6F61;
--role-btn-outlined-border: #FF6F61;
--role-btn-outlined-text: #FF6F61;
--role-headline: #003366;
--role-btn-secondary-bg: #003366;
--role-icon: #A3B9C9;
--role-border: #A3B9C9;
--role-divider: #A3B9C9;
--role-outline: #A3B9C9;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #222222;
--role-btn-primary-text: #222222;
}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.{
"coral": "#FF6F61",
"navy": "#003366",
"sand": "#D6A77A",
"slate-blue": "#A3B9C9",
"light-taupe": "#CDB99D",
"ivory": "#FFFFFF",
"alabaster": "#F5F5F5",
"charcoal": "#222222"
}