Azure#1E90FF
Coral#FF6B6B
Seafoam#5BC0BE
Pale Gray#D9E2EC
Palette direction

Azure Coral Minimal Color Palette

This minimal bright palette pairs crisp Azure with vivid Coral to create a clean system that feels modern, energetic, and easy to scan. The two main hues stay simple enough for a minimal brand while still giving the interface a lively visual rhythm.

ComplementaryNoneminimalbrightazurecoral
palette-preview.example
None color direction

Azure Coral Minimal Color Palette

This minimal bright palette pairs crisp Azure with vivid Coral to create a clean system that feels modern, energetic, and easy to scan. The two main hues stay simple enough for a minimal brand while still giving the interface a lively visual rhythm.

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 #111827on Coral #FF6B6B6.4:1 Strong
Logo Charcoal #111827on Azure #1E90FF5.5:1 Strong
Logo Charcoal #111827on White #FFFFFF17.7:1 Excellent
Logo White #FFFFFFon Charcoal #11182717.7:1 Excellent
Icon color
BackgroundAzure#1E90FFTextCharcoal#111827
Primary Button5.48:1
AA

Best for the main action users should notice first.

BackgroundCoral#FF6B6BTextCharcoal#111827
Secondary Button6.39:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCoral#FF6B6B
Outlined Button2.78:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextAzure#1E90FF
Text Button3.24:1
Large text

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

Palette composition7 colorsComplementary color relationship
9:41Azure Coral Minimal 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.

CAzure Coral Minimal Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Azure and Coral form a high-contrast complementary pair that stays minimal because the palette uses only two vivid hues with clear roles. The combination feels fresh and recognizable without adding visual clutter.

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 #1E90FF
HeadlineUsed for main titles and key messages.Azure #1E90FF
LinkUsed for links and interactive text.Azure #1E90FF

Buttons

Primary Button
BackgroundAzure #1E90FF
TextCharcoal #111827
Secondary Button
BackgroundCoral #FF6B6B
TextCharcoal #111827
Outlined Button
BackgroundCoral #FF6B6B
TextCoral #FF6B6B

Interface

TextDefault readable body text.Charcoal #111827
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #111827
IconSmall interface icons and marks.Seafoam #5BC0BE
BorderCards, inputs, and component borders.Pale Gray #D9E2EC
DividerSubtle separators between content.Pale Gray #D9E2EC
OutlineFocus rings and emphasis outlines.Pale Gray #D9E2EC

Palette Colors

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

Main (Brand) Colors

Azure and Coral form a high-contrast complementary pair that stays minimal because the palette uses only two vivid hues with clear roles. The combination feels fresh and recognizable without adding visual clutter.

PrimaryAzure

RolesLogo, Link, Btn Primary Bg, Headline

Azure brings clarity, openness, and a crisp digital feel that supports the palette's minimal structure.

HEX#1E90FF
RGB30, 144, 255
HSL210, 100, 56
CMYK88, 44, 0, 0
SecondaryCoral

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Coral adds warmth and energy, giving the system a bright accent that keeps the brand approachable and active.

HEX#FF6B6B
RGB255, 107, 107
HSL0, 100, 71
CMYK0, 58, 58, 0

Support Colors

Soft support hues extend the palette with restrained utility while staying visually subordinate to the two main colors.

Seafoam

RolesIcon

Seafoam softens the interface and gives icons a calm, friendly accent that does not compete with the main pair.

HEX#5BC0BE
RGB91, 192, 190
HSL179, 44, 55
CMYK53, 0, 1, 25
Pale Gray

RolesBorder, Divider, Outline

Pale Gray provides subtle structure for lines and boundaries while keeping the layout light and minimal.

HEX#D9E2EC
RGB217, 226, 236
HSL212, 33, 89
CMYK8, 4, 0, 7

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
Snow
HEX#F5F7FA
RGB245, 247, 250
HSL216, 33, 97
CMYK2, 1, 0, 2
Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#111827
RGB17, 24, 39
HSL221, 39, 11
CMYK56, 38, 0, 85

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: #1E90FF;
  --color-coral: #FF6B6B;
  --color-seafoam: #5BC0BE;
  --color-pale-gray: #D9E2EC;
  --color-white: #FFFFFF;
  --color-snow: #F5F7FA;
  --color-charcoal: #111827;
}

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: #1E90FF;
  --role-link: #1E90FF;
  --role-btn-primary-bg: #1E90FF;
  --role-headline: #1E90FF;
  --role-btn-secondary-bg: #FF6B6B;
  --role-btn-outlined-border: #FF6B6B;
  --role-btn-outlined-text: #FF6B6B;
  --role-icon: #5BC0BE;
  --role-border: #D9E2EC;
  --role-divider: #D9E2EC;
  --role-outline: #D9E2EC;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #111827;
  --role-text: #111827;
  --role-btn-primary-text: #111827;
  --role-btn-secondary-text: #111827;
}

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": "#1E90FF",
    "coral": "#FF6B6B",
    "seafoam": "#5BC0BE",
    "pale-gray": "#D9E2EC",
    "white": "#FFFFFF",
    "snow": "#F5F7FA",
    "charcoal": "#111827"
}
Press Space to load new palette