Royal Blue#2945FF
Coral#FF6B61
Sky Blue#7FBFFF
Pale Cornflower#A3BFFF
Palette direction

Royal Blue Coral Color Palette

This palette draws inspiration from the vibrant royal blue in the image, complemented by soft sky blue and warm coral for accents, paired with balanced neutrals to ensure readability and versatility across digital and print mediums.

Split ComplementaryCreativeroyal bluecoralsky bluecreative
palette-preview.example
Creative color direction

Royal Blue Coral Color Palette

This palette draws inspiration from the vibrant royal blue in the image, complemented by soft sky blue and warm coral for accents, paired with balanced neutrals to ensure readability and versatility across digital and print mediums.

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 #1A1A1Aon Sky Blue #7FBFFF8.9:1 Excellent
Logo Charcoal #1A1A1Aon Coral #FF6B616.2:1 Strong
Logo White #FFFFFFon Royal Blue #2945FF6.2:1 Strong
Logo Charcoal #1A1A1Aon White #FFFFFF17.4:1 Excellent
Icon color
BackgroundRoyal Blue#2945FFTextWhite#FFFFFF
Primary Button6.20:1
AA

Best for the main action users should notice first.

BackgroundCoral#FF6B61TextCharcoal#1A1A1A
Secondary Button6.24:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSky Blue#7FBFFF
Outlined Button1.94:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextRoyal Blue#2945FF
Text Button6.20:1
AA

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

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

CRoyal Blue Coral Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine dominant royal blue with bright coral and a calm sky blue, providing energetic contrast and balanced harmony for a distinctive creative brand presence.

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

Buttons

Primary Button
BackgroundRoyal Blue #2945FF
TextWhite #FFFFFF
Secondary Button
BackgroundCoral #FF6B61
TextCharcoal #1A1A1A
Outlined Button
BackgroundSky Blue #7FBFFF
TextSky Blue #7FBFFF

Interface

TextDefault readable body text.Charcoal #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Light Mist #F4F7FA
IconSmall interface icons and marks.Pale Cornflower #A3BFFF
BorderCards, inputs, and component borders.Pale Cornflower #A3BFFF
DividerSubtle separators between content.Pale Cornflower #A3BFFF
OutlineFocus rings and emphasis outlines.Pale Cornflower #A3BFFF

Palette Colors

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

Main (Brand) Colors

The main colors combine dominant royal blue with bright coral and a calm sky blue, providing energetic contrast and balanced harmony for a distinctive creative brand presence.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg

Royal Blue conveys trust, professionalism, and vibrant energy, establishing strong brand recognition.

HEX#2945FF
RGB41, 69, 255
HSL232, 100, 58
CMYK84, 73, 0, 0
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds warmth and approachability, balancing the intensity of Royal Blue with inviting energy.

HEX#FF6B61
RGB255, 107, 97
HSL4, 100, 69
CMYK0, 58, 62, 0
TertiarySky Blue

RolesBtn Outlined Border, Btn Outlined Text

Sky Blue softens the palette with a lighter tone, complementing Royal Blue while maintaining clarity and calmness.

HEX#7FBFFF
RGB127, 191, 255
HSL210, 100, 75
CMYK50, 25, 0, 0

Support Colors

The support colors extend the palette with gentle neutral blues that enhance usability and interface elements without overpowering the main colors.

Pale Cornflower

RolesIcon, Border, Divider, Outline

Pale Cornflower reinforces the blue hues gently and provides subtle visual separation and detail.

HEX#A3BFFF
RGB163, 191, 255
HSL222, 100, 82
CMYK36, 25, 0, 0

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Mist

RolesBg Dark

HEX#F4F7FA
RGB244, 247, 250
HSL210, 37, 97
CMYK2, 1, 0, 2
Charcoal

RolesText, Btn Secondary Text

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

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-royal-blue: #2945FF;
  --color-coral: #FF6B61;
  --color-sky-blue: #7FBFFF;
  --color-pale-cornflower: #A3BFFF;
  --color-white: #FFFFFF;
  --color-light-mist: #F4F7FA;
  --color-charcoal: #1A1A1A;
}

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: #2945FF;
  --role-link: #2945FF;
  --role-btn-primary-bg: #2945FF;
  --role-btn-secondary-bg: #FF6B61;
  --role-headline: #FF6B61;
  --role-btn-outlined-border: #7FBFFF;
  --role-btn-outlined-text: #7FBFFF;
  --role-icon: #A3BFFF;
  --role-border: #A3BFFF;
  --role-divider: #A3BFFF;
  --role-outline: #A3BFFF;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F4F7FA;
  --role-text: #1A1A1A;
  --role-btn-secondary-text: #1A1A1A;
}

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.
{
    "royal-blue": "#2945FF",
    "coral": "#FF6B61",
    "sky-blue": "#7FBFFF",
    "pale-cornflower": "#A3BFFF",
    "white": "#FFFFFF",
    "light-mist": "#F4F7FA",
    "charcoal": "#1A1A1A"
}
Press Space to load new palette