Cobalt Blue#007ACC
Burnt Orange#D96E1F
Rust Red#B33A0A
Sage Brown#A28556
Sand Yellow#E9C984
Palette direction

Southwestern Vibrant Warm Color Palette

This palette is inspired by the vibrant and warm hues of a sunlit southwestern scene, combining earthy reds, golden yellows, and bright blues with subtle neutral tones to convey warmth, vibrancy, and grounded comfort. The palette captures the dynamic contrast between the clear blue sky, rustic orange walls, and natural plant textures, making it versatile for brands that want to evoke energy and authenticity.

ComplementaryCreativesouthwesternvibrantwarmearthy
palette-preview.example
Creative color direction

Southwestern Vibrant Warm Color Palette

This palette is inspired by the vibrant and warm hues of a sunlit southwestern scene, combining earthy reds, golden yellows, and bright blues with subtle neutral tones to convey warmth, vibrancy, and grounded comfort. The palette captures the dynamic contrast between the clear blue sky, rustic orange walls, and natural plant textures, making it versatile for brands that want to evoke energy and authenticity.

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 #FAF9F6on Rust Red #B33A0A5.7:1 Strong
Logo Charcoal #121212on Burnt Orange #D96E1F5.5:1 Strong
Logo Ivory #FAF9F6on Charcoal #12121217.8:1 Excellent
Logo Charcoal #121212on Ivory #FAF9F617.8:1 Excellent
Icon color
BackgroundCobalt Blue#007ACCTextIvory#FAF9F6
Primary Button4.28:1
Large text

Best for the main action users should notice first.

BackgroundBurnt Orange#D96E1FTextCharcoal#121212
Secondary Button5.53:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#FAF9F6TextBurnt Orange#D96E1F
Outlined Button3.22:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FAF9F6TextCobalt Blue#007ACC
Text Button4.28:1
Large text

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

Palette composition8 colorsComplementary color relationship
9:41Southwestern Vibrant Warm Color Palette Color role balance
Complementary 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.

CSouthwestern Vibrant Warm Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors balance a vibrant blue with warm oranges and reds, creating eye-catching contrast and energy reminiscent of a southwestern landscape under a bright sky.

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.Cobalt Blue #007ACC
HeadlineUsed for main titles and key messages.Rust Red #B33A0A
LinkUsed for links and interactive text.Cobalt Blue #007ACC

Buttons

Primary Button
BackgroundCobalt Blue #007ACC
TextIvory #FAF9F6
Secondary Button
BackgroundBurnt Orange #D96E1F
TextCharcoal #121212
Outlined Button
BackgroundBurnt Orange #D96E1F
TextBurnt Orange #D96E1F

Interface

TextDefault readable body text.Charcoal #121212
Bg LightLight page or section background.Ivory #FAF9F6
Bg DarkDark page or section background.Dark Slate #292929
IconSmall interface icons and marks.Sage Brown #A28556
BorderCards, inputs, and component borders.Sage Brown #A28556
DividerSubtle separators between content.Sage Brown #A28556
OutlineFocus rings and emphasis outlines.Sage Brown #A28556

Palette Colors

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

Main (Brand) Colors

The main colors balance a vibrant blue with warm oranges and reds, creating eye-catching contrast and energy reminiscent of a southwestern landscape under a bright sky.

PrimaryCobalt Blue

RolesLogo, Link, Btn Primary Bg

Cobalt Blue reflects the clear sky, bringing freshness, trust, and energy to the brand identity.

HEX#007ACC
RGB0, 122, 204
HSL204, 100, 40
CMYK100, 40, 0, 20
SecondaryBurnt Orange

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Burnt Orange embodies warmth and engaging vibrancy, adding a grounded and welcoming appeal.

HEX#D96E1F
RGB217, 110, 31
HSL25, 75, 49
CMYK0, 49, 86, 15
TertiaryRust Red

RolesHeadline

Rust Red adds depth and intensity, reinforcing passion and strength within the visual hierarchy.

HEX#B33A0A
RGB179, 58, 10
HSL17, 89, 37
CMYK0, 68, 94, 30

Support Colors

The support colors complement the main palette with natural and muted tones, extending warmth and providing subtle visual balance without competing with the primary hues.

Sage Brown

RolesIcon, Border, Divider, Outline

Sage Brown introduces an earthy subdued tone that balances and grounds the stronger main colors.

HEX#A28556
RGB162, 133, 86
HSL37, 31, 49
CMYK0, 18, 47, 36
Sand Yellow

Sand Yellow extends the palette with a soft golden accent, enhancing warmth and light in details.

HEX#E9C984
RGB233, 201, 132
HSL41, 70, 72
CMYK0, 14, 43, 9

Neutral Colors

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

Charcoal

RolesText, Btn Secondary Text

HEX#121212
RGB18, 18, 18
HSL0, 0, 7
CMYK0, 0, 0, 93
Ivory

RolesBg Light, Btn Primary Text

HEX#FAF9F6
RGB250, 249, 246
HSL45, 29, 97
CMYK0, 0, 2, 2
Dark Slate

RolesBg Dark

HEX#292929
RGB41, 41, 41
HSL0, 0, 16
CMYK0, 0, 0, 84

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-cobalt-blue: #007ACC;
  --color-burnt-orange: #D96E1F;
  --color-rust-red: #B33A0A;
  --color-sage-brown: #A28556;
  --color-sand-yellow: #E9C984;
  --color-charcoal: #121212;
  --color-ivory: #FAF9F6;
  --color-dark-slate: #292929;
}

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: #007ACC;
  --role-link: #007ACC;
  --role-btn-primary-bg: #007ACC;
  --role-btn-secondary-bg: #D96E1F;
  --role-btn-outlined-border: #D96E1F;
  --role-btn-outlined-text: #D96E1F;
  --role-headline: #B33A0A;
  --role-icon: #A28556;
  --role-border: #A28556;
  --role-divider: #A28556;
  --role-outline: #A28556;
  --role-text: #121212;
  --role-btn-secondary-text: #121212;
  --role-bg-light: #FAF9F6;
  --role-btn-primary-text: #FAF9F6;
  --role-bg-dark: #292929;
}

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.
{
    "cobalt-blue": "#007ACC",
    "burnt-orange": "#D96E1F",
    "rust-red": "#B33A0A",
    "sage-brown": "#A28556",
    "sand-yellow": "#E9C984",
    "charcoal": "#121212",
    "ivory": "#FAF9F6",
    "dark-slate": "#292929"
}
Press Space to load new palette