Golden Amber#A1590E
Burnt Sienna#7B3B0A
Rich Black#0B0B0B
Muted Gold#C9A14F
Smoky Gray#4C4C4C
Palette direction

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
palette-preview.example
Luxury And Lifestyle color direction

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.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Rich Black #0B0B0B19.7:1 Excellent
Logo Pure White #FFFFFFon Golden Amber #A1590E5.3:1 Strong
Logo Rich Black #0B0B0Bon Pure White #FFFFFF19.7:1 Excellent
Logo Rich Black #0B0B0Bon Muted Gold #C9A14F8.1:1 Excellent
Icon color
BackgroundGolden Amber#A1590ETextPure White#FFFFFF
Primary Button5.32:1
AA

Best for the main action users should notice first.

BackgroundBurnt Sienna#7B3B0ATextPure White#FFFFFF
Secondary Button8.49:1
AAA

Useful for softer choices and secondary paths.

BackgroundSmoky Gray#4C4C4CTextGolden Amber#A1590E
Outlined Button1.62:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSmoky Gray#4C4C4CTextGolden Amber#A1590E
Text Button1.62:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsMonochromatic color relationship
9:41Amber Amber Black Color Palette Color role balance
Monochromatic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CAmber Amber Black Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Golden Amber #A1590E
HeadlineUsed for main titles and key messages.Burnt Sienna #7B3B0A
LinkUsed for links and interactive text.Golden Amber #A1590E

Buttons

Primary Button
BackgroundGolden Amber #A1590E
TextPure White #FFFFFF
Secondary Button
BackgroundBurnt Sienna #7B3B0A
TextPure White #FFFFFF
Outlined Button
BackgroundGolden Amber #A1590E
TextGolden Amber #A1590E

Interface

TextDefault readable body text.Charcoal Black #1A1A1A
Bg LightLight page or section background.Smoky Gray #4C4C4C
Bg DarkDark page or section background.Rich Black #0B0B0B
IconSmall interface icons and marks.Muted Gold #C9A14F
BorderCards, inputs, and component borders.Muted Gold #C9A14F
DividerSubtle separators between content.Muted Gold #C9A14F
OutlineFocus rings and emphasis outlines.Muted Gold #C9A14F

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

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

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
: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;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
: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;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "golden-amber": "#A1590E",
    "burnt-sienna": "#7B3B0A",
    "rich-black": "#0B0B0B",
    "muted-gold": "#C9A14F",
    "smoky-gray": "#4C4C4C",
    "pure-white": "#FFFFFF",
    "ivory-white": "#F5F5F5",
    "charcoal-black": "#1A1A1A"
}
Press Space to load new palette