A sunlit market-inspired palette built around warm saffron, bright sky blue, and a grounded cobalt that feels fresh, tactile, and energetic. The colors read as a cohesive brand system because the warm-cool contrast creates instant recognition while the muted support tones keep the palette practical.
A sunlit market-inspired palette built around warm saffron, bright sky blue, and a grounded cobalt that feels fresh, tactile, and energetic. The colors read as a cohesive brand system because the warm-cool contrast creates instant recognition while the muted support tones keep the palette practical.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Warm saffron and layered blues create a vivid, recognizable contrast that feels energetic without becoming chaotic. The palette works because the yellow-led warmth and blue-led coolness reinforce each other across packaging, identity, and a
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.
Warm saffron and layered blues create a vivid, recognizable contrast that feels energetic without becoming chaotic. The palette works because the yellow-led warmth and blue-led coolness reinforce each other across packaging, identity, and a
RolesLogo, Btn Primary Bg
The most attention-grabbing brand note; it brings warmth, optimism, and shelf presence.
#F4C318244, 195, 2447, 91, 530, 20, 90, 4RolesLink, Btn Secondary Bg
A lighter, more open blue that adds clarity and digital ease against the warmer accent.
#75AEEF117, 174, 239212, 79, 7051, 27, 0, 6RolesHeadline
A confident anchor that adds structure, depth, and a more premium editorial feel.
#1F57B831, 87, 184218, 71, 4283, 53, 0, 28Soft supporting hues extend the market-inspired feel without competing with the main statement colors. They add tactile balance, subtle decoration, and usable emphasis for UI and a
RolesBtn Outlined Border, Icon
A restrained blue-gray that supports structure and reduces the intensity of the brighter blues.
#3E66A862, 102, 168217, 46, 4563, 39, 0, 34RolesBtn Outlined Text, Border
A pale airy blue that softens outlines and keeps secondary UI elements light and calm.
#B9D7F2185, 215, 242208, 69, 8424, 11, 0, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesOutline
#F6F1E7246, 241, 23140, 45, 940, 2, 6, 4RolesBg Dark, Divider, Text, Btn Primary Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-golden-saffron: #F4C318;
--color-skywash-blue: #75AEEF;
--color-deep-atlantic: #1F57B8;
--color-muted-harbor: #3E66A8;
--color-washed-sky: #B9D7F2;
--color-pure-white: #FFFFFF;
--color-shell-linen: #F6F1E7;
--color-ink-black: #111111;
}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: #F4C318;
--role-btn-primary-bg: #F4C318;
--role-link: #75AEEF;
--role-btn-secondary-bg: #75AEEF;
--role-headline: #1F57B8;
--role-btn-outlined-border: #3E66A8;
--role-icon: #3E66A8;
--role-btn-outlined-text: #B9D7F2;
--role-border: #B9D7F2;
--role-bg-light: #FFFFFF;
--role-outline: #F6F1E7;
--role-bg-dark: #111111;
--role-divider: #111111;
--role-text: #111111;
--role-btn-primary-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"golden-saffron": "#F4C318",
"skywash-blue": "#75AEEF",
"deep-atlantic": "#1F57B8",
"muted-harbor": "#3E66A8",
"washed-sky": "#B9D7F2",
"pure-white": "#FFFFFF",
"shell-linen": "#F6F1E7",
"ink-black": "#111111"
}