Goldenrod#F2AA05
Black#000000
Crimson Red#D72631
Light Amber#EEC863
Deep Maroon#8B1A1A
Palette direction

Golden Black Red Color Palette

This palette draws from the warm golden background, the striking black owl shape, and the vivid red detailing in the logo to create a confident and recognizable brand color system. The main colors balance strong visual impact with approachable vibrancy, while support accents enhance depth without overpowering.

AnalogousCreativegolden yellowblackredowl
palette-preview.example
Creative color direction

Golden Black Red Color Palette

This palette draws from the warm golden background, the striking black owl shape, and the vivid red detailing in the logo to create a confident and recognizable brand color system. The main colors balance strong visual impact with approachable vibrancy, while support accents enhance depth without overpowering.

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 Black #00000021.0:1 Excellent
Logo Black #000000on Goldenrod #F2AA0510.5:1 Excellent
Logo White #FFFFFFon Crimson Red #D726315.0:1 Strong
Logo Black #000000on White #FFFFFF21.0:1 Excellent
Icon color
BackgroundGoldenrod#F2AA05TextJet Black#1A1A1A
Primary Button8.72:1
AAA

Best for the main action users should notice first.

BackgroundCrimson Red#D72631TextWhite#FFFFFF
Secondary Button4.99:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCrimson Red#D72631
Outlined Button4.99:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextGoldenrod#F2AA05
Text Button1.99:1
Low

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

Palette composition8 colorsAnalogous color relationship
9:41Golden Black Red Color Palette Color role balance
Analogous 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 Black Red Color PaletteCreative 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.Goldenrod #F2AA05
HeadlineUsed for main titles and key messages.Crimson Red #D72631
LinkUsed for links and interactive text.Goldenrod #F2AA05

Buttons

Primary Button
BackgroundGoldenrod #F2AA05
TextJet Black #1A1A1A
Secondary Button
BackgroundCrimson Red #D72631
TextWhite #FFFFFF
Outlined Button
BackgroundCrimson Red #D72631
TextCrimson Red #D72631

Interface

TextDefault readable body text.Jet Black #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Black #000000
IconSmall interface icons and marks.Light Amber #EEC863
BorderCards, inputs, and component borders.Light Amber #EEC863
DividerSubtle separators between content.Light Amber #EEC863
OutlineFocus rings and emphasis outlines.Light Amber #EEC863

Palette Colors

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

Main (Brand) Colors

The palette unites a warm golden yellow, deep black, and a vivid red in a powerful triadic harmony that ensures brand recognition and striking contrast.

PrimaryGoldenrod

RolesLogo, Btn Primary Bg, Link

Goldenrod conveys energy, optimism, and warmth, serving as the vibrant brand foundation.

HEX#F2AA05
RGB242, 170, 5
HSL42, 96, 48
CMYK0, 30, 98, 5
PrimaryBlack

RolesBg Dark

Black provides boldness, contrast, and sophistication, grounding the palette with clarity.

HEX#000000
RGB0, 0, 0
HSL0, 0, 0
CMYK0, 0, 0, 100
PrimaryCrimson Red

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Crimson Red adds passion and attention-grabbing vibrancy to highlight key brand elements.

HEX#D72631
RGB215, 38, 49
HSL356, 70, 50
CMYK0, 82, 77, 16

Support Colors

The support colors are softer, muted tones that extend the palette with subtle warmth and help balance the intense main colors for usability.

Light Amber

RolesIcon, Border, Divider, Outline

Light Amber offers a gentle warm highlight that complements Goldenrod while remaining visually subordinate.

HEX#EEC863
RGB238, 200, 99
HSL44, 80, 66
CMYK0, 16, 58, 7
Deep Maroon

Deep Maroon provides a muted contrast to Crimson Red, adding balance and depth without drawing focus.

HEX#8B1A1A
RGB139, 26, 26
HSL0, 68, 32
CMYK0, 81, 81, 45

Neutral Colors

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

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Alabaster
HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Jet Black

RolesText, Btn Primary Text

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-goldenrod: #F2AA05;
  --color-black: #000000;
  --color-crimson-red: #D72631;
  --color-light-amber: #EEC863;
  --color-deep-maroon: #8B1A1A;
  --color-white: #FFFFFF;
  --color-alabaster: #F5F5F5;
  --color-jet-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: #F2AA05;
  --role-btn-primary-bg: #F2AA05;
  --role-link: #F2AA05;
  --role-bg-dark: #000000;
  --role-btn-secondary-bg: #D72631;
  --role-btn-outlined-border: #D72631;
  --role-btn-outlined-text: #D72631;
  --role-headline: #D72631;
  --role-icon: #EEC863;
  --role-border: #EEC863;
  --role-divider: #EEC863;
  --role-outline: #EEC863;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-text: #1A1A1A;
  --role-btn-primary-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.
{
    "goldenrod": "#F2AA05",
    "black": "#000000",
    "crimson-red": "#D72631",
    "light-amber": "#EEC863",
    "deep-maroon": "#8B1A1A",
    "white": "#FFFFFF",
    "alabaster": "#F5F5F5",
    "jet-black": "#1A1A1A"
}
Press Space to load new palette