Amber Black Color Palette for Luxury Brands

Amber Amber Black Color Palette

This palette draws inspiration from the rich, warm amber and elegant black tones of the image, creating a sophisticated and luxurious brand identity. The main colors of deep golden amber, warm reddish-brown, and dark black balance recognition and visual impact, while the support colors of muted gold and smoky gray reinforce the palette with subtle accents. Neutrals provide clear contrast and improve readability across digital interfaces.

MonochromaticLuxury And Lifestyleamberblackluxurywarmth

Main (Brand) Colors

The combination of deep amber, reddish-brown, and black creates a distinctive and memorable palette combining warmth with strength, ideal for luxury branding.

PrimaryGolden Amber

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Golden Amber anchors the palette with a rich and warm presence, evoking luxury and quality.

HEX#A1590E

RGB161, 89, 14

HSL31, 84, 34

CMYK0, 45, 91, 37

SecondaryBurnt Sienna

RolesHeadline, Btn Secondary Bg

Burnt Sienna adds depth and an earthy warmth, complementing the amber hues with a confident tone.

HEX#7B3B0A

RGB123, 59, 10

HSL26, 85, 26

CMYK0, 52, 92, 52

TertiaryRich Black

RolesBg Dark

Rich Black provides a strong, elegant foundation, enhancing contrast and sophistication.

HEX#0B0B0B

RGB11, 11, 11

HSL0, 0, 4

CMYK0, 0, 0, 96

Support Colors

Subtle support colors extend the palette with muted gold and smoky gray, adding visual interest without overpowering the main colors.

Muted Gold

RolesIcon, Border, Divider, Outline

Muted Gold highlights details and edges with a soft metallic sheen, supporting the warm main colors.

HEX#C9A14F

RGB201, 161, 79

HSL40, 53, 55

CMYK0, 20, 61, 21

Smoky Gray

RolesBg Light

Smoky Gray balances the palette with a neutral mid-tone, providing background lightness that enhances readability.

HEX#4C4C4C

RGB76, 76, 76

HSL0, 0, 30

CMYK0, 0, 0, 70

Neutral Colors

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

Pure White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory White

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal Black

RolesText

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Golden Amber", "hex": "#A1590E", "role": "main", "cmyk": { "c": 0, "m": 45, "y": 91, "k": 37, "source": "colorfly" } }, { "name": "Burnt Sienna", "hex": "#7B3B0A", "role": "main", "cmyk": { "c": 0, "m": 52, "y": 92, "k": 52, "source": "colorfly" } }, { "name": "Rich Black", "hex": "#0B0B0B", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 96, "source": "colorfly" } }, { "name": "Muted Gold", "hex": "#C9A14F", "role": "support", "cmyk": { "c": 0, "m": 20, "y": 61, "k": 21, "source": "colorfly" } }, { "name": "Smoky Gray", "hex": "#4C4C4C", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 70, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-golden-amber: #A1590E; --color-burnt-sienna: #7B3B0A; --color-rich-black: #0B0B0B; --color-muted-gold: #C9A14F; --color-smoky-gray: #4C4C4C; --color-pure-white: #FFFFFF; --color-ivory-white: #F5F5F5; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #A1590E; --role-link: #A1590E; --role-btn-primary-bg: #A1590E; --role-btn-outlined-border: #A1590E; --role-btn-outlined-text: #A1590E; --role-headline: #7B3B0A; --role-btn-secondary-bg: #7B3B0A; --role-bg-dark: #0B0B0B; --role-icon: #C9A14F; --role-border: #C9A14F; --role-divider: #C9A14F; --role-outline: #C9A14F; --role-bg-light: #4C4C4C; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #1A1A1A; }

{ "golden-amber": "#A1590E", "burnt-sienna": "#7B3B0A", "rich-black": "#0B0B0B", "muted-gold": "#C9A14F", "smoky-gray": "#4C4C4C", "pure-white": "#FFFFFF", "ivory-white": "#F5F5F5", "charcoal-black": "#1A1A1A" }

<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: #A1590E; --gradient-partner: #CBA47A; --gradient-accent: #C9A14F; --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: #A1590E; --gradient-text-b: #CBA47A; --gradient-text-c: #C9A14F; 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>

Amber Amber Black Color Palette

Amber Amber Black Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Amber Amber Black Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system