Blue#0066CC
Tangerine#FF793F
Seafoam Green#3FC1AA
Olive#708238
Sand#D4C6A0
Palette direction

Blue Tangerine Seafoam Color Palette

This travel color palette combines a vibrant Blue, an energetic Tangerine, and a fresh Seafoam Green as main colors that evoke adventure, warmth, and refreshing exploration. Soft Olive and muted Sand support colors provide natural accents that balance the brights without overpowering them. The neutrals include pure Ivory for backgrounds, a light Pearl for subtle contrast, and deep Charcoal for text to ensure readability and comfort across digital and print media.

Split ComplementaryNonetraveladventureexplorationvibrant
palette-preview.example
None color direction

Blue Tangerine Seafoam Color Palette

This travel color palette combines a vibrant Blue, an energetic Tangerine, and a fresh Seafoam Green as main colors that evoke adventure, warmth, and refreshing exploration. Soft Olive and muted Sand support colors provide natural accents that balance the brights without overpowering them. The neutrals include pure Ivory for backgrounds, a light Pearl for subtle contrast, and deep Charcoal for text to ensure readability and comfort across digital and print media.

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 #2F2F2Fon Seafoam Green #3FC1AA6.0:1 Strong
Logo Ivory #FFFFFFon Blue #0066CC5.6:1 Strong
Logo Charcoal #2F2F2Fon Tangerine #FF793F5.1:1 Strong
Logo Charcoal #2F2F2Fon Ivory #FFFFFF13.4:1 Excellent
Icon color
BackgroundBlue#0066CCTextIvory#FFFFFF
Primary Button5.57:1
AA

Best for the main action users should notice first.

BackgroundTangerine#FF793FTextCharcoal#2F2F2F
Secondary Button5.14:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFFFTextTangerine#FF793F
Outlined Button2.61:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFFFTextBlue#0066CC
Text Button5.57:1
AA

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

Palette composition8 colorsSplit Complementary color relationship
9:41Blue Tangerine Seafoam 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.

CBlue Tangerine Seafoam Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The triadic main colors—Blue, Tangerine, and Seafoam Green—create a dynamic yet balanced palette that conveys trust, excitement, and freshness for travel branding.

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.Blue #0066CC
HeadlineUsed for main titles and key messages.Seafoam Green #3FC1AA
LinkUsed for links and interactive text.Blue #0066CC

Buttons

Primary Button
BackgroundBlue #0066CC
TextIvory #FFFFFF
Secondary Button
BackgroundTangerine #FF793F
TextCharcoal #2F2F2F
Outlined Button
BackgroundBlue #0066CC
TextTangerine #FF793F

Interface

TextDefault readable body text.Charcoal #2F2F2F
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Pearl #F5F5F5
IconSmall interface icons and marks.Olive #708238
BorderCards, inputs, and component borders.Olive #708238
DividerSubtle separators between content.Olive #708238
OutlineFocus rings and emphasis outlines.Olive #708238

Palette Colors

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

Main (Brand) Colors

The triadic main colors—Blue, Tangerine, and Seafoam Green—create a dynamic yet balanced palette that conveys trust, excitement, and freshness for travel branding.

PrimaryBlue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border

Blue evokes trust, stability, and professionalism, establishing reliability for travel services.

HEX#0066CC
RGB0, 102, 204
HSL210, 100, 40
CMYK100, 50, 0, 20
SecondaryTangerine

RolesBtn Secondary Bg, Btn Outlined Text

Tangerine adds energy and enthusiasm, inspiring a sense of excitement for new adventures.

HEX#FF793F
RGB255, 121, 63
HSL18, 100, 62
CMYK0, 53, 75, 0
TertiarySeafoam Green

RolesHeadline

Seafoam Green brings a refreshing and calming element, suggesting rejuvenation during travel.

HEX#3FC1AA
RGB63, 193, 170
HSL169, 51, 50
CMYK67, 0, 12, 24

Support Colors

Support colors Olive and Sand provide natural, earthy accents that extend the main palette by grounding the vibrant colors and enhancing usability in interface elements.

Olive

RolesIcon, Border, Divider, Outline

Olive complements the main colors with a muted natural tone that balances vibrancy without competing.

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

Sand offers a warm, soft neutral accent, harmonizing the palette with an earthy touch suitable for backgrounds and subtle UI elements.

HEX#D4C6A0
RGB212, 198, 160
HSL44, 38, 73
CMYK0, 7, 25, 17

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text

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

RolesBg Dark

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

RolesText, Btn Secondary Text

HEX#2F2F2F
RGB47, 47, 47
HSL0, 0, 18
CMYK0, 0, 0, 82

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-blue: #0066CC;
  --color-tangerine: #FF793F;
  --color-seafoam-green: #3FC1AA;
  --color-olive: #708238;
  --color-sand: #D4C6A0;
  --color-ivory: #FFFFFF;
  --color-pearl: #F5F5F5;
  --color-charcoal: #2F2F2F;
}

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: #0066CC;
  --role-link: #0066CC;
  --role-btn-primary-bg: #0066CC;
  --role-btn-outlined-border: #0066CC;
  --role-btn-secondary-bg: #FF793F;
  --role-btn-outlined-text: #FF793F;
  --role-headline: #3FC1AA;
  --role-icon: #708238;
  --role-border: #708238;
  --role-divider: #708238;
  --role-outline: #708238;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --role-text: #2F2F2F;
  --role-btn-secondary-text: #2F2F2F;
}

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.
{
    "blue": "#0066CC",
    "tangerine": "#FF793F",
    "seafoam-green": "#3FC1AA",
    "olive": "#708238",
    "sand": "#D4C6A0",
    "ivory": "#FFFFFF",
    "pearl": "#F5F5F5",
    "charcoal": "#2F2F2F"
}
Press Space to load new palette