This palette combines warm caramel and sandy beige tones with a cool sky blue, balanced by neutral shades to represent a serene beachside ambiance. It reflects both warmth and tranquility for a memorable brand identity.
This palette combines warm caramel and sandy beige tones with a cool sky blue, balanced by neutral shades to represent a serene beachside ambiance. It reflects both warmth and tranquility for a memorable brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors offer a harmonious triadic system with warm caramel, creamy beige, and soothing sky blue that evoke relaxation and inviting warmth.
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 offer a harmonious triadic system with warm caramel, creamy beige, and soothing sky blue that evoke relaxation and inviting warmth.
RolesLogo, Link, Btn Primary Bg, Headline
Caramel adds inviting warmth and earthiness, perfect for branding that seeks to convey approachability and comfort.
#C3763C195, 118, 6026, 53, 500, 39, 69, 24RolesBtn Secondary Bg, Btn Outlined Border
Sandy Beige provides a soft, neutral contrast that balances warmth with softness, ideal for backgrounds and secondary elements.
#EFE4CF239, 228, 20739, 50, 870, 5, 13, 6RolesBtn Outlined Text
Sky Blue introduces a calming and spacious feeling, complementing and refreshing the warmer hues.
#8EC4E6142, 196, 230203, 64, 7338, 15, 0, 10Supporting colors extend the main palette with muted tones that enrich the palette’s usability and add subtle depth without overpowering.
RolesIcon, Border, Divider, Outline
Warm Taupe complements caramel by adding a subdued, grounded tone suitable for interface elements.
#B9966C185, 150, 10833, 35, 570, 19, 42, 27Soft Mist is a light, muted blue that supports sky blue by softening edges and enhancing readability.
#D9E8F5217, 232, 245208, 58, 9111, 5, 0, 4Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F3EC247, 243, 23638, 41, 950, 2, 4, 3RolesText, Btn Primary Text, Btn Secondary Text
#2E2E2E46, 46, 460, 0, 180, 0, 0, 82Copy 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-caramel: #C3763C;
--color-sandy-beige: #EFE4CF;
--color-sky-blue: #8EC4E6;
--color-warm-taupe: #B9966C;
--color-soft-mist: #D9E8F5;
--color-white: #FFFFFF;
--color-ivory: #F7F3EC;
--color-charcoal: #2E2E2E;
}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: #C3763C;
--role-link: #C3763C;
--role-btn-primary-bg: #C3763C;
--role-headline: #C3763C;
--role-btn-secondary-bg: #EFE4CF;
--role-btn-outlined-border: #EFE4CF;
--role-btn-outlined-text: #8EC4E6;
--role-icon: #B9966C;
--role-border: #B9966C;
--role-divider: #B9966C;
--role-outline: #B9966C;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F7F3EC;
--role-text: #2E2E2E;
--role-btn-primary-text: #2E2E2E;
--role-btn-secondary-text: #2E2E2E;
}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.{
"caramel": "#C3763C",
"sandy-beige": "#EFE4CF",
"sky-blue": "#8EC4E6",
"warm-taupe": "#B9966C",
"soft-mist": "#D9E8F5",
"white": "#FFFFFF",
"ivory": "#F7F3EC",
"charcoal": "#2E2E2E"
}