Back to palettes

Palette

Teal Wave Current

Cool and refreshing teals mirroring the dynamic currents of a deep ocean wave.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Teal Wave Current reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Teal Wave Current.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#004D53#007D83#00B2B8#47E3E9#A8FBFE

Palette guide

How to use Teal Wave Current

Overview

The Teal Wave Current palette captures the dynamic energy of ocean currents, moving from deep, mysterious teals to bright, refreshing aqua hues. With shades like the profound #004D53, the balanced #007D83, and the vibrant #A8FBFE, this collection offers designers and developers a visually stimulating and energetic foundation. It's ideal for projects aiming to convey freshness, movement, and modern sophistication. The clear progression allows for compelling visual storytelling, making it perfect for interfaces that require a sense of vitality and clarity, ensuring an engaging user experience across various digital applications.

Best used for

  • Sports and outdoor activity brands (water sports)
  • Dynamic tech dashboards
  • Modern data visualization
  • Refreshing beverage packaging
  • Digital art and creative portfolios
  • Interactive educational content

Suggested color roles

primary

#007D83 serves as a strong, vibrant primary color, excellent for main headings, navigation, or brand logos, conveying energy.

secondary

#00B2B8 provides a brighter, more active secondary shade, suitable for subheadings, active states, or prominent UI elements.

accent

#47E3E9 acts as a luminous, high-energy accent, perfect for calls-to-action, interactive highlights, or key information.

background

#A8FBFE offers a very light, almost icy background, creating a crisp canvas that enhances the vibrancy of other colors.

text

A dark charcoal or black on #A8FBFE or #47E3E9 provides excellent readability. For darker elements, use #A8FBFE.

Accessibility notes

  • #004D53 provides excellent contrast against #A8FBFE for large text and important UI elements.
  • Be mindful of using #00B2B8 text on #47E3E9; always check contrast ratios for readability.
  • The lightest color, #A8FBFE, is ideal for backgrounds, providing strong contrast for the darker teals.
  • Ensure all interactive components meet WCAG AA or AAA contrast standards.

Recommended combinations

Ocean Pulse

Creates a dynamic and modern feel, suitable for impactful hero sections or energetic brand statements.

#004D53 · #007D83 · #47E3E9

Current Flow

Excellent for smooth transitions, background gradients, or illustrating movement in digital designs.

#007D83 · #00B2B8 · #A8FBFE

Vibrant Splash

Use for bright, attention-grabbing calls-to-action, highlighted features, or crisp informational displays.

#A8FBFE · #47E3E9 · #004D53

CSS variables

:root {
  --teal-wave-current-1: #004D53;
  --teal-wave-current-2: #007D83;
  --teal-wave-current-3: #00B2B8;
  --teal-wave-current-4: #47E3E9;
  --teal-wave-current-5: #A8FBFE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-wave-current": {
        1: "#004D53",
        2: "#007D83",
        3: "#00B2B8",
        4: "#47E3E9",
        5: "#A8FBFE",
      }
    }
  }
}

Related searches

energetic teal palettedynamic aqua colorsrefreshing blue green schememodern ocean web designvibrant water current branding

Palette colors

Hex values

Color 1#004D53
·
Color 2#007D83
·
Color 3#00B2B8
·
Color 4#47E3E9
·
Color 5#A8FBFE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.7:1AA18
6.1:1AA
8.2:1AAA
2
1.9:1Fail
1.9:1Fail
3.2:1AA18
4.2:1AA18
3
3.7:1AA18
1.9:1Fail
1.7:1Fail
2.2:1Fail
4
6.1:1AA
3.2:1AA18
1.7:1Fail
1.3:1Fail
5
8.2:1AAA
4.2:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Teal Wave Current

View all cool