Saddle Brown#6B4423
Crimson#B3413F
Cadet Gray#9FA6A9
Khaki Brown#A57C5B
Muted Aubergine#8A5D7B
Palette direction

Eclectic Vibrant Earthy Color Palette

This color palette reflects the vibrant and eclectic energy of the image, combining rich earthy browns and warm reds with cool metallics and soft pastels. The main colors provide a dynamic and recognizable foundation that balances warmth and coolness, while the support colors add depth and subtle contrast. Neutrals ground the palette for practical usability in text, backgrounds, and interface elements, making it versatile yet distinctive.

AnalogousCreativevibranteclecticearthymetallic
palette-preview.example
Creative color direction

Eclectic Vibrant Earthy Color Palette

This color palette reflects the vibrant and eclectic energy of the image, combining rich earthy browns and warm reds with cool metallics and soft pastels. The main colors provide a dynamic and recognizable foundation that balances warmth and coolness, while the support colors add depth and subtle contrast. Neutrals ground the palette for practical usability in text, backgrounds, and interface elements, making it versatile yet distinctive.

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 Ivory #F3F2F1on Saddle Brown #6B44237.6:1 Excellent
Logo Charcoal #1B1B1Bon Cadet Gray #9FA6A97.0:1 Strong
Logo Ivory #F3F2F1on Crimson #B3413F5.0:1 Strong
Logo Charcoal #1B1B1Bon Ivory #F3F2F115.4:1 Excellent
Icon color
BackgroundSaddle Brown#6B4423TextIvory#F3F2F1
Primary Button7.58:1
AAA

Best for the main action users should notice first.

BackgroundCrimson#B3413FTextIvory#F3F2F1
Secondary Button5.02:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#F3F2F1TextSaddle Brown#6B4423
Outlined Button7.58:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F3F2F1TextSaddle Brown#6B4423
Text Button7.58:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Eclectic Vibrant Earthy 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.

CEclectic Vibrant Earthy Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine warm earthy browns and reds with a cool metallic silver, creating a harmonious and visually engaging foundation that is both vibrant and grounded.

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.Saddle Brown #6B4423
HeadlineUsed for main titles and key messages.Cadet Gray #9FA6A9
LinkUsed for links and interactive text.Saddle Brown #6B4423

Buttons

Primary Button
BackgroundSaddle Brown #6B4423
TextIvory #F3F2F1
Secondary Button
BackgroundCrimson #B3413F
TextIvory #F3F2F1
Outlined Button
BackgroundSaddle Brown #6B4423
TextSaddle Brown #6B4423

Interface

TextDefault readable body text.Charcoal #1B1B1B
Bg LightLight page or section background.Ivory #F3F2F1
Bg DarkDark page or section background.Slate Gray #373737
IconSmall interface icons and marks.Khaki Brown #A57C5B
BorderCards, inputs, and component borders.Khaki Brown #A57C5B
DividerSubtle separators between content.Khaki Brown #A57C5B
OutlineFocus rings and emphasis outlines.Khaki Brown #A57C5B

Palette Colors

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

Main (Brand) Colors

The main colors combine warm earthy browns and reds with a cool metallic silver, creating a harmonious and visually engaging foundation that is both vibrant and grounded.

PrimarySaddle Brown

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

A rich, warm brown that anchors the palette with grounded, natural energy and sophistication.

HEX#6B4423
RGB107, 68, 35
HSL28, 51, 28
CMYK0, 36, 67, 58
SecondaryCrimson

RolesBtn Secondary Bg

A bold crimson red that introduces vibrancy and passion, creating distinct contrast for secondary actions.

HEX#B3413F
RGB179, 65, 63
HSL1, 48, 47
CMYK0, 64, 65, 30
TertiaryCadet Gray

RolesHeadline

A cool, muted metallic shade that adds a modern, sleek touch complementing the warmer main colors.

HEX#9FA6A9
RGB159, 166, 169
HSL198, 5, 64
CMYK6, 2, 0, 34

Support Colors

Support colors provide subtle accents with balanced tones that extend the main colors and enhance interface clarity without overpowering the palette.

Khaki Brown

RolesIcon, Border, Divider, Outline

A soft khaki brown that complements the warm tones while supporting textural depth.

HEX#A57C5B
RGB165, 124, 91
HSL27, 29, 50
CMYK0, 25, 45, 35
Muted Aubergine

A muted purplish tone that balances the palette by adding a touch of cool sophistication.

HEX#8A5D7B
RGB138, 93, 123
HSL320, 19, 45
CMYK0, 33, 11, 46

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F3F2F1
RGB243, 242, 241
HSL30, 8, 95
CMYK0, 0, 1, 5
Charcoal

RolesText

HEX#1B1B1B
RGB27, 27, 27
HSL0, 0, 11
CMYK0, 0, 0, 89
Slate Gray

RolesBg Dark

HEX#373737
RGB55, 55, 55
HSL0, 0, 22
CMYK0, 0, 0, 78

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-saddle-brown: #6B4423;
  --color-crimson: #B3413F;
  --color-cadet-gray: #9FA6A9;
  --color-khaki-brown: #A57C5B;
  --color-muted-aubergine: #8A5D7B;
  --color-ivory: #F3F2F1;
  --color-charcoal: #1B1B1B;
  --color-slate-gray: #373737;
}

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: #6B4423;
  --role-link: #6B4423;
  --role-btn-primary-bg: #6B4423;
  --role-btn-outlined-border: #6B4423;
  --role-btn-outlined-text: #6B4423;
  --role-btn-secondary-bg: #B3413F;
  --role-headline: #9FA6A9;
  --role-icon: #A57C5B;
  --role-border: #A57C5B;
  --role-divider: #A57C5B;
  --role-outline: #A57C5B;
  --role-bg-light: #F3F2F1;
  --role-btn-primary-text: #F3F2F1;
  --role-btn-secondary-text: #F3F2F1;
  --role-text: #1B1B1B;
  --role-bg-dark: #373737;
}

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.
{
    "saddle-brown": "#6B4423",
    "crimson": "#B3413F",
    "cadet-gray": "#9FA6A9",
    "khaki-brown": "#A57C5B",
    "muted-aubergine": "#8A5D7B",
    "ivory": "#F3F2F1",
    "charcoal": "#1B1B1B",
    "slate-gray": "#373737"
}
Press Space to load new palette