Palette

Oceanic Gem

A lively palette combining deep sea tones with unexpected, vibrant bursts of coral and sun.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Gem 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 Oceanic Gem.

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

Data visualization

#1A535C#4ECDC4#FFEAEC#FF6B6B#FFEE00

Palette guide

How to use Oceanic Gem

Overview

The "Oceanic Gem" palette is a vibrant and playful collection that marries deep sea tranquility with lively, unexpected bursts of color. It features a grounding deep teal, #1A535C, contrasted beautifully by the refreshing aqua of #4ECDC4. Adding a dynamic edge are the soft pink #FFEAEC, a bold coral-red #FF6B6B, and a bright, sunny yellow #FFEE00. This palette is designed for projects that aim to capture attention and convey energy and fun. Designers can use it to create engaging interfaces, playful branding, or striking visual campaigns. Developers will appreciate its distinct color roles for building memorable and user-friendly applications that stand out.

Best used for

Youth-oriented brands or products
Summer event promotions or marketing
Playful mobile app interfaces
Beachwear or swimwear fashion lines
Creative agency branding
Interactive digital experiences

Suggested color roles

primary

A deep, anchoring teal #1A535C that provides sophistication and depth, suitable for primary backgrounds, navigation, or main brand identity.

secondary

A bright, refreshing aqua #4ECDC4, excellent for secondary elements, illustrations, or large sections needing a vibrant lift.

accent

A bold, energetic coral-red #FF6B6B, perfect for calls-to-action, alerts, or prominent interactive elements that demand attention.

background

A very light, near-white pink #FFEAEC, offering a soft, airy canvas that allows the vibrant colors to pop without harshness.

text

Use a dark color like #1A535C for primary text on light backgrounds. For headings, a vibrant accent like #FF6B6B can be effective, ensuring sufficient contrast.

Accessibility notes

Ensure high contrast when using #FFEAEC as a background; #1A535C is a good choice for text.
Avoid placing #FFEE00 text on #FFEAEC backgrounds due to insufficient contrast.
The vibrant #FF6B6B and #FFEE00 should be used with caution for small text; larger text or UI elements are safer.
Check contrast ratios for any text placed on #4ECDC4, especially with lighter colors.

Recommended combinations

Tropical Pop

Ideal for hero sections, promotional banners, or call-to-action buttons that need to feel lively and inviting.

#FFEAEC · #4ECDC4 · #FF6B6B

Deep Sea Energy

Effective for brand logos, main navigation, or interactive data visualizations, creating a dynamic contrast.

#1A535C · #FFEE00 · #4ECDC4

Coral Sunset

Great for highlighting key information, product features, or energetic illustrations, leveraging warm and cool tones.

#FF6B6B · #FFEAEC · #1A535C

CSS variables

:root {
  --oceanic-gem-1: #1A535C;
  --oceanic-gem-2: #4ECDC4;
  --oceanic-gem-3: #FFEAEC;
  --oceanic-gem-4: #FF6B6B;
  --oceanic-gem-5: #FFEE00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-gem": {
        1: "#1A535C",
        2: "#4ECDC4",
        3: "#FFEAEC",
        4: "#FF6B6B",
        5: "#FFEE00",
      }
    }
  }
}

Hex values

Color 1#1A535C

Color 2#4ECDC4

Color 3#FFEAEC

Color 4#FF6B6B

Color 5#FFEE00

Accessibility

Contrast checker

4.5:1AA18

7.5:1AAA

3.1:1AA18

7.2:1AAA

4.5:1AA18

1.7:1Fail

1.4:1Fail

1.6:1Fail

7.5:1AAA

1.7:1Fail

2.4:1Fail

1:1Fail

3.1:1AA18

1.4:1Fail

2.4:1Fail

2.3:1Fail

7.2:1AAA

1.6:1Fail

1:1Fail

2.3:1Fail

Similar palettes

More like Oceanic Gem