Back to palettes

Palette

Astral Quartz Shimmer

Reflects the delicate, iridescent glow and crystalline purity of a celestial quartz formation.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Astral Quartz Shimmer 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 Astral Quartz Shimmer.

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

Data visualization

#F0F8F8#CCE0E0#A8D2D2#84C4C4#60B2B2

Palette guide

How to use Astral Quartz Shimmer

Overview

The Astral Quartz Shimmer palette reflects the delicate, iridescent glow and crystalline purity of a celestial quartz formation. This cool and elegant collection features the near-white #F0F8F8, transitioning through soft aqua tones like #CCE0E0 and #A8D2D2, to the deeper teals of #84C4C4 and #60B2B2. It's an exquisite choice for designers and developers crafting luxury jewelry brands, wellness and spa websites, or minimalist digital interfaces. The palette offers a sense of calm, clarity, and subtle sophistication, perfect for projects requiring an ethereal and refined aesthetic.

Best used for

  • Luxury jewelry branding
  • Wellness and spa websites
  • Minimalist web design
  • Elegant stationery and print
  • Serene app interfaces
  • Crystal-themed product design

Suggested color roles

primary

#60B2B2 serves as a deep, grounding primary color, ideal for main headings and foundational design elements.

secondary

#84C4C4 provides a calming, supportive aqua, excellent for subheadings or secondary content blocks.

accent

#CCE0E0 offers a soft, shimmering highlight, perfect for delicate accents, subtle borders, or interactive elements.

background

#F0F8F8 creates a clean, airy, and light background, ensuring excellent readability for darker text.

text

#60B2B2 ensures optimal legibility for primary text on lighter backgrounds, or use a dark charcoal for general body copy.

Accessibility notes

  • Ensure sufficient contrast for text, especially #60B2B2 on #F0F8F8, to meet WCAG AA standards.
  • Avoid using lighter shades like #CCE0E0 for small text on #F0F8F8 backgrounds due to low contrast.
  • Test legibility of lighter shades for secondary text, ensuring they remain readable.
  • Provide clear visual cues for interactive elements, possibly using a slightly darker shade for hover states.

Recommended combinations

Quartz Base

A balanced and serene combination, ideal for creating a calm and sophisticated page layout.

#F0F8F8 · #A8D2D2 · #60B2B2

Shimmering Depth

Highlights deeper, tranquil tones, suitable for artistic elements or distinctive branding.

#CCE0E0 · #84C4C4 · #60B2B2

Crystal Flow

Perfect for backgrounds or large design areas that require a smooth, contemporary transition.

#84C4C4 · #A8D2D2 · #F0F8F8

CSS variables

:root {
  --astral-quartz-shimmer-1: #F0F8F8;
  --astral-quartz-shimmer-2: #CCE0E0;
  --astral-quartz-shimmer-3: #A8D2D2;
  --astral-quartz-shimmer-4: #84C4C4;
  --astral-quartz-shimmer-5: #60B2B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-quartz-shimmer": {
        1: "#F0F8F8",
        2: "#CCE0E0",
        3: "#A8D2D2",
        4: "#84C4C4",
        5: "#60B2B2",
      }
    }
  }
}

Related searches

astral quartz palettecrystal shimmer colorselegant blue greenserene minimalist designwellness brand colors

Palette colors

Hex values

Color 1#F0F8F8
·
Color 2#CCE0E0
·
Color 3#A8D2D2
·
Color 4#84C4C4
·
Color 5#60B2B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.8:1Fail
2.3:1Fail
2
1.3:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
3
1.5:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.8:1Fail
1.4:1Fail
1.2:1Fail
1.3:1Fail
5
2.3:1Fail
1.8:1Fail
1.5:1Fail
1.3:1Fail

Similar palettes

More like Astral Quartz Shimmer

View all cool
Crystal Cave Shimmer
Celestial Ice Sparkle
Celestial Shimmer
Crystalline Cavern
Enchanted Ocean Shimmer
Kyanite Luster