This palette is inspired by the soft, pastel teal and cream tones of the background and typography, complemented by warm golden hues reflecting the kunafa dessert. The colors create a balanced and inviting system suitable for a food and beverage brand with an elegant yet approachable aesthetic.
This palette is inspired by the soft, pastel teal and cream tones of the background and typography, complemented by warm golden hues reflecting the kunafa dessert. The colors create a balanced and inviting system suitable for a food and beverage brand with an elegant yet approachable aesthetic.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a soothing pastel teal with warm golden-yellow and soft cream tones, creating a distinct and harmonious color trio that evokes freshness, warmth, and appetite appeal.
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 soothing pastel teal with warm golden-yellow and soft cream tones, creating a distinct and harmonious color trio that evokes freshness, warmth, and appetite appeal.
RolesLogo, Link, Btn Primary Bg, Headline
This pastel teal brings a fresh and calming effect, serving as the foundation for brand recognition and digital interaction.
#7AB8B3122, 184, 179175, 30, 6034, 0, 3, 28RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Goldenrod adds warmth and appetite appeal, perfectly complementing the teal with an inviting accent for secondary actions.
#F2C857242, 200, 8744, 86, 650, 17, 64, 5A soft cream color used mostly for text on darker backgrounds, it ensures readability and a clean look.
#F6F1E7246, 241, 23140, 45, 940, 2, 6, 4The support colors extend the palette by introducing soft golden orange and muted pastel green to subtly reinforce the brand colors, providing versatility for icons, borders, and subtle detail elements.
RolesIcon, Border, Divider, Outline
Muted Golden Orange enriches the palette with a warm tone that balances pastel teal and goldenrod without competing.
#E6A348230, 163, 7235, 76, 590, 29, 69, 10Soft Sage adds a muted greenish note complementing the teal and adding subtle depth for secondary visual elements.
#8DB3AA141, 179, 170166, 20, 6321, 0, 5, 30Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#E9E6DF233, 230, 22342, 19, 890, 1, 4, 9RolesText, Btn Primary Text, Btn Secondary Text
#433F3E67, 63, 6212, 4, 250, 6, 7, 74Copy 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-pastel-teal: #7AB8B3;
--color-goldenrod: #F2C857;
--color-off-white: #F6F1E7;
--color-muted-golden-orange: #E6A348;
--color-soft-sage: #8DB3AA;
--color-white: #FFFFFF;
--color-light-ivory: #E9E6DF;
--color-charcoal: #433F3E;
}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: #7AB8B3;
--role-link: #7AB8B3;
--role-btn-primary-bg: #7AB8B3;
--role-headline: #7AB8B3;
--role-btn-secondary-bg: #F2C857;
--role-btn-outlined-border: #F2C857;
--role-btn-outlined-text: #F2C857;
--role-icon: #E6A348;
--role-border: #E6A348;
--role-divider: #E6A348;
--role-outline: #E6A348;
--role-bg-light: #FFFFFF;
--role-bg-dark: #E9E6DF;
--role-text: #433F3E;
--role-btn-primary-text: #433F3E;
--role-btn-secondary-text: #433F3E;
}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.{
"pastel-teal": "#7AB8B3",
"goldenrod": "#F2C857",
"off-white": "#F6F1E7",
"muted-golden-orange": "#E6A348",
"soft-sage": "#8DB3AA",
"white": "#FFFFFF",
"light-ivory": "#E9E6DF",
"charcoal": "#433F3E"
}