Palette

Cobalt Bloom Field

A profound progression of deep blues, from intense navy to soft sky, like a field of vibrant cobalt flowers.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Bloom Field 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 Cobalt Bloom Field.

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

Data visualization

#000080#191970#4169E1#6495ED#ADD8E6

Palette guide

How to use Cobalt Bloom Field

Overview

The Cobalt Bloom Field palette presents a profound progression of deep blues, from intense navy to soft sky, reminiscent of a field of vibrant cobalt flowers. With hues ranging from the rich #000080 to the delicate #ADD8E6, this palette is perfect for designs seeking elegance, depth, and a touch of serene beauty. Designers can leverage #191970 as a strong primary, while #4169E1 offers a vivid mid-tone for dynamic elements. The brightest hue, #6495ED, provides a refreshing highlight. This palette is ideal for projects that aim to combine classic sophistication with a fresh, inviting appeal, from corporate branding to artistic presentations.

Best used for

Elegant corporate branding
High-end fashion or jewelry websites
Artistic portfolio and gallery designs
Luxury event invitations
Educational institution branding
Abstract digital art and illustrations

Suggested color roles

primary

#191970 - A deep, sophisticated navy that establishes authority and elegance, ideal for main headings, brand logos, or foundational UI elements.

secondary

#4169E1 - A vibrant, true blue that provides an energetic contrast, suitable for subheadings, active states, or supporting graphical elements.

accent

#ADD8E6 - A very light, airy blue that offers a crisp highlight, perfect for interactive elements, small icons, or subtle background textures.

background

#000080 - An intense, dark navy that creates a deep, luxurious backdrop, allowing lighter blues to truly pop with vibrancy.

text

For text on #000080 or #191970, use #ADD8E6 or white for optimal readability. For text on #ADD8E6, use black or #000080.

Accessibility notes

Ensure high contrast when placing light text, such as #ADD8E6, on darker blues like #000080 or #191970.
Avoid using #6495ED for small text on #4169E1 without verifying WCAG AA compliance due to similar luminance.
The bright #ADD8E6 offers excellent contrast against all darker blues in the palette for interactive elements.
When using #ADD8E6 as a background, ensure text is in a contrasting dark color like black or #000080 to maintain legibility.

Recommended combinations

Cobalt Garden

Creates a striking, elegant interface; #000080 for background, #4169E1 for content, #ADD8E6 for bright highlights/CTAs.

#000080 · #4169E1 · #ADD8E6

Bloom Layers

Use #191970 for main sections, #6495ED for supporting elements, and #ADD8E6 for vibrant accents or delicate details.

#191970 · #6495ED · #ADD8E6

Deep Petal

Ideal for creating depth through gradients or layered UI, moving from the deepest navy to a rich, true blue.

#000080 · #191970 · #4169E1

CSS variables

:root {
  --cobalt-bloom-field-1: #000080;
  --cobalt-bloom-field-2: #191970;
  --cobalt-bloom-field-3: #4169E1;
  --cobalt-bloom-field-4: #6495ED;
  --cobalt-bloom-field-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-bloom-field": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#6495ED",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#6495ED

Color 5#ADD8E6

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

5.4:1AA

10.5:1AAA

1.1:1Fail

3.1:1AA18

5:1AA

9.7:1AAA

3.3:1AA18

3.1:1AA18

1.6:1Fail

3.2:1AA18

5.4:1AA

5:1AA

1.6:1Fail

1.9:1Fail

10.5:1AAA

9.7:1AAA

3.2:1AA18

1.9:1Fail

Similar palettes

More like Cobalt Bloom Field

View all cool

Aqua Jewel

Azure Sapphire Gleam

Celestial Ocean Depth

Celestial Ocean Mirror

Cobalt Ink Flow

Deep Sapphire Gaze