Golden Brown Tech Color Palette for Corporate Branding

Golden Brown Tech Color Palette

This palette blends warm golden yellows and soft oranges with grounding earthy browns and subtle peach tones, evoking a sense of innovation and trust inspired by the brand's logo. The warm gold symbolizes creativity and optimism, while the browns convey reliability and stability, perfectly suited for a tech brand focused on growth and precision.

MonochromaticTechgoldenwarm yellowbrowntech

Main (Brand) Colors

The main colors use an analogous harmony of warm yellows and oranges creating a vibrant yet professional identity that links innovation with approachability.

PrimaryGoldenrod

RolesLogo, Link, Btn Primary Bg

Goldenrod evokes creativity and optimism, making it the central brand color for visibility and recognition.

HEX#D99419

RGB217, 148, 25

HSL38, 79, 47

CMYK0, 32, 88, 15

SecondaryPeach Orange

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Peach Orange adds warmth and friendliness, softening the palette and complementing the bold Gold.

HEX#F2B662

RGB242, 182, 98

HSL35, 85, 67

CMYK0, 25, 60, 5

TertiaryBurnt Sienna

RolesHeadline

Burnt Sienna brings grounding and reliability, anchoring headlines with a strong professional presence.

HEX#AD6A26

RGB173, 106, 38

HSL30, 64, 41

CMYK0, 39, 78, 32

Support Colors

Support colors extend the warmth of the main colors with muted earthy browns and gentle peach tones, enhancing the brand's approachable yet trustworthy feel without overpowering.

Light Tan

RolesIcon, Border, Divider, Outline

Light Tan adds subtle contrast and softens the palette, complementing the gold and orange tones for interface elements.

HEX#C9A97B

RGB201, 169, 123

HSL35, 42, 64

CMYK0, 16, 39, 21

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesBg Dark

HEX#F9F6F2

RGB249, 246, 242

HSL34, 37, 96

CMYK0, 1, 3, 2

Charcoal Brown

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3B2F2F

RGB59, 47, 47

HSL0, 11, 21

CMYK0, 20, 20, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Goldenrod", "hex": "#D99419", "role": "main", "cmyk": { "c": 0, "m": 32, "y": 88, "k": 15, "source": "colorfly" } }, { "name": "Peach Orange", "hex": "#F2B662", "role": "main", "cmyk": { "c": 0, "m": 25, "y": 60, "k": 5, "source": "colorfly" } }, { "name": "Burnt Sienna", "hex": "#AD6A26", "role": "main", "cmyk": { "c": 0, "m": 39, "y": 78, "k": 32, "source": "colorfly" } }, { "name": "Light Tan", "hex": "#C9A97B", "role": "support", "cmyk": { "c": 0, "m": 16, "y": 39, "k": 21, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F6F2", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 2, "source": "colorfly" } }, { "name": "Charcoal Brown", "hex": "#3B2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 20, "y": 20, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-goldenrod: #D99419; --color-peach-orange: #F2B662; --color-burnt-sienna: #AD6A26; --color-light-tan: #C9A97B; --color-white: #FFFFFF; --color-ivory: #F9F6F2; --color-charcoal-brown: #3B2F2F; }

:root { --role-logo: #D99419; --role-link: #D99419; --role-btn-primary-bg: #D99419; --role-btn-secondary-bg: #F2B662; --role-btn-outlined-border: #F2B662; --role-btn-outlined-text: #F2B662; --role-headline: #AD6A26; --role-icon: #C9A97B; --role-border: #C9A97B; --role-divider: #C9A97B; --role-outline: #C9A97B; --role-bg-light: #FFFFFF; --role-bg-dark: #F9F6F2; --role-text: #3B2F2F; --role-btn-primary-text: #3B2F2F; --role-btn-secondary-text: #3B2F2F; }

{ "goldenrod": "#D99419", "peach-orange": "#F2B662", "burnt-sienna": "#AD6A26", "light-tan": "#C9A97B", "white": "#FFFFFF", "ivory": "#F9F6F2", "charcoal-brown": "#3B2F2F" }

<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: #D99419; --gradient-partner: #E4B45E; --gradient-accent: #EDCE95; --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: #D99419; --gradient-text-b: #7B6133; --gradient-text-c: #8E7C59; 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>