Orange#EF6C00
Teal#008080
Crimson#A92828
Sand#FFC870
Charcoal#3A3A3A
Palette direction

Vibrant Geometric Creative Color Palette

This palette blends bold main colors inspired by the strong geometric shapes and vibrant hues in the image, balanced by restrained support colors and grounded neutral tones. The main colors provide a dynamic and recognizable identity reflecting the eclectic yet unified design style, while support colors accentuate without overpowering. Neutrals offer clarity and readability for digital and brand applications.

Split ComplementaryCreativeboldgeometricvibrantcreative
palette-preview.example
Creative color direction

Vibrant Geometric Creative Color Palette

This palette blends bold main colors inspired by the strong geometric shapes and vibrant hues in the image, balanced by restrained support colors and grounded neutral tones. The main colors provide a dynamic and recognizable identity reflecting the eclectic yet unified design style, while support colors accentuate without overpowering. Neutrals offer clarity and readability for digital and brand 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 White #FFFFFFon Crimson #A928287.0:1 Strong
Logo Raisin Black #222222on Orange #EF6C005.2:1 Strong
Logo White #FFFFFFon Teal #0080804.8:1 Strong
Logo Raisin Black #222222on White #FFFFFF15.9:1 Excellent
Icon color
BackgroundOrange#EF6C00TextRaisin Black#222222
Primary Button5.16:1
AA

Best for the main action users should notice first.

BackgroundTeal#008080TextWhite#FFFFFF
Secondary Button4.77:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextTeal#008080
Outlined Button4.77:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextOrange#EF6C00
Text Button3.08:1
Large text

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

Palette composition8 colorsSplit Complementary color relationship
9:41Vibrant Geometric Creative 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.

CVibrant Geometric Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The three main colors offer a vibrant yet balanced triad of hues capturing the image’s eclectic energy with orange, teal, and a deep red accent, providing confident recognition and strong visual interest.

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

Buttons

Primary Button
BackgroundOrange #EF6C00
TextRaisin Black #222222
Secondary Button
BackgroundTeal #008080
TextWhite #FFFFFF
Outlined Button
BackgroundTeal #008080
TextTeal #008080

Interface

TextDefault readable body text.Raisin Black #222222
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F3F3F3
IconSmall interface icons and marks.Sand #FFC870
BorderCards, inputs, and component borders.Sand #FFC870
DividerSubtle separators between content.Sand #FFC870
OutlineFocus rings and emphasis outlines.Sand #FFC870

Palette Colors

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

Main (Brand) Colors

The three main colors offer a vibrant yet balanced triad of hues capturing the image’s eclectic energy with orange, teal, and a deep red accent, providing confident recognition and strong visual interest.

PrimaryOrange

RolesLogo, Link, Btn Primary Bg, Headline

This bright orange conveys energy, creativity, and attention, anchoring the palette as the primary brand color.

HEX#EF6C00
RGB239, 108, 0
HSL27, 100, 47
CMYK0, 55, 100, 6
SecondaryTeal

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

The teal balances warmth with cool calmness, providing a secondary hue that contrasts well and offers versatility.

HEX#008080
RGB0, 128, 128
HSL180, 100, 25
CMYK100, 0, 0, 50
TertiaryCrimson

The deep crimson introduces depth and sophistication as a tertiary accent while harmonizing with the orange and teal.

HEX#A92828
RGB169, 40, 40
HSL0, 62, 41
CMYK0, 76, 76, 34

Support Colors

The support colors subtly reinforce the palette by introducing muted and complementary hues that extend the range with balance and harmony.

Sand

RolesIcon, Border, Divider, Outline

A soft sand color that complements the orange and adds a warm neutral accent without overpowering.

HEX#FFC870
RGB255, 200, 112
HSL37, 100, 72
CMYK0, 22, 56, 0
Charcoal

Charcoal offers grounding and contrast with a deep neutrality that supports text and key elements clearly.

HEX#3A3A3A
RGB58, 58, 58
HSL0, 0, 23
CMYK0, 0, 0, 77

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#F3F3F3
RGB243, 243, 243
HSL0, 0, 95
CMYK0, 0, 0, 5
Raisin Black

RolesText, Btn Primary 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. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.

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: #EF6C00;
  --color-teal: #008080;
  --color-crimson: #A92828;
  --color-sand: #FFC870;
  --color-charcoal: #3A3A3A;
  --color-white: #FFFFFF;
  --color-ivory: #F3F3F3;
  --color-raisin-black: #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: #EF6C00;
  --role-link: #EF6C00;
  --role-btn-primary-bg: #EF6C00;
  --role-headline: #EF6C00;
  --role-btn-secondary-bg: #008080;
  --role-btn-outlined-border: #008080;
  --role-btn-outlined-text: #008080;
  --role-icon: #FFC870;
  --role-border: #FFC870;
  --role-divider: #FFC870;
  --role-outline: #FFC870;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F3F3F3;
  --role-text: #222222;
  --role-btn-primary-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": "#EF6C00",
    "teal": "#008080",
    "crimson": "#A92828",
    "sand": "#FFC870",
    "charcoal": "#3A3A3A",
    "white": "#FFFFFF",
    "ivory": "#F3F3F3",
    "raisin-black": "#222222"
}
Press Space to load new palette