Palette

Abyssal Blue Descent

Varying shades of deep ocean blue, evoking the mysterious and endless depths of the sea.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Blue Descent 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 Abyssal Blue Descent.

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

Data visualization

#76C7ED#4CA1D8#2E7CBE#1A5C9E#0B3F7B

Palette guide

How to use Abyssal Blue Descent

Overview

The Abyssal Blue Descent palette offers a captivating journey through varying shades of deep ocean blue, evoking the mysterious and endless depths of the sea. Starting from the vibrant #76C7ED and smoothly transitioning to the profound #0B3F7B, this palette is a masterclass in harmonious blue gradients. Designers will find its cohesive range perfect for conveying trust, professionalism, and depth across a variety of applications. Developers can leverage the clear progression from light to dark, especially with colors like #4CA1D8 and #1A5C9E, to establish strong visual hierarchies and intuitive user flows in interfaces and data visualizations.

Best used for

Corporate branding for tech companies
Financial services websites
Educational platforms
Oceanography and marine research sites
Modern architectural visualizations
Professional app UI designs

Suggested color roles

primary

Use #1A5C9E as a strong, reliable primary color for main content areas and important structural elements.

secondary

Employ #2E7CBE for secondary information, subheadings, or interactive states, offering a slightly lighter, engaging blue.

accent

Highlight key features, calls to action, or data points with #4CA1D8 to draw attention without being overly bold.

background

Establish a deep, stable foundation with #0B3F7B, ideal for dark themes or strong visual anchors.

text

For light text against dark backgrounds, use #76C7ED or a crisp white. For dark text on lighter backgrounds, a charcoal grey or black is suitable.

Accessibility notes

Ensure #76C7ED provides sufficient contrast for text when used on #0B3F7B, #1A5C9E, or #2E7CBE.
The contrast between adjacent shades like #1A5C9E and #0B3F7B might be too low for small text; use for larger elements.
Utilize a stark white for critical text elements on the darkest blues to guarantee universal readability.
When using #76C7ED as a background, ensure dark text (e.g., black or #0B3F7B) has good contrast.

Recommended combinations

Ocean Gradient

Perfect for creating smooth, professional gradients in backgrounds or UI elements, conveying depth.

#0B3F7B · #1A5C9E · #2E7CBE

Wave Crest

Ideal for presenting information hierarchically, with the lightest color highlighting key data or calls to action.

#1A5C9E · #4CA1D8 · #76C7ED

Deep Accent

Creates a strong contrast for hero sections, with a deep base, light text, and a mid-tone accent for buttons.

#0B3F7B · #76C7ED · #4CA1D8

CSS variables

:root {
  --abyssal-blue-descent-1: #76C7ED;
  --abyssal-blue-descent-2: #4CA1D8;
  --abyssal-blue-descent-3: #2E7CBE;
  --abyssal-blue-descent-4: #1A5C9E;
  --abyssal-blue-descent-5: #0B3F7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-blue-descent": {
        1: "#76C7ED",
        2: "#4CA1D8",
        3: "#2E7CBE",
        4: "#1A5C9E",
        5: "#0B3F7B",
      }
    }
  }
}

Hex values

Color 1#76C7ED

Color 2#4CA1D8

Color 3#2E7CBE

Color 4#1A5C9E

Color 5#0B3F7B

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

3.6:1AA18

5.6:1AA

1.5:1Fail

1.6:1Fail

2.4:1Fail

3.7:1AA18

2.4:1Fail

1.6:1Fail

1.5:1Fail

2.4:1Fail

3.6:1AA18

2.4:1Fail

1.5:1Fail

5.6:1AA

3.7:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Abyssal Blue Descent

Abyssal Blue Descent

See it in context.

Ready when you are.

Built with Abyssal Blue Descent.

How to use Abyssal Blue Descent

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Gradient

Wave Crest

Deep Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Abyssal Blue Descent