Coral#FF7043
Teal#006D77
Olive#708238
Saddle Brown#A1866F
Moss Green#8A9A5B
Palette direction

Coral Teal Olive Color Palette

This palette pairs warm, inviting oranges with a complementary rich teal and subtle olive to create a cozy yet fresh ambiance ideal for a cafeteria setting. The support colors extend the main scheme with soft muted browns and gentle moss greens to reinforce warmth and balance. The neutrals provide crisp off-white, a warm beige, and a deep charcoal for readability and layered backgrounds.

ComplementaryFood Beveragecafeteriawarminvitingfresh
palette-preview.example
Food Beverage color direction

Coral Teal Olive Color Palette

This palette pairs warm, inviting oranges with a complementary rich teal and subtle olive to create a cozy yet fresh ambiance ideal for a cafeteria setting. The support colors extend the main scheme with soft muted browns and gentle moss greens to reinforce warmth and balance. The neutrals provide crisp off-white, a warm beige, and a deep charcoal for readability and layered backgrounds.

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 White #FFFFFFon Teal #006D776.1:1 Strong
Logo Charcoal #2B2D31on Coral #FF70435.0:1 Strong
Logo Charcoal #2B2D31on White #FFFFFF13.8:1 Excellent
Logo White #FFFFFFon Charcoal #2B2D3113.8:1 Excellent
Icon color
BackgroundCoral#FF7043TextCharcoal#2B2D31
Primary Button5.03:1
AA

Best for the main action users should notice first.

BackgroundTeal#006D77TextWhite#FFFFFF
Secondary Button6.08:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCoral#FF7043
Outlined Button2.74:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCoral#FF7043
Text Button2.74:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Coral Teal Olive 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.

CCoral Teal Olive Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a complementary harmony between warm coral-orange, rich teal, and olive, producing a balanced and memorable visual identity for a cafeteria. This trio combines warmth and freshness to stimulate appetite and create a welcoming atmosphere.

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

Buttons

Primary Button
BackgroundCoral #FF7043
TextCharcoal #2B2D31
Secondary Button
BackgroundTeal #006D77
TextWhite #FFFFFF
Outlined Button
BackgroundCoral #FF7043
TextCoral #FF7043

Interface

TextDefault readable body text.Charcoal #2B2D31
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F5F0E6
IconSmall interface icons and marks.Saddle Brown #A1866F
BorderCards, inputs, and component borders.Saddle Brown #A1866F
DividerSubtle separators between content.Saddle Brown #A1866F
OutlineFocus rings and emphasis outlines.Saddle Brown #A1866F

Palette Colors

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

Main (Brand) Colors

The main colors form a complementary harmony between warm coral-orange, rich teal, and olive, producing a balanced and memorable visual identity for a cafeteria. This trio combines warmth and freshness to stimulate appetite and create a welcoming atmosphere.

PrimaryCoral

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

Coral introduces warmth and energy that stimulates appetite and creates a friendly, inviting brand presence.

HEX#FF7043
RGB255, 112, 67
HSL14, 100, 63
CMYK0, 56, 74, 0
SecondaryTeal

RolesBtn Secondary Bg, Headline

Teal adds a fresh, calming contrast to coral, evoking cleanliness and balance in the cafeteria environment.

HEX#006D77
RGB0, 109, 119
HSL185, 100, 23
CMYK100, 8, 0, 53
TertiaryOlive

Olive grounds the palette with an earthy tone, complementing coral and teal while contributing natural comfort and harmony.

HEX#708238
RGB112, 130, 56
HSL75, 40, 36
CMYK14, 0, 57, 49

Support Colors

Support colors soften and mute the palette with natural browns and moss green to provide subtle accents and depth, supporting the main colors without competition.

Saddle Brown

RolesIcon, Border, Divider, Outline

Saddle Brown offers a warm, muted accent that reinforces the natural and cozy aspects of the main colors.

HEX#A1866F
RGB161, 134, 111
HSL28, 21, 53
CMYK0, 17, 31, 37
Moss Green

Moss Green balances the palette with a soft, subdued green that enhances the olive without overpowering.

HEX#8A9A5B
RGB138, 154, 91
HSL75, 26, 48
CMYK10, 0, 41, 40

Neutral Colors

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

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F5F0E6
RGB245, 240, 230
HSL40, 43, 93
CMYK0, 2, 6, 4
Charcoal

RolesText, Btn Primary Text

HEX#2B2D31
RGB43, 45, 49
HSL220, 7, 18
CMYK12, 8, 0, 81

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: #FF7043;
  --color-teal: #006D77;
  --color-olive: #708238;
  --color-saddle-brown: #A1866F;
  --color-moss-green: #8A9A5B;
  --color-white: #FFFFFF;
  --color-ivory: #F5F0E6;
  --color-charcoal: #2B2D31;
}

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: #FF7043;
  --role-btn-primary-bg: #FF7043;
  --role-btn-outlined-border: #FF7043;
  --role-btn-outlined-text: #FF7043;
  --role-link: #FF7043;
  --role-btn-secondary-bg: #006D77;
  --role-headline: #006D77;
  --role-icon: #A1866F;
  --role-border: #A1866F;
  --role-divider: #A1866F;
  --role-outline: #A1866F;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F0E6;
  --role-text: #2B2D31;
  --role-btn-primary-text: #2B2D31;
}

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": "#FF7043",
    "teal": "#006D77",
    "olive": "#708238",
    "saddle-brown": "#A1866F",
    "moss-green": "#8A9A5B",
    "white": "#FFFFFF",
    "ivory": "#F5F0E6",
    "charcoal": "#2B2D31"
}
Press Space to load new palette