Palette

Azure Zenith Rise

Reflects the pristine, ascending blues of a clear sky reaching its highest point, serene and vast.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Zenith Rise 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 Zenith Rise.

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

Data visualization

#0F2F4F#3A6E9B#6BB0D6#9BD3EB#C4E8F7

Palette guide

How to use Azure Zenith Rise

Overview

The Azure Zenith Rise palette beautifully reflects the pristine, ascending blues of a clear sky reaching its highest point, embodying serenity and vastness. From the deep, grounding #0F2F4F to the airy, expansive #C4E8F7, with harmonious intermediate shades like #3A6E9B, #6BB0D6, and #9BD3EB, this collection offers a journey from depth to light. Designers can leverage these shades to create sophisticated, calming, and inspiring visual experiences. It's ideal for projects that seek to convey clarity, progress, and a sense of unlimited potential, bringing a tranquil yet uplifting aesthetic.

Best used for

Technology and innovation companies
Aerospace or aviation branding
Financial consulting services
Educational institutions
Wellness and personal development platforms
Modern architectural design presentations

Suggested color roles

primary

#0F2F4F - A deep, authoritative navy, excellent for main branding, prominent headers, and establishing a sense of trust and professionalism.

secondary

#3A6E9B - A rich, balanced blue, suitable for subheadings, navigation, and important informational sections.

accent

#6BB0D6 - A clear, bright sky blue, perfect for interactive elements, highlights, or to draw attention to key data points with a refreshing touch.

background

#C4E8F7 - The lightest shade, providing an expansive, clean, and airy canvas that promotes readability and a sense of openness.

text

#0F2F4F - Or #3A6E9B for optimal readability against lighter backgrounds like #C4E8F7 and #9BD3EB.

Accessibility notes

Ensure #0F2F4F or #3A6E9B text on #C4E8F7 background meets WCAG AA contrast standards.
Avoid using lighter blues like #9BD3EB for body text on #C4E8F7, as contrast will be insufficient.
When using #6BB0D6 on #9BD3EB for text, verify contrast ratios, especially for smaller font sizes.
For critical information, always prioritize the darkest colors for text against the lightest backgrounds.

Recommended combinations

Deep Ascent

Creates a professional, trustworthy, and progressive look, ideal for corporate or educational platforms.

#0F2F4F · #3A6E9B · #6BB0D6

Sky Expanse

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

#C4E8F7 · #9BD3EB · #6BB0D6

Zenith Contrast

A high-contrast pairing for clear hierarchy and readability, great for dashboards, reports, or impactful headlines.

#0F2F4F · #C4E8F7 · #3A6E9B

CSS variables

:root {
  --azure-zenith-rise-1: #0F2F4F;
  --azure-zenith-rise-2: #3A6E9B;
  --azure-zenith-rise-3: #6BB0D6;
  --azure-zenith-rise-4: #9BD3EB;
  --azure-zenith-rise-5: #C4E8F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-zenith-rise": {
        1: "#0F2F4F",
        2: "#3A6E9B",
        3: "#6BB0D6",
        4: "#9BD3EB",
        5: "#C4E8F7",
      }
    }
  }
}

Hex values

Color 1#0F2F4F

Color 2#3A6E9B

Color 3#6BB0D6

Color 4#9BD3EB

Color 5#C4E8F7

Accessibility

Contrast checker

2.5:1Fail

5.7:1AA

8.4:1AAA

10.5:1AAA

2.5:1Fail

2.3:1Fail

3.3:1AA18

4.2:1AA18

5.7:1AA

2.3:1Fail

1.5:1Fail

1.8:1Fail