Goldenrod#D9A72E
Light Gold#F0D67B
Charcoal#2E2E2E
Alabaster#F7F7F7
Silver Gray#B3B3B3
Palette direction

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
palette-preview.example
None color direction

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.

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 White #FFFFFFon Charcoal #2E2E2E13.6:1 Excellent
Logo Charcoal #2E2E2Eon Light Gold #F0D67B9.4:1 Excellent
Logo Charcoal #2E2E2Eon Goldenrod #D9A72E6.2:1 Strong
Logo Charcoal #2E2E2Eon White #FFFFFF13.6:1 Excellent
Icon color
BackgroundGoldenrod#D9A72ETextCharcoal#2E2E2E
Primary Button6.15:1
AA

Best for the main action users should notice first.

BackgroundLight Gold#F0D67BTextCharcoal#2E2E2E
Secondary Button9.45:1
AAA

Useful for softer choices and secondary paths.

BackgroundAlabaster#F7F7F7TextLight Gold#F0D67B
Outlined Button1.34:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundAlabaster#F7F7F7TextGoldenrod#D9A72E
Text Button2.06:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Golden Premier Painting 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.

CGolden Premier Painting Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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.

Clear roles create a consistent brand experience.

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.Goldenrod #D9A72E
HeadlineUsed for main titles and key messages.Goldenrod #D9A72E
LinkUsed for links and interactive text.Goldenrod #D9A72E

Buttons

Primary Button
BackgroundGoldenrod #D9A72E
TextCharcoal #2E2E2E
Secondary Button
BackgroundLight Gold #F0D67B
TextCharcoal #2E2E2E
Outlined Button
BackgroundLight Gold #F0D67B
TextLight Gold #F0D67B

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.Alabaster #F7F7F7
Bg DarkDark page or section background.Charcoal #2E2E2E
IconSmall interface icons and marks.Silver Gray #B3B3B3
BorderCards, inputs, and component borders.Silver Gray #B3B3B3
DividerSubtle separators between content.Silver Gray #B3B3B3
OutlineFocus rings and emphasis outlines.Silver Gray #B3B3B3

Palette Colors

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

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

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-goldenrod: #D9A72E;
  --color-light-gold: #F0D67B;
  --color-charcoal: #2E2E2E;
  --color-alabaster: #F7F7F7;
  --color-silver-gray: #B3B3B3;
  --color-white: #FFFFFF;
}

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: #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;
}

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.
{
    "goldenrod": "#D9A72E",
    "light-gold": "#F0D67B",
    "charcoal": "#2E2E2E",
    "alabaster": "#F7F7F7",
    "silver-gray": "#B3B3B3",
    "white": "#FFFFFF"
}
Press Space to load new palette