Palette

Cobalt Glass Shard

Intense blues, from deep navy to bright sky, reflecting the sharp, vibrant beauty of cobalt glass.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Glass Shard 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 Glass Shard.

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

Data visualization

#000080#0000CD#1E90FF#6495ED#ADD8E6

Palette guide

How to use Cobalt Glass Shard

Overview

The Cobalt Glass Shard palette features intense blues, from deep navy to bright sky, reflecting the sharp, vibrant beauty of cobalt glass. With hues ranging from the profound #000080 to the airy #ADD8E6, this palette is perfect for designs demanding elegance, clarity, and a modern edge. Designers can leverage #0000CD as a strong primary, while #1E90FF 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, crisp appeal, from corporate branding to digital product interfaces.

Best used for

Modern tech and software branding
Luxury glassware or home decor visuals
Clean, minimalist UI design
Digital art and illustration with sharp lines
Automotive design concepts
High-end fashion accessories

Suggested color roles

primary

#0000CD - A vibrant, true blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying energy and precision.

secondary

#1E90FF - A bright, bold 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, evoking glass.

background

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

text

For text on #000080 or #0000CD, 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 #0000CD.
Avoid using #6495ED for small text on #1E90FF without verifying WCAG AA compliance due to similar luminance values.
The brightest hue, #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

Glass Glow

Creates a striking, modern interface; #000080 for background, #1E90FF for content, #ADD8E6 for bright highlights/CTAs.

#000080 · #1E90FF · #ADD8E6

Shard Edge

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

#0000CD · #6495ED · #ADD8E6

Deep Cobalt

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

#000080 · #0000CD · #1E90FF

CSS variables

:root {
  --cobalt-glass-shard-1: #000080;
  --cobalt-glass-shard-2: #0000CD;
  --cobalt-glass-shard-3: #1E90FF;
  --cobalt-glass-shard-4: #6495ED;
  --cobalt-glass-shard-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-glass-shard": {
        1: "#000080",
        2: "#0000CD",
        3: "#1E90FF",
        4: "#6495ED",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#1E90FF

Color 4#6495ED

Color 5#ADD8E6

Accessibility

Contrast checker

1.4:1Fail

4.9:1AA

5.4:1AA

10.5:1AAA

1.4:1Fail

3.4:1AA18

3.8:1AA18

7.3:1AAA

4.9:1AA

3.4:1AA18

1.1:1Fail

2.1:1Fail

5.4:1AA

3.8:1AA18

1.1:1Fail

1.9:1Fail

10.5:1AAA

7.3:1AAA

2.1:1Fail

1.9:1Fail

Similar palettes

More like Cobalt Glass Shard

View all cool

Frosted Winter Elegance

Aqua Jewel

Art Deco Metropolis

Art Deco Sapphire

Astral Quartz Shimmer

Aurora Borealis Glow