Palette

Azure Abyss Calm

Delve into the tranquil depths of the ocean with this serene blend of dark and lighter blues.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Abyss Calm 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 Azure Abyss Calm.

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

Data visualization

#000080#191970#4169E1#6495ED#B0E0E6

Palette guide

How to use Azure Abyss Calm

Overview

The Azure Abyss Calm palette invites you to delve into the tranquil depths of the ocean with its serene blend of dark and lighter blues. It features a profound navy blue (#000080) and a deep midnight blue (#191970), providing a strong, mysterious foundation. A vibrant royal blue (#4169E1) adds a touch of energy, transitioning to a softer cornflower blue (#6495ED) and a delicate pale turquoise (#B0E0E6). This palette is exceptionally useful for designers and developers aiming to create projects that exude calm, sophistication, and a sense of peaceful depth. From corporate branding and elegant website designs to meditation apps and serene digital artwork, these hex codes offer a versatile range for visually compelling experiences.

Best used for

Corporate branding and websites
Meditation and wellness applications
Ocean-themed digital art and photography
Luxury travel and resort marketing
Sleek UI/UX design for tech products
Serene interior design concepts

Suggested color roles

primary

Utilize #000080 as a deep, authoritative primary color for foundational elements or significant content sections, conveying stability and trust.

secondary

Employ #191970 for secondary headings or important content blocks, adding depth without overpowering the primary.

accent

Highlight interactive elements or key information with #4169E1 to ensure they pop with energetic, clear appeal.

background

A light, expansive background of #B0E0E6 creates a clean, serene canvas, allowing darker elements to stand out beautifully.

text

For optimal readability, use #000080 or a crisp white for body text on lighter backgrounds, or a light grey on deeper hues.

Accessibility notes

Ensure sufficient contrast between #000080 text and #B0E0E6 background for WCAG AA compliance.
Avoid using #6495ED or #B0E0E6 for small text on light backgrounds due to potential readability issues.
Test color combinations for users with color vision deficiencies, especially within the blue spectrum.
Provide clear visual cues beyond color for interactive states, particularly between #4169E1 and #6495ED.

Recommended combinations

Deep Ocean

Creates a deep, stable base with a serene highlight, excellent for headers, footers, or strong brand statements.

#000080 · #191970 · #B0E0E6

Vibrant Abyss

Ideal for energetic calls-to-action, prominent graphics, or elements that need to stand out with clarity.

#4169E1 · #6495ED · #191970

Calm Contrast

Use for a light, serene background with deep text and a vibrant supporting color, suitable for content cards or alerts.

#B0E0E6 · #000080 · #4169E1

CSS variables

:root {
  --azure-abyss-calm-1: #000080;
  --azure-abyss-calm-2: #191970;
  --azure-abyss-calm-3: #4169E1;
  --azure-abyss-calm-4: #6495ED;
  --azure-abyss-calm-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-abyss-calm": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#6495ED",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#6495ED

Color 5#B0E0E6

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

5.4:1AA

11.2:1AAA

1.1:1Fail

3.1:1AA18

5:1AA

10.4:1AAA

3.3:1AA18

3.1:1AA18

1.6:1Fail

3.4:1AA18

5.4:1AA

5:1AA

1.6:1Fail

2.1:1Fail

11.2:1AAA

10.4:1AAA

3.4:1AA18

2.1:1Fail

Similar palettes

More like Azure Abyss Calm

View all cool

Indigo Reef Current

Serene Ocean Depths

Tranquil Abyss Depths

Abyssal Blue Descent

Azure Canopy Light

Azure Lagoon Drift