The Cinnamon palette harmonizes warm earthy tones with soft botanical accents and gentle neutrals, reflecting the brand's emphasis on natural cycles, fresh comfort, and sensory minimalism. This balanced combination evokes the emotional warmth of cinnamon and seasonal shifts, creating a serene yet inviting identity.
The Cinnamon palette harmonizes warm earthy tones with soft botanical accents and gentle neutrals, reflecting the brand's emphasis on natural cycles, fresh comfort, and sensory minimalism. This balanced combination evokes the emotional warmth of cinnamon and seasonal shifts, creating a serene yet inviting identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors of Cinnamon form an analogous palette of warm browns and muted purples harmoniously expressing sensory warmth and seasonal richness.
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 of Cinnamon form an analogous palette of warm browns and muted purples harmoniously expressing sensory warmth and seasonal richness.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Sienna carries the brand's comforting warmth, embodying the rich scent of cinnamon and anchoring the identity with a tactile, natural feel.
#8A6B56138, 107, 8624, 23, 440, 22, 38, 46RolesBtn Secondary Bg, Headline
Muted Plum adds a gentle sophistication and a hint of seasonal depth, balancing warmth with subtle freshness to reflect the brand's poetic nature.
#8D748B141, 116, 139305, 10, 500, 18, 1, 45Support colors are soft botanical hues that quietly reinforce the main palette by adding freshness and lightness without overpowering the sensory warmth.
RolesIcon, Border, Divider, Outline
Sage introduces a cooling, muted green that hints at early morning freshness, complementing the warmth to produce a natural equilibrium.
#AAB59A170, 181, 15484, 15, 666, 0, 15, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#F5F0E7245, 240, 23139, 41, 930, 2, 6, 4RolesBg Dark
#BCC9CF188, 201, 207199, 17, 779, 3, 0, 19RolesText
#4B423775, 66, 5533, 15, 250, 12, 27, 71Copy 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-sienna: #8A6B56;
--color-muted-plum: #8D748B;
--color-sage: #AAB59A;
--color-cream: #F5F0E7;
--color-mist: #BCC9CF;
--color-charcoal-brown: #4B4237;
}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: #8A6B56;
--role-link: #8A6B56;
--role-btn-primary-bg: #8A6B56;
--role-btn-outlined-border: #8A6B56;
--role-btn-outlined-text: #8A6B56;
--role-btn-secondary-bg: #8D748B;
--role-headline: #8D748B;
--role-icon: #AAB59A;
--role-border: #AAB59A;
--role-divider: #AAB59A;
--role-outline: #AAB59A;
--role-bg-light: #F5F0E7;
--role-btn-primary-text: #F5F0E7;
--role-btn-secondary-text: #F5F0E7;
--role-bg-dark: #BCC9CF;
--role-text: #4B4237;
}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.{
"sienna": "#8A6B56",
"muted-plum": "#8D748B",
"sage": "#AAB59A",
"cream": "#F5F0E7",
"mist": "#BCC9CF",
"charcoal-brown": "#4B4237"
}