Gaston Bakery Heritage Color Palette

Gaston Bakery now uses a true monochrome system built from Saffron Gold, with tonal shifts that keep the brand warm, heritage-led, and easy to apply across packaging and digital interfaces. The palette stays unified around one hue while the neutrals handle readability and structure.

MonochromaticFood Beverageheritage bakeryartisan breadwarm goldrustic brand colors

Main (Brand) Colors

The main colors stay within one saffron-gold family, so the palette reads as a single, coherent brand system rather than a mix of competing hues. Tonal variation creates hierarchy and flexibility while preserving the bakery’s warm, artisanal character.

PrimarySaffron Gold

RolesLogo, Btn Primary Bg

This is the signature saffron gold that anchors recognition and gives the brand its warm, baked finish.

HEX#d8b24a

RGB216, 178, 74

HSL44, 65, 57

CMYK0, 18, 66, 15

TertiaryAmber Ochre

RolesBtn Outlined Border, Btn Outlined Text, Headline, Btn Secondary Bg

This deeper gold-brown now carries the secondary button and outline work, giving the system stronger contrast while staying inside the core hue family.

HEX#7a5b12

RGB122, 91, 18

HSL42, 74, 27

CMYK0, 25, 85, 52

Support Colors

The support colors are quiet saffron-adjacent tones that extend the monochrome system without introducing a new hue direction. They add subtle interface structure and keep the palette usable across link, icon, and divider applications.

Marigold

RolesLink, Icon

This mid-gold supports the system with a readable accent that feels related to the core saffron hue.

HEX#c69a3a

RGB198, 154, 58

HSL41, 55, 50

CMYK0, 22, 71, 22

Ochre

RolesBorder, Divider, Outline

This grounded golden-brown balances the brighter main tones and helps the interface hold shape on light surfaces.

HEX#8f6a18

RGB143, 106, 24

HSL41, 71, 33

CMYK0, 26, 83, 44

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light, Btn Secondary Text

HEX#ffffff

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#f5efe2

RGB245, 239, 226

HSL41, 49, 92

CMYK0, 2, 8, 4

Charcoal

RolesBg Dark, Text, Btn Primary Text

HEX#1a1715

RGB26, 23, 21

HSL24, 11, 9

CMYK0, 12, 19, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Saffron Gold", "hex": "#D8B24A", "role": "main", "cmyk": { "c": 0, "m": 18, "y": 66, "k": 15, "source": "colorfly" } }, { "name": "Amber Ochre", "hex": "#7A5B12", "role": "main", "cmyk": { "c": 0, "m": 25, "y": 85, "k": 52, "source": "colorfly" } }, { "name": "Marigold", "hex": "#C69A3A", "role": "support", "cmyk": { "c": 0, "m": 22, "y": 71, "k": 22, "source": "colorfly" } }, { "name": "Ochre", "hex": "#8F6A18", "role": "support", "cmyk": { "c": 0, "m": 26, "y": 83, "k": 44, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F5EFE2", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 8, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1A1715", "role": "neutral", "cmyk": { "c": 0, "m": 12, "y": 19, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-saffron-gold: #d8b24a; --color-amber-ochre: #7a5b12; --color-marigold: #c69a3a; --color-ochre: #8f6a18; --color-white: #ffffff; --color-ivory: #f5efe2; --color-charcoal: #1a1715; }

:root { --role-logo: #d8b24a; --role-btn-primary-bg: #d8b24a; --role-btn-outlined-border: #7a5b12; --role-btn-outlined-text: #7a5b12; --role-headline: #7a5b12; --role-btn-secondary-bg: #7a5b12; --role-link: #c69a3a; --role-icon: #c69a3a; --role-border: #8f6a18; --role-divider: #8f6a18; --role-outline: #8f6a18; --role-bg-light: #ffffff; --role-btn-secondary-text: #ffffff; --role-bg-dark: #1a1715; --role-text: #1a1715; --role-btn-primary-text: #1a1715; }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #D8B24A; --gradient-partner: #E4C980; --gradient-accent: #C69A3A; --gradient-text: #000000; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #756028; --gradient-text-b: #7B6D45; --gradient-text-c: #C69A3A; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>