This palette translates the image’s cool deep shadows and warm skin-toned highlights into a balanced system that feels intimate, modern, and quietly premium. The contrast between inky blue-greens, soft parchment neutrals, and a restrained teal accent creates a recognizable brand presence that works well across identity and UI.
This palette translates the image’s cool deep shadows and warm skin-toned highlights into a balanced system that feels intimate, modern, and quietly premium. The contrast between inky blue-greens, soft parchment neutrals, and a restrained teal accent creates a recognizable brand presence that works well across identity and UI.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a dark blue-green anchor, a softened sea-glass tone, and a warm beige highlight to mirror the image’s contrast between shadow and skin. Together they create a distinctive palette that feels grounded, tactile, and refined without becoming overly themed.
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 combine a dark blue-green anchor, a softened sea-glass tone, and a warm beige highlight to mirror the image’s contrast between shadow and skin. Together they create a distinctive palette that feels grounded, tactile, and refined without becoming overly themed.
RolesLogo, Btn Primary Bg
This deep blue-green gives the brand a confident anchor and carries the strongest visual weight in the system.
#17384B23, 56, 75202, 53, 1969, 25, 0, 71RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text
This softened teal adds motion and accessibility while staying calm enough to support the darker anchor color.
#5C8A8C92, 138, 140183, 21, 4534, 1, 0, 45RolesHeadline
This warm neutralized beige echoes the skin-toned highlight from the image and brings a human, tactile softness to the palette.
#D8C6AD216, 198, 17335, 36, 760, 8, 20, 15The support colors extend the palette with restrained depth and cool luminosity so the core tones stay expressive without losing cohesion. They add usable variation for UI states and secondary surfaces while remaining visually subordinate to the main colors.
RolesIcon, Border
This cool gray-blue bridges the dark anchor and the lighter accent, making interface details feel polished rather than stark.
#6F7F88111, 127, 136202, 10, 4818, 7, 0, 47RolesDivider, Outline
This subdued misty green softens separation lines and supports the palette with a light, quiet counterpoint.
#9FB2AE159, 178, 174167, 11, 6611, 0, 2, 30Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4EFE6244, 239, 23039, 39, 930, 2, 6, 4RolesBg Dark, Text
#11182017, 24, 32212, 31, 1047, 25, 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-deep-harbor: #17384B;
--color-muted-tide: #5C8A8C;
--color-soft-sand: #D8C6AD;
--color-steel-mist: #6F7F88;
--color-sea-foam-veil: #9FB2AE;
--color-pure-white: #FFFFFF;
--color-linen-whisper: #F4EFE6;
--color-ink-depth: #111820;
}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: #17384B;
--role-btn-primary-bg: #17384B;
--role-link: #5C8A8C;
--role-btn-secondary-bg: #5C8A8C;
--role-btn-outlined-border: #5C8A8C;
--role-btn-outlined-text: #5C8A8C;
--role-headline: #D8C6AD;
--role-icon: #6F7F88;
--role-border: #6F7F88;
--role-divider: #9FB2AE;
--role-outline: #9FB2AE;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111820;
--role-text: #111820;
}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.{
"deep-harbor": "#17384B",
"muted-tide": "#5C8A8C",
"soft-sand": "#D8C6AD",
"steel-mist": "#6F7F88",
"sea-foam-veil": "#9FB2AE",
"pure-white": "#FFFFFF",
"linen-whisper": "#F4EFE6",
"ink-depth": "#111820"
}