Coral#FF6F61
Goldenrod#D6A500
Sky Blue#47A9E6
Peach Puff#F5D9C1
Pale Sky#AEDFF7
Palette direction

Coral Goldenrod Skyblue Color Palette

This playful and inviting palette combines three main colors that evoke creativity and fun: a warm Coral for energy and engagement, a cheerful Goldenrod for warmth and friendliness, and a bright Sky Blue for calm and imagination. Two soft support colors subtly complement the main hues without overpowering them, balancing the vibrant tones and enhancing usability. Neutrals provide bright, clean backgrounds and clear text contrast to keep the palette accessible and readable for all ages.

Split ComplementaryEcommercekidsplay doughsensory kitshomemade
palette-preview.example
Ecommerce color direction

Coral Goldenrod Skyblue Color Palette

This playful and inviting palette combines three main colors that evoke creativity and fun: a warm Coral for energy and engagement, a cheerful Goldenrod for warmth and friendliness, and a bright Sky Blue for calm and imagination. Two soft support colors subtly complement the main hues without overpowering them, balancing the vibrant tones and enhancing usability. Neutrals provide bright, clean backgrounds and clear text contrast to keep the palette accessible and readable for all ages.

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 #2B2B2Bon Goldenrod #D6A5006.2:1 Strong
Logo Charcoal #2B2B2Bon Sky Blue #47A9E65.5:1 Strong
Logo Charcoal #2B2B2Bon Coral #FF6F615.2:1 Strong
Logo Charcoal #2B2B2Bon White #FFFFFF14.2:1 Excellent
Icon color
BackgroundCoral#FF6F61TextCharcoal#2B2B2B
Primary Button5.19:1
AA

Best for the main action users should notice first.

BackgroundGoldenrod#D6A500TextCharcoal#2B2B2B
Secondary Button6.23:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCoral#FF6F61
Outlined Button2.73:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCoral#FF6F61
Text Button2.73:1
Low

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

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

CCoral Goldenrod Skyblue Color PaletteEcommerce 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.Coral #FF6F61
HeadlineUsed for main titles and key messages.Goldenrod #D6A500
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundCoral #FF6F61
TextCharcoal #2B2B2B
Secondary Button
BackgroundGoldenrod #D6A500
TextCharcoal #2B2B2B
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Snow #F6F6F6
IconSmall interface icons and marks.Peach Puff #F5D9C1
BorderCards, inputs, and component borders.Peach Puff #F5D9C1
DividerSubtle separators between content.Peach Puff #F5D9C1
OutlineFocus rings and emphasis outlines.Peach Puff #F5D9C1

Palette Colors

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

Main (Brand) Colors

These three main colors form a balanced triadic harmony that energizes and delights, perfect for engaging children's creativity and playfulness.

PrimaryCoral

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

Coral energizes and captures attention, evoking warmth and excitement to draw children and parents alike.

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

RolesHeadline, Btn Secondary Bg

Goldenrod adds warmth and friendliness, promoting a welcoming and happy atmosphere.

HEX#D6A500
RGB214, 165, 0
HSL46, 100, 42
CMYK0, 23, 100, 16
TertiarySky Blue

Sky Blue brings calm and imagination, offering a refreshing contrast that balances the warmer main colors.

HEX#47A9E6
RGB71, 169, 230
HSL203, 76, 59
CMYK69, 27, 0, 10

Support Colors

The two soft support colors extend the main palette by offering gentle, harmonious accents that support visual hierarchy and usability without distracting from the vibrant triadic main colors.

Peach Puff

RolesIcon, Border, Divider, Outline

Peach Puff complements Coral and Goldenrod with a soft peachy tone that gently balances the boldness of the main colors.

HEX#F5D9C1
RGB245, 217, 193
HSL28, 72, 86
CMYK0, 11, 21, 4
Pale Sky

Pale Sky serves as a muted tone of Sky Blue, enhancing the primary blue element and providing subtle accent options.

HEX#AEDFF7
RGB174, 223, 247
HSL200, 82, 83
CMYK30, 10, 0, 3

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

RolesBg Dark

HEX#F6F6F6
RGB246, 246, 246
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

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-coral: #FF6F61;
  --color-goldenrod: #D6A500;
  --color-sky-blue: #47A9E6;
  --color-peach-puff: #F5D9C1;
  --color-pale-sky: #AEDFF7;
  --color-white: #FFFFFF;
  --color-snow: #F6F6F6;
  --color-charcoal: #2B2B2B;
}

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: #FF6F61;
  --role-link: #FF6F61;
  --role-btn-primary-bg: #FF6F61;
  --role-btn-outlined-border: #FF6F61;
  --role-btn-outlined-text: #FF6F61;
  --role-headline: #D6A500;
  --role-btn-secondary-bg: #D6A500;
  --role-icon: #F5D9C1;
  --role-border: #F5D9C1;
  --role-divider: #F5D9C1;
  --role-outline: #F5D9C1;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F6F6F6;
  --role-text: #2B2B2B;
  --role-btn-primary-text: #2B2B2B;
  --role-btn-secondary-text: #2B2B2B;
}

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.
{
    "coral": "#FF6F61",
    "goldenrod": "#D6A500",
    "sky-blue": "#47A9E6",
    "peach-puff": "#F5D9C1",
    "pale-sky": "#AEDFF7",
    "white": "#FFFFFF",
    "snow": "#F6F6F6",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette