Golden Premier Painting Color Palette for Professional Branding

Golden Premier Painting Color Palette

This palette combines rich golden yellows and deep charcoal grays inspired by the branding image, creating a recognizable system that evokes quality and professionalism. The main colors establish a warm yet authoritative tone, while the support colors softly extend and balance this core with clean whites and subtle grays. Neutral tones provide readable contrast and clarity across digital interfaces and print.

MonochromaticNonegoldenyellowcharcoalpainting

Main (Brand) Colors

The main colors coordinate around warm golden hues paired with a dark charcoal base, creating a strong visual identity that signals reliability and excellence in craftsmanship.

PrimaryGoldenrod

RolesLogo, Link, Btn Primary Bg, Headline

Goldenrod provides a radiant and trustworthy tone symbolizing quality and refinement.

HEX#D9A72E

RGB217, 167, 46

HSL42, 69, 52

CMYK0, 23, 79, 15

SecondaryLight Gold

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Light Gold offers a softer highlight that complements the primary goldenrod, adding warmth without overpowering.

HEX#F0D67B

RGB240, 214, 123

HSL47, 80, 71

CMYK0, 11, 49, 6

TertiaryCharcoal

RolesBg Dark

Charcoal grounds the palette with a solid dark tone for text and primary text elements ensuring readability and seriousness.

HEX#2E2E2E

RGB46, 46, 46

HSL0, 0, 18

CMYK0, 0, 0, 82

Support Colors

Support colors subtly enhance the main palette by offering neutral whites and gentle grays for backgrounds, borders, and iconography, balancing the warmth of the yellows while maintaining clarity and accessibility.

Alabaster

RolesBg Light

Alabaster serves as a clean near-white background that brightens the interface without harshness.

HEX#F7F7F7

RGB247, 247, 247

HSL0, 0, 97

CMYK0, 0, 0, 3

Silver Gray

RolesBorder, Divider, Icon, Outline

Silver Gray provides a gentle, unobtrusive accent for edges and icons that complements the golden tones.

HEX#B3B3B3

RGB179, 179, 179

HSL0, 0, 70

CMYK0, 0, 0, 30

Neutral Colors

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

White

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Alabaster

HEX#F7F7F7

RGB247, 247, 247

HSL0, 0, 97

CMYK0, 0, 0, 3

Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2E2E2E

RGB46, 46, 46

HSL0, 0, 18

CMYK0, 0, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Goldenrod", "hex": "#D9A72E", "role": "main", "cmyk": { "c": 0, "m": 23, "y": 79, "k": 15, "source": "colorfly" } }, { "name": "Light Gold", "hex": "#F0D67B", "role": "main", "cmyk": { "c": 0, "m": 11, "y": 49, "k": 6, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2E2E2E", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F7F7F7", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Silver Gray", "hex": "#B3B3B3", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 30, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F7F7F7", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2E2E2E", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #D9A72E; --role-link: #D9A72E; --role-btn-primary-bg: #D9A72E; --role-headline: #D9A72E; --role-btn-secondary-bg: #F0D67B; --role-btn-outlined-border: #F0D67B; --role-btn-outlined-text: #F0D67B; --role-bg-dark: #2E2E2E; --role-bg-light: #F7F7F7; --role-border: #B3B3B3; --role-divider: #B3B3B3; --role-icon: #B3B3B3; --role-outline: #B3B3B3; --role-text: #2E2E2E; --role-btn-primary-text: #2E2E2E; --role-btn-secondary-text: #2E2E2E; }

<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: #D9A72E; --gradient-partner: #E4C16D; --gradient-accent: #F7F7F7; --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: #D9A72E; --gradient-text-b: #7B683B; --gradient-text-c: #949494; 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>