Palette

Azure Sky Grayscale

A tranquil progression of blues, from deep navy to soft sky, evoking the vastness of the sea.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Sky Grayscale 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 Sky Grayscale.

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 Sky Grayscale

Overview

The Azure Sky Grayscale palette offers a tranquil progression of blues, from deep navy to soft sky, evoking the vastness of the sea and the clarity of the sky. Featuring the profound #000080 and #191970, a vibrant #4169E1, a gentle #6495ED, and the airy #B0E0E6, this monochromatic collection provides both depth and lightness. Designers can use these shades to create sophisticated, serene, and highly readable interfaces or branding. The palette's natural gradient ensures visual harmony, making it excellent for projects that require a calm yet professional aesthetic with a strong sense of order.

Best used for

Professional corporate websites
Educational platforms and apps
Financial technology (FinTech) interfaces
Maritime industry branding
Serene spa or wellness centers
Informational dashboards

Suggested color roles

primary

#000080 - A classic deep navy, ideal for primary branding, main headings, and critical call-to-action elements, conveying authority.

secondary

#191970 - A slightly lighter, rich navy, suitable for subheadings, navigation menus, and important informational text.

accent

#4169E1 - A clear, vibrant blue, perfect for interactive elements, highlights, or to draw attention to key data points.

background

#B0E0E6 - A very light, ethereal blue, creating a clean, expansive backdrop that promotes readability and calm.

text

#000080 - Or #191970 for excellent contrast on lighter backgrounds like #B0E0E6 and #6495ED.

Accessibility notes

Ensure #000080 or #191970 text on #B0E0E6 background achieves WCAG AA contrast for readability.
Avoid using #6495ED for body text on #B0E0E6, as the contrast will be insufficient.
Check contrast carefully if using #4169E1 for text on #6495ED; it might pass for large text but fail for regular.
For UI elements, use a combination of color and icon or text labels to convey meaning, especially for color-blind users.

Recommended combinations

Deep Sea

Creates a strong, authoritative, and professional impression, suitable for corporate or educational platforms.

#000080 · #191970 · #4169E1

Sky Gradient

Ideal for airy, modern designs, interfaces that need a sense of open space, or serene visual storytelling.

#B0E0E6 · #6495ED · #4169E1

Classic Contrast

Provides clear hierarchy and readability, excellent for dashboards, reports, or any content requiring strong visual separation.

#000080 · #B0E0E6 · #6495ED

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-sky-grayscale": {
        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 Sky Grayscale

View all monochrome

Azure Depths Gradient