Terracotta#B85C38
Steel Blue#7AA9C1
Dark Brown#3F2A17
Peach#E2B59D
Light Steel Blue#A3BBD9
Palette direction

Terracotta Sky Blue Color Palette

This palette is inspired by the warm, earthy terracotta hues contrasted with cool sky blues and grounded by neutral grays and blacks, offering a balanced yet distinctive color system suitable for creative and architectural branding.

ComplementaryCreativeterracottasky blueearthycontrast
palette-preview.example
Creative color direction

Terracotta Sky Blue Color Palette

This palette is inspired by the warm, earthy terracotta hues contrasted with cool sky blues and grounded by neutral grays and blacks, offering a balanced yet distinctive color system suitable for creative and architectural branding.

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 #F6F5F3on Dark Brown #3F2A1712.4:1 Excellent
Logo Charcoal #1A1A1Aon Steel Blue #7AA9C16.9:1 Strong
Logo Charcoal #1A1A1Aon Ivory #F6F5F316.0:1 Excellent
Logo Charcoal #1A1A1Aon Peach #E2B59D9.4:1 Excellent
Icon color
BackgroundTerracotta#B85C38TextIvory#F6F5F3
Primary Button4.17:1
Large text

Best for the main action users should notice first.

BackgroundSteel Blue#7AA9C1TextCharcoal#1A1A1A
Secondary Button6.86:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#F6F5F3TextDark Brown#3F2A17
Outlined Button12.40:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F6F5F3TextSteel Blue#7AA9C1
Text Button2.33:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Terracotta Sky Blue 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.

CTerracotta Sky Blue Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a complementary scheme with warm terracotta tones balanced by cool sky blue, creating a vivid yet harmonious contrast that anchors the palette.

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.Terracotta #B85C38
HeadlineUsed for main titles and key messages.Steel Blue #7AA9C1
LinkUsed for links and interactive text.Steel Blue #7AA9C1

Buttons

Primary Button
BackgroundTerracotta #B85C38
TextIvory #F6F5F3
Secondary Button
BackgroundSteel Blue #7AA9C1
TextCharcoal #1A1A1A
Outlined Button
BackgroundTerracotta #B85C38
TextDark Brown #3F2A17

Interface

TextDefault readable body text.Charcoal #1A1A1A
Bg LightLight page or section background.Ivory #F6F5F3
Bg DarkDark page or section background.Dark Slate #2F2F2F
IconSmall interface icons and marks.Peach #E2B59D
BorderCards, inputs, and component borders.Peach #E2B59D
DividerSubtle separators between content.Peach #E2B59D
OutlineFocus rings and emphasis outlines.Peach #E2B59D

Palette Colors

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

Main (Brand) Colors

The main colors form a complementary scheme with warm terracotta tones balanced by cool sky blue, creating a vivid yet harmonious contrast that anchors the palette.

PrimaryTerracotta

RolesLogo, Btn Primary Bg, Btn Outlined Border

Terracotta provides warmth and approachability, evoking earthy authenticity and grounded creativity.

HEX#B85C38
RGB184, 92, 56
HSL17, 53, 47
CMYK0, 50, 70, 28
SecondarySteel Blue

RolesLink, Btn Secondary Bg, Headline

Steel Blue offers a calm, professional counterpoint with subtle sophistication and trustworthiness.

HEX#7AA9C1
RGB122, 169, 193
HSL200, 36, 62
CMYK37, 12, 0, 24
TertiaryDark Brown

RolesBtn Outlined Text

Dark Brown grounds the palette with depth and enhances readability in outlined button text.

HEX#3F2A17
RGB63, 42, 23
HSL29, 47, 17
CMYK0, 33, 63, 75

Support Colors

Support colors subtly extend the main palette with softer, muted tones that complement and balance the strong warm and cool hues without competing for attention.

Peach

RolesIcon, Border, Divider, Outline

Peach dims the stronger terracotta with a lighter, gentle warm tone, perfect for subtle UI elements.

HEX#E2B59D
RGB226, 181, 157
HSL21, 54, 75
CMYK0, 20, 31, 11
Light Steel Blue

Light Steel Blue supports the main blue with a softer tint, maintaining coolness with less intensity.

HEX#A3BBD9
RGB163, 187, 217
HSL213, 42, 75
CMYK25, 14, 0, 15

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text

HEX#F6F5F3
RGB246, 245, 243
HSL40, 14, 96
CMYK0, 0, 1, 4
Charcoal

RolesText, Btn Secondary Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90
Dark Slate

RolesBg Dark

HEX#2F2F2F
RGB47, 47, 47
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-terracotta: #B85C38;
  --color-steel-blue: #7AA9C1;
  --color-dark-brown: #3F2A17;
  --color-peach: #E2B59D;
  --color-light-steel-blue: #A3BBD9;
  --color-ivory: #F6F5F3;
  --color-charcoal: #1A1A1A;
  --color-dark-slate: #2F2F2F;
}

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: #B85C38;
  --role-btn-primary-bg: #B85C38;
  --role-btn-outlined-border: #B85C38;
  --role-link: #7AA9C1;
  --role-btn-secondary-bg: #7AA9C1;
  --role-headline: #7AA9C1;
  --role-btn-outlined-text: #3F2A17;
  --role-icon: #E2B59D;
  --role-border: #E2B59D;
  --role-divider: #E2B59D;
  --role-outline: #E2B59D;
  --role-bg-light: #F6F5F3;
  --role-btn-primary-text: #F6F5F3;
  --role-text: #1A1A1A;
  --role-btn-secondary-text: #1A1A1A;
  --role-bg-dark: #2F2F2F;
}

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.
{
    "terracotta": "#B85C38",
    "steel-blue": "#7AA9C1",
    "dark-brown": "#3F2A17",
    "peach": "#E2B59D",
    "light-steel-blue": "#A3BBD9",
    "ivory": "#F6F5F3",
    "charcoal": "#1A1A1A",
    "dark-slate": "#2F2F2F"
}
Press Space to load new palette