Orange#FF6600
Coral#FF6F61
Navy#223355
Saddle Brown#996633
Khaki#CCBB99
Palette direction

Orange Society Entertainment Color Palette

This vibrant color palette combines a bold and energetic orange primary color with complementary warm and neutral tones to evoke excitement and sociability, perfectly suited for an entertainment brand identity.

ComplementaryCreativeorangeentertainmentsocietyvibrant
palette-preview.example
Creative color direction

Orange Society Entertainment Color Palette

This vibrant color palette combines a bold and energetic orange primary color with complementary warm and neutral tones to evoke excitement and sociability, perfectly suited for an entertainment brand identity.

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 Navy #22335512.6:1 Excellent
Logo Charcoal #222222on Coral #FF6F615.8:1 Strong
Logo Charcoal #222222on Orange #FF66005.4:1 Strong
Logo Charcoal #222222on White #FFFFFF15.9:1 Excellent
Icon color
BackgroundOrange#FF6600TextCharcoal#222222
Primary Button5.42:1
AA

Best for the main action users should notice first.

BackgroundCoral#FF6F61TextCharcoal#222222
Secondary Button5.83:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextOrange#FF6600
Outlined Button2.94:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextOrange#FF6600
Text Button2.94:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Orange Society Entertainment 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.

COrange Society Entertainment Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors unify a vivid orange with a complementary warm coral and a rich deep navy, forming a dynamic and recognizable color system for entertainment that captures energy and social warmth.

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

Buttons

Primary Button
BackgroundOrange #FF6600
TextCharcoal #222222
Secondary Button
BackgroundCoral #FF6F61
TextCharcoal #222222
Outlined Button
BackgroundOrange #FF6600
TextOrange #FF6600

Interface

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

Palette Colors

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

Main (Brand) Colors

The main colors unify a vivid orange with a complementary warm coral and a rich deep navy, forming a dynamic and recognizable color system for entertainment that captures energy and social warmth.

PrimaryOrange

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

A striking, pure orange expressing energy, enthusiasm, and social warmth ideal for the dynamic entertainment sector.

HEX#FF6600
RGB255, 102, 0
HSL24, 100, 50
CMYK0, 60, 100, 0
SecondaryCoral

RolesHeadline, Btn Secondary Bg

A vivid coral that enhances the main orange color with a softer but still warm and inviting emotional tone.

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

A deep navy anchors the palette by providing a strong contrast and stabilizing the warm hues with cool sophistication.

HEX#223355
RGB34, 51, 85
HSL220, 43, 23
CMYK60, 40, 0, 67

Support Colors

The support colors extend the primary palette with two subtle yet rich hues that balance warmth with depth and grounding to complement the vivid main colors without overpowering them.

Saddle Brown

RolesIcon, Border, Divider, Outline

A muted, earthy brown that highlights the vibrant main colors with natural balance, ideal for subtle UI elements like borders and icons.

HEX#996633
RGB153, 102, 51
HSL30, 50, 40
CMYK0, 33, 67, 40
Khaki

A soft khaki tone adding gentle warmth to headlines or accents, harmonizing with the palette's lively orange and coral.

HEX#CCBB99
RGB204, 187, 153
HSL40, 33, 70
CMYK0, 8, 25, 20

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
Cultured

RolesBg Dark

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

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-orange: #FF6600;
  --color-coral: #FF6F61;
  --color-navy: #223355;
  --color-saddle-brown: #996633;
  --color-khaki: #CCBB99;
  --color-white: #FFFFFF;
  --color-cultured: #F5F5F5;
  --color-charcoal: #222222;
}

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: #FF6600;
  --role-link: #FF6600;
  --role-btn-primary-bg: #FF6600;
  --role-btn-outlined-border: #FF6600;
  --role-btn-outlined-text: #FF6600;
  --role-headline: #FF6F61;
  --role-btn-secondary-bg: #FF6F61;
  --role-icon: #996633;
  --role-border: #996633;
  --role-divider: #996633;
  --role-outline: #996633;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --role-text: #222222;
  --role-btn-primary-text: #222222;
  --role-btn-secondary-text: #222222;
}

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.
{
    "orange": "#FF6600",
    "coral": "#FF6F61",
    "navy": "#223355",
    "saddle-brown": "#996633",
    "khaki": "#CCBB99",
    "white": "#FFFFFF",
    "cultured": "#F5F5F5",
    "charcoal": "#222222"
}
Press Space to load new palette