Coral#FF6F61
Sunny Yellow#FFD23F
Serene Teal#2CA2A9
Soft Mint#A9D5C1
Warm Sand#E8D5B7
Palette direction

Coral Yellow Teal Color Palette

The palette features a playful and approachable trio of main colors that reflect the fun, safe, and creative nature of gligloo's homemade playing dough. Bright Coral, Sunny Yellow, and Serene Teal combine as complementary colors to create an energetic and child-friendly identity. Soft Mint and Warm Sand support the main colors with gentle accents that balance vibrancy with calmness, enhancing usability and warmth. Neutrals include pure White for brightness, Ivory for a soft background, and Charcoal for strong text readability, framing the palette neutrally for digital and print applications.

Split ComplementaryEcommerceplayfulchild-friendlysoftnon-toxic
palette-preview.example
Ecommerce color direction

Coral Yellow Teal Color Palette

The palette features a playful and approachable trio of main colors that reflect the fun, safe, and creative nature of gligloo's homemade playing dough. Bright Coral, Sunny Yellow, and Serene Teal combine as complementary colors to create an energetic and child-friendly identity. Soft Mint and Warm Sand support the main colors with gentle accents that balance vibrancy with calmness, enhancing usability and warmth. Neutrals include pure White for brightness, Ivory for a soft background, and Charcoal for strong text readability, framing the palette neutrally for digital and print applications.

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 #333333on Sunny Yellow #FFD23F8.7:1 Excellent
Logo Charcoal #333333on Coral #FF6F614.6:1 Strong
Logo Charcoal #333333on White #FFFFFF12.6:1 Excellent
Logo White #FFFFFFon Charcoal #33333312.6:1 Excellent
Icon color
BackgroundCoral#FF6F61TextCharcoal#333333
Primary Button4.63:1
AA

Best for the main action users should notice first.

BackgroundSunny Yellow#FFD23FTextCharcoal#333333
Secondary Button8.75:1
AAA

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 Yellow Teal 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 Yellow Teal Color PaletteEcommerce brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

This triadic palette of Coral, Yellow, and Teal provides a lively and harmonious combination that captures the fun and safe essence of the brand while creating distinctive, recognizable brand colors.

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

Buttons

Primary Button
BackgroundCoral #FF6F61
TextCharcoal #333333
Secondary Button
BackgroundSunny Yellow #FFD23F
TextCharcoal #333333
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #333333
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F9F5F0
IconSmall interface icons and marks.Soft Mint #A9D5C1
BorderCards, inputs, and component borders.Soft Mint #A9D5C1
DividerSubtle separators between content.Soft Mint #A9D5C1
OutlineFocus rings and emphasis outlines.Soft Mint #A9D5C1

Palette Colors

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

Main (Brand) Colors

This triadic palette of Coral, Yellow, and Teal provides a lively and harmonious combination that captures the fun and safe essence of the brand while creating distinctive, recognizable brand colors.

PrimaryCoral

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

Coral imparts warmth, energy, and excitement, reflecting the playful and creative spirit of the handmade dough.

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

RolesBtn Secondary Bg

Sunny Yellow evokes happiness and friendliness, boosting the approachable and cheerful personality of the brand.

HEX#FFD23F
RGB255, 210, 63
HSL46, 100, 62
CMYK0, 18, 75, 0
TertiarySerene Teal

Serene Teal adds calmness and balance, grounding the energetic main colors while supporting readability in primary button text.

HEX#2CA2A9
RGB44, 162, 169
HSL183, 59, 42
CMYK74, 4, 0, 34

Support Colors

Soft Mint and Warm Sand extend the main palette by introducing lower saturation hues that complement without overpowering, ensuring usability across icons, borders, and outlines with subtle visual reinforcement.

Soft Mint

RolesIcon, Border, Divider, Outline

Soft Mint gently balances the bright main colors, offering a cool, soothing accent that supports UI elements.

HEX#A9D5C1
RGB169, 213, 193
HSL153, 34, 75
CMYK21, 0, 9, 16
Warm Sand

Warm Sand adds a light, natural tone that complements Coral and Sunny Yellow by softening the palette and enhancing warmth.

HEX#E8D5B7
RGB232, 213, 183
HSL37, 52, 81
CMYK0, 8, 21, 9

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
Ivory

RolesBg Dark

HEX#F9F5F0
RGB249, 245, 240
HSL33, 43, 96
CMYK0, 2, 4, 2
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#333333
RGB51, 51, 51
HSL0, 0, 20
CMYK0, 0, 0, 80

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-sunny-yellow: #FFD23F;
  --color-serene-teal: #2CA2A9;
  --color-soft-mint: #A9D5C1;
  --color-warm-sand: #E8D5B7;
  --color-white: #FFFFFF;
  --color-ivory: #F9F5F0;
  --color-charcoal: #333333;
}

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-btn-primary-bg: #FF6F61;
  --role-link: #FF6F61;
  --role-btn-outlined-border: #FF6F61;
  --role-btn-outlined-text: #FF6F61;
  --role-headline: #FF6F61;
  --role-btn-secondary-bg: #FFD23F;
  --role-icon: #A9D5C1;
  --role-border: #A9D5C1;
  --role-divider: #A9D5C1;
  --role-outline: #A9D5C1;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F9F5F0;
  --role-text: #333333;
  --role-btn-primary-text: #333333;
  --role-btn-secondary-text: #333333;
}

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",
    "sunny-yellow": "#FFD23F",
    "serene-teal": "#2CA2A9",
    "soft-mint": "#A9D5C1",
    "warm-sand": "#E8D5B7",
    "white": "#FFFFFF",
    "ivory": "#F9F5F0",
    "charcoal": "#333333"
}
Press Space to load new palette