Light Sea Green#3EA9A9
Deep Ocean Blue#1F4E5F
Teal#005F73
Seafoam Green#93C5C0
Muted Blue Gray#6C8C99
Palette direction

Aqua Ocean Hospitality Color Palette

This palette captures the serene underwater atmosphere with cool aqua and ocean blue main colors, balanced by supportive seafoam and teal accents, and grounded by soft neutrals that echo sandy and shadowy elements. It evokes a fresh, calming aquatic theme suitable for brands connected to freshness, clarity, or water.

MonochromaticHospitality Eventsaquaoceanfreshcalm
palette-preview.example
Hospitality Events color direction

Aqua Ocean Hospitality Color Palette

This palette captures the serene underwater atmosphere with cool aqua and ocean blue main colors, balanced by supportive seafoam and teal accents, and grounded by soft neutrals that echo sandy and shadowy elements. It evokes a fresh, calming aquatic theme suitable for brands connected to freshness, clarity, or water.

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 Pure White #FFFFFFon Deep Ocean Blue #1F4E5F9.1:1 Excellent
Logo Charcoal Blue #122B35on Light Sea Green #3EA9A95.2:1 Strong
Logo Charcoal Blue #122B35on Pure White #FFFFFF14.8:1 Excellent
Logo Charcoal Blue #122B35on Seafoam Green #93C5C07.7:1 Excellent
Icon color
BackgroundLight Sea Green#3EA9A9TextCharcoal Blue#122B35
Primary Button5.24:1
AA

Best for the main action users should notice first.

BackgroundDeep Ocean Blue#1F4E5FTextPure White#FFFFFF
Secondary Button9.08:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDeep Ocean Blue#1F4E5F
Outlined Button9.08:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextLight Sea Green#3EA9A9
Text Button2.82:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Aqua Ocean Hospitality Color Palette Color role balance
Monochromatic 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.

CAqua Ocean Hospitality Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview

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.Light Sea Green #3EA9A9
HeadlineUsed for main titles and key messages.Deep Ocean Blue #1F4E5F
LinkUsed for links and interactive text.Light Sea Green #3EA9A9

Buttons

Primary Button
BackgroundLight Sea Green #3EA9A9
TextCharcoal Blue #122B35
Secondary Button
BackgroundDeep Ocean Blue #1F4E5F
TextPure White #FFFFFF
Outlined Button
BackgroundDeep Ocean Blue #1F4E5F
TextDeep Ocean Blue #1F4E5F

Interface

TextDefault readable body text.Charcoal Blue #122B35
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Off White #F0F4F5
IconSmall interface icons and marks.Seafoam Green #93C5C0
BorderCards, inputs, and component borders.Seafoam Green #93C5C0
DividerSubtle separators between content.Seafoam Green #93C5C0
OutlineFocus rings and emphasis outlines.Seafoam Green #93C5C0

Palette Colors

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

Main (Brand) Colors

The main colors combine varying blue and aqua tones evoking depth and freshness of the ocean, creating a harmonious and recognizable aquatic theme.

PrimaryLight Sea Green

RolesLogo, Link, Btn Primary Bg

Light Sea Green conveys refreshing clarity and vitality, establishing a clean and inviting brand presence.

HEX#3EA9A9
RGB62, 169, 169
HSL180, 46, 45
CMYK63, 0, 0, 34
SecondaryDeep Ocean Blue

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Deep Ocean Blue projects trust and stability with its strong and calming qualities, grounding the palette.

HEX#1F4E5F
RGB31, 78, 95
HSL196, 51, 25
CMYK67, 18, 0, 63
TertiaryTeal

Teal acts as a sophisticated accent adding depth and balance while maintaining the aquatic harmony.

HEX#005F73
RGB0, 95, 115
HSL190, 100, 23
CMYK100, 17, 0, 55

Support Colors

Support colors add softness and variation with gentle seafoam green and muted blue-gray, reinforcing the aquatic mood without competing.

Seafoam Green

RolesIcon, Border, Divider, Outline

Seafoam Green complements the main blues with a gentle, calming tone that enhances readability and subtle details.

HEX#93C5C0
RGB147, 197, 192
HSL174, 30, 67
CMYK25, 0, 3, 23
Muted Blue Gray

Muted Blue Gray adds a neutral coolness that balances intensity and supports visual hierarchy subtly.

HEX#6C8C99
RGB108, 140, 153
HSL197, 18, 51
CMYK29, 8, 0, 40

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Off White

RolesBg Dark

HEX#F0F4F5
RGB240, 244, 245
HSL192, 20, 95
CMYK2, 0, 0, 4
Charcoal Blue

RolesText, Btn Primary Text

HEX#122B35
RGB18, 43, 53
HSL197, 49, 14
CMYK66, 19, 0, 79

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-light-sea-green: #3EA9A9;
  --color-deep-ocean-blue: #1F4E5F;
  --color-teal: #005F73;
  --color-seafoam-green: #93C5C0;
  --color-muted-blue-gray: #6C8C99;
  --color-pure-white: #FFFFFF;
  --color-off-white: #F0F4F5;
  --color-charcoal-blue: #122B35;
}

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: #3EA9A9;
  --role-link: #3EA9A9;
  --role-btn-primary-bg: #3EA9A9;
  --role-btn-secondary-bg: #1F4E5F;
  --role-btn-outlined-border: #1F4E5F;
  --role-btn-outlined-text: #1F4E5F;
  --role-headline: #1F4E5F;
  --role-icon: #93C5C0;
  --role-border: #93C5C0;
  --role-divider: #93C5C0;
  --role-outline: #93C5C0;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F0F4F5;
  --role-text: #122B35;
  --role-btn-primary-text: #122B35;
}

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.
{
    "light-sea-green": "#3EA9A9",
    "deep-ocean-blue": "#1F4E5F",
    "teal": "#005F73",
    "seafoam-green": "#93C5C0",
    "muted-blue-gray": "#6C8C99",
    "pure-white": "#FFFFFF",
    "off-white": "#F0F4F5",
    "charcoal-blue": "#122B35"
}
Press Space to load new palette