Indigo#4B0082
Coral#FF7F50
Spring Green#00FF7F
Lavender Gray#C4C3D0
Moss Green#8A9A5B
Palette direction

Indigo Tangerine Springgreen Color Palette

This palette uses a triadic color scheme of vivid Indigo, vibrant Tangerine, and bright Spring Green, creating a recognizable and energetic brand identity without any reds. The Indigo conveys trust and professionalism, Tangerine adds warmth and friendliness, and Spring Green injects freshness and growth. Support colors in soft Lavender Gray and muted Moss Green extend the palette subtly, complementing the main colors without overpowering them. Neutrals of pure White, Soft Ivory, and Charcoal Black provide clean contrast and readability across digital interfaces.

TriadicNoneindigotangerinespring greentriadic palette
palette-preview.example
None color direction

Indigo Tangerine Springgreen Color Palette

This palette uses a triadic color scheme of vivid Indigo, vibrant Tangerine, and bright Spring Green, creating a recognizable and energetic brand identity without any reds. The Indigo conveys trust and professionalism, Tangerine adds warmth and friendliness, and Spring Green injects freshness and growth. Support colors in soft Lavender Gray and muted Moss Green extend the palette subtly, complementing the main colors without overpowering them. Neutrals of pure White, Soft Ivory, and Charcoal Black provide clean contrast and readability across digital interfaces.

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 Indigo #4B008213.0:1 Excellent
Logo Charcoal Black #222222on Spring Green #00FF7F11.8:1 Excellent
Logo Charcoal Black #222222on Coral #FF7F506.4:1 Strong
Logo Charcoal Black #222222on White #FFFFFF15.9:1 Excellent
Icon color
BackgroundIndigo#4B0082TextWhite#FFFFFF
Primary Button12.95:1
AAA

Best for the main action users should notice first.

BackgroundCoral#FF7F50TextCharcoal Black#222222
Secondary Button6.37:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextIndigo#4B0082
Outlined Button12.95:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextIndigo#4B0082
Text Button12.95:1
AAA

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

Palette composition8 colorsTriadic color relationship
9:41Indigo Tangerine Springgreen Color Palette Color role balance
Triadic 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.

CIndigo Tangerine Springgreen Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The triadic combination of Indigo, Tangerine, and Spring Green provides vibrant contrast and harmony, allowing each color to stand out distinctly while creating a balanced, recognizable brand system without using red.

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

Buttons

Primary Button
BackgroundIndigo #4B0082
TextWhite #FFFFFF
Secondary Button
BackgroundCoral #FF7F50
TextCharcoal Black #222222
Outlined Button
BackgroundIndigo #4B0082
TextIndigo #4B0082

Interface

TextDefault readable body text.Charcoal Black #222222
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Spring Green #00FF7F
IconSmall interface icons and marks.Lavender Gray #C4C3D0
BorderCards, inputs, and component borders.Lavender Gray #C4C3D0
DividerSubtle separators between content.Lavender Gray #C4C3D0
OutlineFocus rings and emphasis outlines.Lavender Gray #C4C3D0

Palette Colors

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

Main (Brand) Colors

The triadic combination of Indigo, Tangerine, and Spring Green provides vibrant contrast and harmony, allowing each color to stand out distinctly while creating a balanced, recognizable brand system without using red.

PrimaryIndigo

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

Indigo instills trust and depth, serving as a strong, professional anchor for the brand's identity.

HEX#4B0082
RGB75, 0, 130
HSL275, 100, 25
CMYK42, 100, 0, 49
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral (vibrant Tangerine) adds warmth and approachability, energizing the palette with a friendly, inviting tone.

HEX#FF7F50
RGB255, 127, 80
HSL16, 100, 66
CMYK0, 50, 69, 0
TertiarySpring Green

RolesBg Dark

Spring Green brings freshness and vitality, suggesting growth and innovation that balances the palette's warmth.

HEX#00FF7F
RGB0, 255, 127
HSL150, 100, 50
CMYK100, 0, 50, 0

Support Colors

The support colors extend the main palette with soft, muted tones that reinforce the brand personality without competing for attention, helping to visually separate UI elements and maintain harmony.

Lavender Gray

RolesIcon, Border, Divider, Outline

Lavender Gray adds a gentle, modern accent that balances the intensity of the main colors while maintaining visual calm.

HEX#C4C3D0
RGB196, 195, 208
HSL245, 12, 79
CMYK6, 6, 0, 18
Moss Green

Moss Green subtly complements the Spring Green, providing earthy depth that supports readability and adds nuance.

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 Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Ivory
HEX#F8F8F2
RGB248, 248, 242
HSL60, 30, 96
CMYK0, 0, 2, 3
Charcoal Black

RolesText, 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-indigo: #4B0082;
  --color-coral: #FF7F50;
  --color-spring-green: #00FF7F;
  --color-lavender-gray: #C4C3D0;
  --color-moss-green: #8A9A5B;
  --color-white: #FFFFFF;
  --color-soft-ivory: #F8F8F2;
  --color-charcoal-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: #4B0082;
  --role-link: #4B0082;
  --role-btn-primary-bg: #4B0082;
  --role-btn-outlined-border: #4B0082;
  --role-btn-outlined-text: #4B0082;
  --role-btn-secondary-bg: #FF7F50;
  --role-headline: #FF7F50;
  --role-bg-dark: #00FF7F;
  --role-icon: #C4C3D0;
  --role-border: #C4C3D0;
  --role-divider: #C4C3D0;
  --role-outline: #C4C3D0;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-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.
{
    "indigo": "#4B0082",
    "coral": "#FF7F50",
    "spring-green": "#00FF7F",
    "lavender-gray": "#C4C3D0",
    "moss-green": "#8A9A5B",
    "white": "#FFFFFF",
    "soft-ivory": "#F8F8F2",
    "charcoal-black": "#222222"
}
Press Space to load new palette