This palette captures the serene underwater atmosphere with cool aqua and ocean blue main colors, balanced by supportive seafoam and teal accents, and grounded by soft neutrals that echo sandy and shadowy elements. It evokes a fresh, calming aquatic theme suitable for brands connected to freshness, clarity, or water.
This palette captures the serene underwater atmosphere with cool aqua and ocean blue main colors, balanced by supportive seafoam and teal accents, and grounded by soft neutrals that echo sandy and shadowy elements. It evokes a fresh, calming aquatic theme suitable for brands connected to freshness, clarity, or water.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine varying blue and aqua tones evoking depth and freshness of the ocean, creating a harmonious and recognizable aquatic theme.
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 varying blue and aqua tones evoking depth and freshness of the ocean, creating a harmonious and recognizable aquatic theme.
RolesLogo, Link, Btn Primary Bg
Light Sea Green conveys refreshing clarity and vitality, establishing a clean and inviting brand presence.
#3EA9A962, 169, 169180, 46, 4563, 0, 0, 34RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Deep Ocean Blue projects trust and stability with its strong and calming qualities, grounding the palette.
#1F4E5F31, 78, 95196, 51, 2567, 18, 0, 63Teal acts as a sophisticated accent adding depth and balance while maintaining the aquatic harmony.
#005F730, 95, 115190, 100, 23100, 17, 0, 55Support colors add softness and variation with gentle seafoam green and muted blue-gray, reinforcing the aquatic mood without competing.
RolesIcon, Border, Divider, Outline
Seafoam Green complements the main blues with a gentle, calming tone that enhances readability and subtle details.
#93C5C0147, 197, 192174, 30, 6725, 0, 3, 23Muted Blue Gray adds a neutral coolness that balances intensity and supports visual hierarchy subtly.
#6C8C99108, 140, 153197, 18, 5129, 8, 0, 40Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F0F4F5240, 244, 245192, 20, 952, 0, 0, 4RolesText, Btn Primary Text
#122B3518, 43, 53197, 49, 1466, 19, 0, 79Copy 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-light-sea-green: #3EA9A9;
--color-deep-ocean-blue: #1F4E5F;
--color-teal: #005F73;
--color-seafoam-green: #93C5C0;
--color-muted-blue-gray: #6C8C99;
--color-pure-white: #FFFFFF;
--color-off-white: #F0F4F5;
--color-charcoal-blue: #122B35;
}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: #3EA9A9;
--role-link: #3EA9A9;
--role-btn-primary-bg: #3EA9A9;
--role-btn-secondary-bg: #1F4E5F;
--role-btn-outlined-border: #1F4E5F;
--role-btn-outlined-text: #1F4E5F;
--role-headline: #1F4E5F;
--role-icon: #93C5C0;
--role-border: #93C5C0;
--role-divider: #93C5C0;
--role-outline: #93C5C0;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F0F4F5;
--role-text: #122B35;
--role-btn-primary-text: #122B35;
}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.{
"light-sea-green": "#3EA9A9",
"deep-ocean-blue": "#1F4E5F",
"teal": "#005F73",
"seafoam-green": "#93C5C0",
"muted-blue-gray": "#6C8C99",
"pure-white": "#FFFFFF",
"off-white": "#F0F4F5",
"charcoal-blue": "#122B35"
}