Tangerine#E44C2B
Amber#FF9B21
Steel Blue#407FAF
Burnt Sienna#CB5A44
Turquoise#6AC6C6
Palette direction

Vibrant Orange Blue Color Palette

This palette draws inspiration from the vibrant layers of orange and red clouds contrasted against the calm blue sky, balanced with subtle yellow and turquoise accents. The main colors create a dynamic and recognizable system featuring warm energetic hues paired with cool calming tones, ideal for brands seeking both vibrancy and balance.

Split ComplementaryCreativevibrantorangebluecreative
palette-preview.example
Creative color direction

Vibrant Orange Blue Color Palette

This palette draws inspiration from the vibrant layers of orange and red clouds contrasted against the calm blue sky, balanced with subtle yellow and turquoise accents. The main colors create a dynamic and recognizable system featuring warm energetic hues paired with cool calming tones, ideal for brands seeking both vibrancy and balance.

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 Charcoal #222222on Amber #FF9B217.5:1 Excellent
Logo Charcoal #222222on White #FFFFFF15.9:1 Excellent
Logo White #FFFFFFon Charcoal #22222215.9:1 Excellent
Logo Charcoal #222222on Turquoise #6AC6C68.0:1 Excellent
Icon color
BackgroundTangerine#E44C2BTextCharcoal#222222
Primary Button4.07:1
Large text

Best for the main action users should notice first.

BackgroundAmber#FF9B21TextCharcoal#222222
Secondary Button7.55:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSteel Blue#407FAF
Outlined Button4.31:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextAmber#FF9B21
Text Button2.11:1
Low

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

Palette composition8 colorsSplit Complementary color relationship
9:41Vibrant Orange Blue Color Palette Color role balance
Split 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.

CVibrant Orange Blue 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.Tangerine #E44C2B
HeadlineUsed for main titles and key messages.Amber #FF9B21
LinkUsed for links and interactive text.Amber #FF9B21

Buttons

Primary Button
BackgroundTangerine #E44C2B
TextCharcoal #222222
Secondary Button
BackgroundAmber #FF9B21
TextCharcoal #222222
Outlined Button
BackgroundTangerine #E44C2B
TextSteel Blue #407FAF

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Bright Gray #F4F4F4
IconSmall interface icons and marks.Burnt Sienna #CB5A44
BorderCards, inputs, and component borders.Burnt Sienna #CB5A44
DividerSubtle separators between content.Burnt Sienna #CB5A44
OutlineFocus rings and emphasis outlines.Burnt Sienna #CB5A44

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 oranges and reds with a cool blue, creating a bold complementary palette that balances energy and calmness effectively.

PrimaryTangerine

RolesLogo, Btn Primary Bg, Btn Outlined Border

Tangerine brings energetic warmth and vibrancy, helping the brand stand out with bold confidence.

HEX#E44C2B
RGB228, 76, 43
HSL11, 77, 53
CMYK0, 67, 81, 11
SecondaryAmber

RolesLink, Btn Secondary Bg, Headline

Amber adds bright optimism and complements the orange with a sunny, uplifting tone that enhances visibility.

HEX#FF9B21
RGB255, 155, 33
HSL33, 100, 56
CMYK0, 39, 87, 0
TertiarySteel Blue

RolesBtn Outlined Text

Steel Blue offers a calming contrast that cools the palette, supporting readability and a sense of stability.

HEX#407FAF
RGB64, 127, 175
HSL206, 46, 47
CMYK63, 27, 0, 31

Support Colors

Support colors soften and enrich the palette with muted shades of red and turquoise, providing accents that reinforce warmth and balance without overwhelming the main colors.

Burnt Sienna

RolesIcon, Border, Divider, Outline

Burnt Sienna deepens the warm spectrum, adding depth and complementing the Tangerine and Amber tones.

HEX#CB5A44
RGB203, 90, 68
HSL10, 56, 53
CMYK0, 56, 67, 20
Turquoise

Turquoise introduces a gentle coolness that enhances Steel Blue, balancing the warm main colors with a fresh accent.

HEX#6AC6C6
RGB106, 198, 198
HSL180, 45, 60
CMYK46, 0, 0, 22

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Bright Gray

RolesBg Dark

HEX#F4F4F4
RGB244, 244, 244
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

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-tangerine: #E44C2B;
  --color-amber: #FF9B21;
  --color-steel-blue: #407FAF;
  --color-burnt-sienna: #CB5A44;
  --color-turquoise: #6AC6C6;
  --color-white: #FFFFFF;
  --color-bright-gray: #F4F4F4;
  --color-charcoal: #222222;
}

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: #E44C2B;
  --role-btn-primary-bg: #E44C2B;
  --role-btn-outlined-border: #E44C2B;
  --role-link: #FF9B21;
  --role-btn-secondary-bg: #FF9B21;
  --role-headline: #FF9B21;
  --role-btn-outlined-text: #407FAF;
  --role-icon: #CB5A44;
  --role-border: #CB5A44;
  --role-divider: #CB5A44;
  --role-outline: #CB5A44;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F4F4F4;
  --role-text: #222222;
  --role-btn-primary-text: #222222;
  --role-btn-secondary-text: #222222;
}

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.
{
    "tangerine": "#E44C2B",
    "amber": "#FF9B21",
    "steel-blue": "#407FAF",
    "burnt-sienna": "#CB5A44",
    "turquoise": "#6AC6C6",
    "white": "#FFFFFF",
    "bright-gray": "#F4F4F4",
    "charcoal": "#222222"
}
Press Space to load new palette