Palette

Coastal Rockpool

Aquatic blues and deep teals mirror the clear, living waters of a vibrant rockpool teeming with coastal life.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Rockpool 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 Coastal Rockpool.

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

Data visualization

#3B6E7A#6FA3B3#A5D2E0#2A525C#1F3D45

Palette guide

How to use Coastal Rockpool

Overview

The Coastal Rockpool palette captures the essence of clear, living waters teeming with coastal life, featuring aquatic blues and deep teals. Ranging from the light #A5D2E0 to the profound #1F3D45, with versatile mid-tones like #6FA3B3, #3B6E7A, and #2A525C. This palette is perfect for designs that aim for a natural, marine-inspired, and grounded aesthetic. Developers will find these colors excellent for crafting marine conservation branding, educational content, and immersive digital experiences that convey depth, vitality, and the beauty of underwater ecosystems.

Best used for

Marine conservation and research websites
Aquariums and oceanographic institutions
Educational content about marine life
Nautical decor and themed products
Robust web applications and dashboards
Ocean-inspired digital art and photography

Suggested color roles

primary

Utilize #3B6E7A as a strong, versatile mid-dark teal for main sections, headers, or prominent UI elements.

secondary

Employ #6FA3B3 for secondary information, subheadings, or as a lighter background for distinct content blocks.

accent

Apply #1F3D45 sparingly for impactful calls-to-action, important icons, or as a deep footer/header color to provide strong grounding.

background

The lightest shade, #A5D2E0, is ideal for primary backgrounds, providing a clean, aquatic, and expansive canvas.

text

For optimal readability on light backgrounds, use #1F3D45 or a true black like #000000 to ensure clear text presentation.

Accessibility notes

Ensure #1F3D45 text has excellent contrast against #A5D2E0 or #6FA3B3 backgrounds.
Check contrast for #3B6E7A text on #A5D2E0; it should be sufficient but verify WCAG compliance.
Avoid using #6FA3B3 for small text on #A5D2E0, as contrast may be too low.
Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Rockpool Depth

Excellent for layered content blocks or a background gradient that transitions smoothly from light to mid-teal.

#A5D2E0 · #6FA3B3 · #3B6E7A

Deep Marine

Create a sense of depth and hierarchy in UI elements, moving from a dark teal to a deeper, grounding marine blue.

#2A525C · #1F3D45 · #3B6E7A

Clear Water

Use a light background with a strong, grounding text color, balanced by a refreshing blue-green accent for clarity.

#A5D2E0 · #1F3D45 · #6FA3B3

CSS variables

:root {
  --coastal-rockpool-1: #3B6E7A;
  --coastal-rockpool-2: #6FA3B3;
  --coastal-rockpool-3: #A5D2E0;
  --coastal-rockpool-4: #2A525C;
  --coastal-rockpool-5: #1F3D45;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-rockpool": {
        1: "#3B6E7A",
        2: "#6FA3B3",
        3: "#A5D2E0",
        4: "#2A525C",
        5: "#1F3D45",
      }
    }
  }
}

Hex values

Color 1#3B6E7A

Color 2#6FA3B3

Color 3#A5D2E0

Color 4#2A525C

Color 5#1F3D45

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

1.5:1Fail

2:1Fail

1.7:1Fail

3.1:1AA18

4.2:1AA18

3.5:1AA18

1.7:1Fail

5.2:1AA

7.1:1AAA

1.5:1Fail

3.1:1AA18

5.2:1AA

1.4:1Fail

2:1Fail

4.2:1AA18

7.1:1AAA

1.4:1Fail

Similar palettes

More like Coastal Rockpool

Coastal Rockpool

See it in context.

Ready when you are.

Built with Coastal Rockpool.

How to use Coastal Rockpool

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rockpool Depth

Deep Marine

Clear Water

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Rockpool