Palette

Azure Canopy Light

Reflecting the tranquil, clear waters beneath a rainforest canopy, deep and calming.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Canopy Light 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 Canopy Light.

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

Data visualization

#6DAEBB#4A9BA8#2B828F#136976#004F5E

Palette guide

How to use Azure Canopy Light

Overview

The Azure Canopy Light palette reflects the tranquil, clear waters beneath a rainforest canopy, offering a deep and calming collection of blues and teals. It features a muted teal (#6DAEBB) and a rich medium teal (#4A9BA8), providing a refreshing base. A deep teal-blue (#2B828F) adds depth, transitioning to a darker teal (#136976) and a profound dark teal (#004F5E). This palette is exceptionally useful for designers and developers aiming to create projects that exude calm, natural serenity, and a sense of peaceful depth. From environmental conservation campaigns and nature-inspired branding to refreshing website designs and tranquil digital artwork, these hex codes offer a versatile range for visually compelling experiences that inspire contemplation.

Best used for

Environmental conservation branding
Nature-themed website and app design
Wellness and meditation products
Underwater photography and art displays
Serene corporate branding
Eco-tourism marketing materials

Suggested color roles

primary

Utilize #004F5E as a deep, authoritative primary color for foundational elements or significant calls-to-action, conveying stability and natural depth.

secondary

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

accent

Highlight interactive elements or key information with #4A9BA8 to ensure they pop with refreshing clarity.

background

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

text

For optimal readability, use #004F5E or a crisp white on lighter backgrounds, or a light grey on deeper hues.

Accessibility notes

Ensure sufficient contrast between #004F5E text and #6DAEBB background for WCAG AA compliance.
Avoid using #2B828F or #136976 for small text on similarly dark backgrounds without careful contrast checking.
Test color combinations for users with color vision deficiencies, especially within the blue-teal spectrum.
Provide clear visual cues beyond color for interactive states, particularly between #4A9BA8 and #2B828F.

Recommended combinations

Canopy Depth

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

#004F5E · #136976 · #6DAEBB

Water Flow

Ideal for subtle background gradients, tranquil content blocks, or graphic elements that evoke clear water.

#4A9BA8 · #2B828F · #136976

Teal Contrast

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

#6DAEBB · #004F5E · #4A9BA8

CSS variables

:root {
  --azure-canopy-light-1: #6DAEBB;
  --azure-canopy-light-2: #4A9BA8;
  --azure-canopy-light-3: #2B828F;
  --azure-canopy-light-4: #136976;
  --azure-canopy-light-5: #004F5E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-canopy-light": {
        1: "#6DAEBB",
        2: "#4A9BA8",
        3: "#2B828F",
        4: "#136976",
        5: "#004F5E",
      }
    }
  }
}

Hex values

Color 1#6DAEBB

Color 2#4A9BA8

Color 3#2B828F

Color 4#136976

Color 5#004F5E

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.5:1Fail

3.7:1AA18

1.3:1Fail

1.4:1Fail

2:1Fail

2.9:1Fail

1.8:1Fail

1.4:1Fail

2.1:1Fail

2.5:1Fail

2:1Fail

1.4:1Fail

1.5:1Fail

3.7:1AA18

2.9:1Fail

2.1:1Fail

1.5:1Fail

Similar palettes

More like Azure Canopy Light

Azure Canopy Light

See it in context.

Ready when you are.

Built with Azure Canopy Light.

How to use Azure Canopy Light

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Canopy Depth

Water Flow

Teal Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Azure Canopy Light