Back to palettes

Palette

Celestial Opal Glint

An airy and delicate palette evoking the shimmering, iridescent glint of a celestial opal.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Opal Glint 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 Celestial Opal Glint.

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

Data visualization

#D3DCE5#F5F7FA#ACCBE1#8EA8C2#5D799B

Palette guide

How to use Celestial Opal Glint

Overview

The "Celestial Opal Glint" palette offers an airy and delicate range of blue-greys, reminiscent of an iridescent opal's shimmering surface. With its lightest shade #F5F7FA providing a clean, almost white base, and the progressively deeper tones of #D3DCE5, #ACCBE1, and #8EA8C2, this palette builds a sophisticated gradient. The anchor is the rich #5D799B, a deep blue-grey that adds grounding and depth. This combination is excellent for designers seeking a refined, cool aesthetic that evokes tranquility and professionalism, making it versatile for corporate branding, elegant web design, or sophisticated print materials.

Best used for

  • Corporate branding and websites
  • Luxury product packaging
  • Modern interior design concepts
  • Tech and software interfaces
  • Architectural visualizations
  • Professional presentation themes

Suggested color roles

primary

#F5F7FA - Serve as the main background for a clean, expansive feel, allowing other elements to stand out.

secondary

#D3DCE5 - Use for distinct sections, cards, or subtle borders to add structure without harsh contrast.

accent

#ACCBE1 - Apply to interactive elements like buttons, links, or infographics to draw attention with a soft, inviting blue.

background

#F5F7FA - The primary background color, providing a light and airy base for content.

text

#5D799B - Excellent for main body text, offering good readability against lighter backgrounds like #F5F7FA or #D3DCE5.

Accessibility notes

  • Text using #5D799B on #F5F7FA will have good contrast for general readability.
  • Ensure text in #8EA8C2 has sufficient contrast on #D3DCE5; test for WCAG AA compliance.
  • Avoid using lighter blues like #ACCBE1 for small text on #F5F7FA backgrounds.
  • Consider using #5D799B for critical UI elements to ensure visibility for all users.

Recommended combinations

Professional Calm

Ideal for corporate websites or reports, conveying reliability and calm professionalism.

#F5F7FA · #D3DCE5 · #5D799B

Subtle Depth

Creates a layered effect, suitable for card backgrounds or hierarchical information display.

#D3DCE5 · #ACCBE1 · #8EA8C2

Elegant Highlight

Use the deepest blue as an accent against light backgrounds for strong visual impact on key elements.

#F5F7FA · #8EA8C2 · #5D799B

CSS variables

:root {
  --celestial-opal-glint-1: #D3DCE5;
  --celestial-opal-glint-2: #F5F7FA;
  --celestial-opal-glint-3: #ACCBE1;
  --celestial-opal-glint-4: #8EA8C2;
  --celestial-opal-glint-5: #5D799B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-opal-glint": {
        1: "#D3DCE5",
        2: "#F5F7FA",
        3: "#ACCBE1",
        4: "#8EA8C2",
        5: "#5D799B",
      }
    }
  }
}

Related searches

blue grey color schemecool elegant paletteopal inspired colorsethereal professional hueslight celestial design

Palette colors

Hex values

Color 1#D3DCE5
·
Color 2#F5F7FA
·
Color 3#ACCBE1
·
Color 4#8EA8C2
·
Color 5#5D799B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.2:1Fail
1.8:1Fail
3.2:1AA18
2
1.3:1Fail
1.6:1Fail
2.3:1Fail
4.2:1AA18
3
1.2:1Fail
1.6:1Fail
1.5:1Fail
2.6:1Fail
4
1.8:1Fail
2.3:1Fail
1.5:1Fail
1.8:1Fail
5
3.2:1AA18
4.2:1AA18
2.6:1Fail
1.8:1Fail

Similar palettes

More like Celestial Opal Glint

View all cool
Celestial Opal Bloom
Celestial Dewdrop Gleam
Celestial Orchid Bloom
Celestial Shimmer
Amethyst Sky
Astral Quartz Shimmer