Gold Orange Tech Color Palette for Corporate Branding

Gold Orange Tech Color Palette

This strategic color palette draws inspiration from the warm and glowing gold and orange tones of the logo, balanced with complementary softer browns and a deep dark neutral for contrast and readability. It emphasizes a modern tech appeal with a luxurious yet approachable vibe.

MonochromaticTechgoldorangetechcorporate

Main (Brand) Colors

The main colors consist of warm gold and deep orange hues that create a glowing, energetic, and sophisticated tech brand identity.

PrimaryGoldenrod

RolesLogo, Link, Btn Primary Bg, Headline

Goldenrod represents luxury and innovation, giving the brand a radiant and modern presence.

HEX#E89A26

RGB232, 154, 38

HSL36, 81, 53

CMYK0, 34, 84, 9

SecondaryOrange

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Orange conveys energy and creativity, supporting the primary color with vibrant emphasis.

HEX#D97700

RGB217, 119, 0

HSL33, 100, 43

CMYK0, 45, 100, 15

TertiarySaddle Brown

RolesIcon, Border, Divider, Outline

Saddle Brown grounds the palette with warmth and stability, complementing the brighter tones.

HEX#BB6D00

RGB187, 109, 0

HSL35, 100, 37

CMYK0, 42, 100, 27

Support Colors

The support colors extend the palette with muted warm browns and a soft complementary pastel to provide subtle accents that balance and soften the main warm hues.

Sandstone

Sandstone adds a muted but warm tone that complements the goldenrod while easing transitions.

HEX#C49E58

RGB196, 158, 88

HSL39, 48, 56

CMYK0, 19, 55, 23

Dark Olive

Dark Olive brings depth and contrast, harmonizing with the saddle brown for balanced visuals.

HEX#7F5A00

RGB127, 90, 0

HSL43, 100, 25

CMYK0, 29, 100, 50

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

Alabaster

HEX#F6F4F1

RGB246, 244, 241

HSL36, 22, 95

CMYK0, 1, 2, 4

Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#2B2B2B

RGB43, 43, 43

HSL0, 0, 17

CMYK0, 0, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Goldenrod", "hex": "#E89A26", "role": "main", "cmyk": { "c": 0, "m": 34, "y": 84, "k": 9, "source": "colorfly" } }, { "name": "Orange", "hex": "#D97700", "role": "main", "cmyk": { "c": 0, "m": 45, "y": 100, "k": 15, "source": "colorfly" } }, { "name": "Saddle Brown", "hex": "#BB6D00", "role": "main", "cmyk": { "c": 0, "m": 42, "y": 100, "k": 27, "source": "colorfly" } }, { "name": "Sandstone", "hex": "#C49E58", "role": "support", "cmyk": { "c": 0, "m": 19, "y": 55, "k": 23, "source": "colorfly" } }, { "name": "Dark Olive", "hex": "#7F5A00", "role": "support", "cmyk": { "c": 0, "m": 29, "y": 100, "k": 50, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F6F4F1", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B2B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-goldenrod: #E89A26; --color-orange: #D97700; --color-saddle-brown: #BB6D00; --color-sandstone: #C49E58; --color-dark-olive: #7F5A00; --color-white: #FFFFFF; --color-alabaster: #F6F4F1; --color-charcoal: #2B2B2B; }

:root { --role-logo: #E89A26; --role-link: #E89A26; --role-btn-primary-bg: #E89A26; --role-headline: #E89A26; --role-btn-secondary-bg: #D97700; --role-btn-outlined-border: #D97700; --role-btn-outlined-text: #D97700; --role-icon: #BB6D00; --role-border: #BB6D00; --role-divider: #BB6D00; --role-outline: #BB6D00; --role-bg-light: #FFFFFF; --role-bg-dark: #2B2B2B; --role-text: #2B2B2B; --role-btn-primary-text: #2B2B2B; --role-btn-secondary-text: #2B2B2B; }

{ "goldenrod": "#E89A26", "orange": "#D97700", "saddle-brown": "#BB6D00", "sandstone": "#C49E58", "dark-olive": "#7F5A00", "white": "#FFFFFF", "alabaster": "#F6F4F1", "charcoal": "#2B2B2B" }

<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: #E89A26; --gradient-partner: #EFB867; --gradient-accent: #F4D09B; --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: #E89A26; --gradient-text-b: #816338; --gradient-text-c: #927D5D; 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>