This palette captures the vibrant, warm, and inviting atmosphere of a coastal seafood and beer gastropub. The main colors reflect freshness and festivity, while support colors and neutrals enhance readability and balance for a lively yet approachable brand identity.
This palette captures the vibrant, warm, and inviting atmosphere of a coastal seafood and beer gastropub. The main colors reflect freshness and festivity, while support colors and neutrals enhance readability and balance for a lively yet approachable brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form an analogous scheme of coral, warm sand, and seafoam green that together evoke the beach environment, fresh seafood, and the festive, casual spirit of the brand.
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 an analogous scheme of coral, warm sand, and seafoam green that together evoke the beach environment, fresh seafood, and the festive, casual spirit of the brand.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Coral provides a warm, energetic presence that conveys friendliness and the vibrant spirit of gathering by the sea.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0RolesHeadline, Btn Secondary Bg
Sand brings warmth and grounding, evoking sunlit beaches and natural textures that balance the palette's vibrancy.
#F4D398244, 211, 15238, 81, 780, 14, 38, 4Seafoam introduces a fresh, cool contrast reminiscent of ocean waves and freshness, reinforcing the culinary emphasis on seafood.
#63BFAA99, 191, 170166, 42, 5748, 0, 11, 25Support colors are muted ocean blue and soft taupe hues to complement the main palette, used subtly to reinforce coastal freshness and add calm accents.
RolesIcon, Border, Divider, Outline
Ocean Blue complements seafoam with a deeper hue that adds depth and supports textural elements without overwhelming the main colors.
#5A8F8E90, 143, 142179, 23, 4637, 0, 1, 44Taupe balances warmth and neutrality, complementing sand and coral while providing a soft contrast for secondary headlines and subtle elements.
#BCAAA4188, 170, 16415, 15, 690, 10, 13, 26Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F9F6F1249, 246, 24138, 40, 960, 1, 3, 2RolesText, Btn Primary Text, Btn Secondary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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-sand: #F4D398;
--color-seafoam: #63BFAA;
--color-ocean-blue: #5A8F8E;
--color-taupe: #BCAAA4;
--color-white: #FFFFFF;
--color-ivory: #F9F6F1;
--color-charcoal: #2B2B2B;
}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: #F4D398;
--role-btn-secondary-bg: #F4D398;
--role-icon: #5A8F8E;
--role-border: #5A8F8E;
--role-divider: #5A8F8E;
--role-outline: #5A8F8E;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F9F6F1;
--role-text: #2B2B2B;
--role-btn-primary-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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",
"sand": "#F4D398",
"seafoam": "#63BFAA",
"ocean-blue": "#5A8F8E",
"taupe": "#BCAAA4",
"white": "#FFFFFF",
"ivory": "#F9F6F1",
"charcoal": "#2B2B2B"
}