Palette

Ocean Jasper Tides

Calming blue-greens reflecting the patterns of ocean jasper, from deep waters to shimmering shallow tides.

CoolNatural5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Jasper Tides 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 Ocean Jasper Tides.

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

Data visualization

#0A3B4C#146A80#1FA8B6#29CED0#33F3EB

Palette guide

How to use Ocean Jasper Tides

Overview

The Ocean Jasper Tides palette captures the dynamic beauty of ocean jasper, transitioning from deep, mysterious waters to shimmering, vibrant shallows. It features a striking gradient from the profound #0A3B4C and #146A80, through the balanced #1FA8B6, to the bright and energetic #29CED0 and #33F3EB. This collection offers designers a powerful tool for conveying depth, movement, and natural vibrancy. Developers can leverage its clear progression for creating engaging visual hierarchies and interactive states, ensuring a modern and captivating user experience. Ideal for projects that aim to evoke the serene yet active essence of marine environments.

Best used for

Dynamic tech and software interfaces
Adventure and travel branding
Modern web design with vibrant accents
Aquatic sports or dive shop branding
Digital art and illustration
Environmental conservation campaigns

Suggested color roles

primary

Use #146A80 for main sections or key navigational elements, providing a strong, inviting blue-green.

secondary

Apply #0A3B4C for foundational elements or deep backgrounds, offering profound depth and contrast.

accent

Highlight with #33F3EB for calls-to-action, interactive elements, or vibrant details, ensuring maximum impact.

background

Employ #1FA8B6 for a balanced, refreshing background, or use #0A3B4C for a dramatic, dark aesthetic.

text

For optimal readability on lighter shades, use #0A3B4C. On darker shades, a crisp white or near-white text is recommended.

Accessibility notes

White text provides excellent contrast against #0A3B4C and #146A80.
Ensure #0A3B4C text has sufficient contrast against #1FA8B6, #29CED0, and #33F3EB.
The lightest color #33F3EB will require a very dark text for readability; avoid white text.
Always use a contrast checker to verify compliance for all text and interactive elements.

Recommended combinations

Deep Current

Creates a sense of depth and mystery, perfect for hero sections or brand storytelling.

#0A3B4C · #146A80 · #1FA8B6

Shallow Glow

Excellent for vibrant accents, gradients, or interactive elements, evoking shimmering light.

#1FA8B6 · #29CED0 · #33F3EB

Dynamic Contrast

Provides high visual impact, suitable for calls-to-action or highlighting key information.

#0A3B4C · #33F3EB · #1FA8B6

CSS variables

:root {
  --ocean-jasper-tides-1: #0A3B4C;
  --ocean-jasper-tides-2: #146A80;
  --ocean-jasper-tides-3: #1FA8B6;
  --ocean-jasper-tides-4: #29CED0;
  --ocean-jasper-tides-5: #33F3EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-jasper-tides": {
        1: "#0A3B4C",
        2: "#146A80",
        3: "#1FA8B6",
        4: "#29CED0",
        5: "#33F3EB",
      }
    }
  }
}

Hex values

Color 1#0A3B4C

Color 2#146A80

Color 3#1FA8B6

Color 4#29CED0

Color 5#33F3EB

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

6.2:1AA

8.7:1AAA

2:1Fail

2.2:1Fail

3.2:1AA18

4.5:1AA18

4.2:1AA18

2.2:1Fail

1.5:1Fail

2.1:1Fail

6.2:1AA

3.2:1AA18

1.5:1Fail

1.4:1Fail

8.7:1AAA

4.5:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Ocean Jasper Tides

View all Cool

Enchanted Forest Glow

Forest Fern Canopy

Spring Fern Canopy

Aegean Shoreline Treasures

Alpine Lake Dawn

Aqua Tide Pool