Teal#00798C
Turquoise#00A1AB
Aqua#019CA1
Deep Sea Green#4A6E66
Soft Cyan#368282
Palette direction

Ocean Tide Creative Color Palette

This palette captures the vibrant and calming essence of the underwater scene in the image, combining fresh aquatic hues with grounding neutral tones. The main colors reflect the dynamic teals and turquoises of the ocean and coral, while support colors provide subtle accents reminiscent of underwater flora and shadows. Neutrals anchor the design with gentle light and dark shades allowing for clear readability and balance.

MonochromaticCreativeoceanunderwatertealturquoise
palette-preview.example
Creative color direction

Ocean Tide Creative Color Palette

This palette captures the vibrant and calming essence of the underwater scene in the image, combining fresh aquatic hues with grounding neutral tones. The main colors reflect the dynamic teals and turquoises of the ocean and coral, while support colors provide subtle accents reminiscent of underwater flora and shadows. Neutrals anchor the design with gentle light and dark shades allowing for clear readability and balance.

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 #102127on Turquoise #00A1AB5.3:1 Strong
Logo White #FFFFFFon Teal #00798C5.1:1 Strong
Logo Charcoal #102127on Aqua #019CA14.9:1 Strong
Logo Charcoal #102127on White #FFFFFF16.6:1 Excellent
Icon color
BackgroundTeal#00798CTextWhite#FFFFFF
Primary Button5.10:1
AA

Best for the main action users should notice first.

BackgroundTurquoise#00A1ABTextCharcoal#102127
Secondary Button5.27:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextTeal#00798C
Outlined Button5.10:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextTeal#00798C
Text Button5.10:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Ocean Tide Creative 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.

COcean Tide Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The three main colors are analogous hues of aqua, teal, and turquoise, reflecting varying depths and vitality of underwater scenes for a harmonious and refreshing palette.

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

Buttons

Primary Button
BackgroundTeal #00798C
TextWhite #FFFFFF
Secondary Button
BackgroundTurquoise #00A1AB
TextCharcoal #102127
Outlined Button
BackgroundTeal #00798C
TextTeal #00798C

Interface

TextDefault readable body text.Charcoal #102127
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F4F6F8
IconSmall interface icons and marks.Deep Sea Green #4A6E66
BorderCards, inputs, and component borders.Deep Sea Green #4A6E66
DividerSubtle separators between content.Deep Sea Green #4A6E66
OutlineFocus rings and emphasis outlines.Deep Sea Green #4A6E66

Palette Colors

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

Main (Brand) Colors

The three main colors are analogous hues of aqua, teal, and turquoise, reflecting varying depths and vitality of underwater scenes for a harmonious and refreshing palette.

PrimaryTeal

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

Teal conveys depth, professionalism, and calmness, serving as the foundation for brand recognition.

HEX#00798C
RGB0, 121, 140
HSL188, 100, 27
CMYK100, 14, 0, 45
SecondaryTurquoise

RolesBtn Secondary Bg

Turquoise energizes with vibrancy and creativity, complementing teal with brightness and fluidity.

HEX#00A1AB
RGB0, 161, 171
HSL184, 100, 34
CMYK100, 6, 0, 33
TertiaryAqua

Aqua adds a fresh, clean, and refreshing note supporting the main colors with lively engagement.

HEX#019CA1
RGB1, 156, 161
HSL182, 99, 32
CMYK99, 3, 0, 37

Support Colors

The support colors extend the main palette with subtle oceanic and nature-inspired hues that enhance icons, borders, and dividers without overwhelming the main colors.

Deep Sea Green

RolesIcon, Border, Divider, Outline

Deep Sea Green provides a muted earthy balance to the bright main colors, grounding the palette visually.

HEX#4A6E66
RGB74, 110, 102
HSL167, 20, 36
CMYK33, 0, 7, 57
Soft Cyan

Soft Cyan reinforces the blue-green family with a softer tone used for subtle UI elements and accents.

HEX#368282
RGB54, 130, 130
HSL180, 41, 36
CMYK58, 0, 0, 49

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
Ivory

RolesBg Dark

HEX#F4F6F8
RGB244, 246, 248
HSL210, 22, 96
CMYK2, 1, 0, 3
Charcoal

RolesText, Btn Secondary Text

HEX#102127
RGB16, 33, 39
HSL196, 42, 11
CMYK59, 15, 0, 85

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-teal: #00798C;
  --color-turquoise: #00A1AB;
  --color-aqua: #019CA1;
  --color-deep-sea-green: #4A6E66;
  --color-soft-cyan: #368282;
  --color-white: #FFFFFF;
  --color-ivory: #F4F6F8;
  --color-charcoal: #102127;
}

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: #00798C;
  --role-link: #00798C;
  --role-btn-primary-bg: #00798C;
  --role-btn-outlined-border: #00798C;
  --role-btn-outlined-text: #00798C;
  --role-headline: #00798C;
  --role-btn-secondary-bg: #00A1AB;
  --role-icon: #4A6E66;
  --role-border: #4A6E66;
  --role-divider: #4A6E66;
  --role-outline: #4A6E66;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F4F6F8;
  --role-text: #102127;
  --role-btn-secondary-text: #102127;
}

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.
{
    "teal": "#00798C",
    "turquoise": "#00A1AB",
    "aqua": "#019CA1",
    "deep-sea-green": "#4A6E66",
    "soft-cyan": "#368282",
    "white": "#FFFFFF",
    "ivory": "#F4F6F8",
    "charcoal": "#102127"
}
Press Space to load new palette