Azure Blue#0077FF
Coral#FF6F61
Warm Gray#A59E8E
Teal#4B8A8B
Beige#E8D9CE
Palette direction

Blue Coral Gray Color Palette

This palette features vibrant blues balanced by soft coral and subtle warm gray accents, creating a dynamic yet approachable identity. The combination offers strong visual hierarchy and ensures usability with high contrast neutrals.

Split ComplementaryTechbluecoralgraytech
palette-preview.example
Tech color direction

Blue Coral Gray Color Palette

This palette features vibrant blues balanced by soft coral and subtle warm gray accents, creating a dynamic yet approachable identity. The combination offers strong visual hierarchy and ensures usability with high contrast neutrals.

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 #2D2D2Don Warm Gray #A59E8E5.2:1 Strong
Logo Charcoal #2D2D2Don Coral #FF6F615.0:1 Strong
Logo Charcoal #2D2D2Don Ivory #FFFFFF13.8:1 Excellent
Logo Ivory #FFFFFFon Charcoal #2D2D2D13.8:1 Excellent
Icon color
BackgroundAzure Blue#0077FFTextIvory#FFFFFF
Primary Button4.13:1
Large text

Best for the main action users should notice first.

BackgroundCoral#FF6F61TextCharcoal#2D2D2D
Secondary Button5.05:1
AA

Useful for softer choices and secondary paths.

BackgroundBeige#E8D9CETextAzure Blue#0077FF
Outlined Button3.00:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundBeige#E8D9CETextAzure Blue#0077FF
Text Button3.00:1
Low

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

Palette composition8 colorsSplit Complementary color relationship
9:41Blue Coral Gray 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.

CBlue Coral Gray Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors harmonize through a split complementary scheme, using a vibrant blue base complemented by energetic coral and soft warm gray to create visual interest and brand recognition.

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.Azure Blue #0077FF
HeadlineUsed for main titles and key messages.Coral #FF6F61
LinkUsed for links and interactive text.Azure Blue #0077FF

Buttons

Primary Button
BackgroundAzure Blue #0077FF
TextIvory #FFFFFF
Secondary Button
BackgroundCoral #FF6F61
TextCharcoal #2D2D2D
Outlined Button
BackgroundAzure Blue #0077FF
TextAzure Blue #0077FF

Interface

TextDefault readable body text.Charcoal #2D2D2D
Bg LightLight page or section background.Beige #E8D9CE
Bg DarkDark page or section background.Ivory #FFFFFF
IconSmall interface icons and marks.Teal #4B8A8B
BorderCards, inputs, and component borders.Teal #4B8A8B
DividerSubtle separators between content.Teal #4B8A8B
OutlineFocus rings and emphasis outlines.Teal #4B8A8B

Palette Colors

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

Main (Brand) Colors

The main colors harmonize through a split complementary scheme, using a vibrant blue base complemented by energetic coral and soft warm gray to create visual interest and brand recognition.

PrimaryAzure Blue

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

Azure Blue is a bright and engaging color that conveys trust and modern energy, perfect for the brand's primary interface elements and logo.

HEX#0077FF
RGB0, 119, 255
HSL212, 100, 50
CMYK100, 53, 0, 0
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds warmth and approachability to balance Azure Blue, lending vibrancy to secondary buttons and headlines.

HEX#FF6F61
RGB255, 111, 97
HSL5, 100, 69
CMYK0, 56, 62, 0
TertiaryWarm Gray

Warm Gray offers a gentle, muted tone that complements the vibrant main colors by providing subtlety and softness in backgrounds or accents.

HEX#A59E8E
RGB165, 158, 142
HSL42, 11, 60
CMYK0, 4, 14, 35

Support Colors

The support colors quietly reinforce the main palette with a muted teal and soft beige to add depth and versatility without competing for attention.

Teal

RolesIcon, Border, Divider, Outline

Teal extends the palette with a calming shade that harmonizes with Azure Blue while lending balance to accents and interface elements.

HEX#4B8A8B
RGB75, 138, 139
HSL181, 30, 42
CMYK46, 1, 0, 45
Beige

RolesBg Light

Beige provides a light, neutral background that enhances readability and contrasts softly with the stronger main colors.

HEX#E8D9CE
RGB232, 217, 206
HSL25, 36, 86
CMYK0, 6, 11, 9

Neutral Colors

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

Ivory

RolesBg Dark, Btn Primary 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
Charcoal

RolesText, Btn Secondary Text

HEX#2D2D2D
RGB45, 45, 45
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-azure-blue: #0077FF;
  --color-coral: #FF6F61;
  --color-warm-gray: #A59E8E;
  --color-teal: #4B8A8B;
  --color-beige: #E8D9CE;
  --color-ivory: #FFFFFF;
  --color-alabaster: #F5F5F5;
  --color-charcoal: #2D2D2D;
}

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: #0077FF;
  --role-link: #0077FF;
  --role-btn-primary-bg: #0077FF;
  --role-btn-outlined-border: #0077FF;
  --role-btn-outlined-text: #0077FF;
  --role-btn-secondary-bg: #FF6F61;
  --role-headline: #FF6F61;
  --role-icon: #4B8A8B;
  --role-border: #4B8A8B;
  --role-divider: #4B8A8B;
  --role-outline: #4B8A8B;
  --role-bg-light: #E8D9CE;
  --role-bg-dark: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-text: #2D2D2D;
  --role-btn-secondary-text: #2D2D2D;
}

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.
{
    "azure-blue": "#0077FF",
    "coral": "#FF6F61",
    "warm-gray": "#A59E8E",
    "teal": "#4B8A8B",
    "beige": "#E8D9CE",
    "ivory": "#FFFFFF",
    "alabaster": "#F5F5F5",
    "charcoal": "#2D2D2D"
}
Press Space to load new palette