This palette captures the serene and vibrant essence of an underwater scene with deep ocean blues balanced by coral and seaweed-inspired accents, complemented by neutrals for versatility and readability.
This palette captures the serene and vibrant essence of an underwater scene with deep ocean blues balanced by coral and seaweed-inspired accents, complemented by neutrals for versatility and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors blend cool ocean blues with a soft coral, creating a harmonious split-complementary scheme that evokes underwater tranquility and vibrancy.
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 blend cool ocean blues with a soft coral, creating a harmonious split-complementary scheme that evokes underwater tranquility and vibrancy.
RolesLogo, Link, Btn Primary Bg, Headline
Navy Blue conveys depth, trust, and calmness, anchoring the palette in an oceanic feel.
#0B3D9111, 61, 145218, 86, 3192, 58, 0, 43RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Coral adds warmth and liveliness, representing coral reefs and balancing the cool tones.
#F5826F245, 130, 1119, 87, 700, 47, 55, 4Purple Iris provides a muted contrast and sophistication, complementing both blue and coral effectively.
#6A4B8E106, 75, 142268, 31, 4325, 47, 0, 44Support colors extend the main palette with softer purples and seaweed-inspired greens, adding depth and natural vibrancy without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Lavender Gray softens the palette with a muted hue that enhances readability and subtle detailing.
#9F94B8159, 148, 184258, 20, 6514, 20, 0, 28Seaweed Green adds an organic touch that balances the warm coral and cool blues naturally.
#4C8C7F76, 140, 127168, 30, 4246, 0, 9, 45Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesText, 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-blue: #0B3D91;
--color-coral: #F5826F;
--color-purple-iris: #6A4B8E;
--color-lavender-gray: #9F94B8;
--color-seaweed-green: #4C8C7F;
--color-white: #FFFFFF;
--color-ivory: #F4F4F4;
--color-charcoal: #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: #0B3D91;
--role-link: #0B3D91;
--role-btn-primary-bg: #0B3D91;
--role-headline: #0B3D91;
--role-btn-secondary-bg: #F5826F;
--role-btn-outlined-border: #F5826F;
--role-btn-outlined-text: #F5826F;
--role-icon: #9F94B8;
--role-border: #9F94B8;
--role-divider: #9F94B8;
--role-outline: #9F94B8;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F4F4F4;
--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-blue": "#0B3D91",
"coral": "#F5826F",
"purple-iris": "#6A4B8E",
"lavender-gray": "#9F94B8",
"seaweed-green": "#4C8C7F",
"white": "#FFFFFF",
"ivory": "#F4F4F4",
"charcoal": "#1A1A1A"
}