An Ikea-inspired palette that pairs a confident cobalt blue with warm golden yellow, keeping the system approachable, functional, and distinctly retail-oriented without copying the brand directly. Clean neutrals and restrained blue-gray support tones maintain usability across product-led interfaces,
An Ikea-inspired palette that pairs a confident cobalt blue with warm golden yellow, keeping the system approachable, functional, and distinctly retail-oriented without copying the brand directly. Clean neutrals and restrained blue-gray support tones maintain usability across product-led interfaces,
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a recognizable retail system built from clear, high-contrast primaries: energetic blue and welcoming yellow. Together they feel familiar, practical, and easy to use across signage, packaging, and digital UI.
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 create a recognizable retail system built from clear, high-contrast primaries: energetic blue and welcoming yellow. Together they feel familiar, practical, and easy to use across signage, packaging, and digital UI.
RolesLogo, Btn Primary Bg, Headline
A crisp retailer-blue that gives the brand instant recognition and dependable visual structure.
#0058A30, 88, 163208, 100, 32100, 46, 0, 36RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text
A bright, optimistic yellow that adds warmth and keeps the system approachable and energetic.
#F4C300244, 195, 048, 100, 480, 20, 100, 4The support accents quietly extend the main palette with softer, more usable utility tones that reinforce the Scandinavian retail feel. They add interface flexibility for icons, UI
RolesIcon, Border
A cool blue-gray that bridges the cobalt main color with everyday interface elements.
#4A6A7F74, 106, 127204, 26, 3942, 17, 0, 50RolesDivider, Outline
A restrained pale blue-gray that keeps layouts airy while staying subordinate to the stronger brand colors.
#D9E1E8217, 225, 232208, 25, 886, 3, 0, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#F7F7F7247, 247, 2470, 0, 970, 0, 0, 3#E9E9E9233, 233, 2330, 0, 910, 0, 0, 9RolesBg Dark, 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-swedish-cobalt: #0058A3;
--color-nordic-sun: #F4C300;
--color-slate-harbor: #4A6A7F;
--color-soft-frost: #D9E1E8;
--color-pure-white: #F7F7F7;
--color-icy-stone: #E9E9E9;
--color-deep-charcoal: #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: #0058A3;
--role-btn-primary-bg: #0058A3;
--role-headline: #0058A3;
--role-link: #F4C300;
--role-btn-secondary-bg: #F4C300;
--role-btn-outlined-border: #F4C300;
--role-btn-outlined-text: #F4C300;
--role-icon: #4A6A7F;
--role-border: #4A6A7F;
--role-divider: #D9E1E8;
--role-outline: #D9E1E8;
--role-bg-light: #F7F7F7;
--role-btn-primary-text: #F7F7F7;
--role-bg-dark: #111111;
--role-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.{
"swedish-cobalt": "#0058A3",
"nordic-sun": "#F4C300",
"slate-harbor": "#4A6A7F",
"soft-frost": "#D9E1E8",
"pure-white": "#F7F7F7",
"icy-stone": "#E9E9E9",
"deep-charcoal": "#111111"
}