Back to palettes

Palette

Ocean Glass Shards

The smooth, tumbled beauty of sea glass fragments found on a sandy shore, weathered by ocean waves.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Glass Shards 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 Ocean Glass Shards.

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

Data visualization

#AFEEEE#4682B4#F0F8FF#DEB887#FCE5C2

Palette guide

How to use Ocean Glass Shards

Overview

The Ocean Glass Shards palette, a unique blend of cool and warm tones, beautifully captures the essence of a sandy beach adorned with sea glass. It features a refreshing light blue of #AFEEEE, a grounding steel blue #4682B4, and a soft, almost white #F0F8FF. Complementing these are the warm, natural hues of #DEB887 and #FCE5C2, reminiscent of sun-drenched sand. This palette offers designers a versatile foundation for creating designs that feel both serene and inviting. Its distinct combination allows for dynamic contrasts and harmonious blends, perfect for projects aiming for a natural, weathered, yet sophisticated aesthetic.

Best used for

  • Beach resort branding and websites
  • Natural skincare or beauty product packaging
  • Coastal home decor e-commerce
  • Travel blogs focused on seaside destinations
  • Craft and artisan product showcases
  • Relaxing meditation app interfaces

Suggested color roles

primary

Utilize #4682B4 for strong headers or key interactive elements, providing a stable, deep blue.

secondary

Apply #DEB887 for supporting sections or complementary accents, introducing a warm, earthy balance.

accent

Use #AFEEEE for highlight elements or subtle background details, adding a touch of bright, airy freshness.

background

Employ #F0F8FF for clean, expansive backgrounds, offering a very light and neutral canvas.

text

For optimal readability, use a dark charcoal like #333333 or even #4682B4 for headings against the lighter background colors.

Accessibility notes

  • Ensure #4682B4 text has sufficient contrast against #F0F8FF and #AFEEEE.
  • The warm tones #DEB887 and #FCE5C2 may have low contrast with each other; use them carefully for text.
  • White text should be tested carefully against #AFEEEE for WCAG AA compliance.
  • Use a dark, highly contrasting color (e.g., black) for body text on #F0F8FF, #AFEEEE, #DEB887, and #FCE5C2.

Recommended combinations

Sandy Shore

Excellent for soft, warm backgrounds and textured elements, evoking sandy beaches.

#F0F8FF · #FCE5C2 · #DEB887

Ocean Horizon

Creates a classic cool, calm atmosphere, ideal for headers or primary UI sections.

#AFEEEE · #4682B4 · #F0F8FF

Weathered Charm

Combines warm and cool for a rustic, natural feel, suitable for accent details and illustrations.

#DEB887 · #4682B4 · #FCE5C2

CSS variables

:root {
  --ocean-glass-shards-2-1: #AFEEEE;
  --ocean-glass-shards-2-2: #4682B4;
  --ocean-glass-shards-2-3: #F0F8FF;
  --ocean-glass-shards-2-4: #DEB887;
  --ocean-glass-shards-2-5: #FCE5C2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-glass-shards-2": {
        1: "#AFEEEE",
        2: "#4682B4",
        3: "#F0F8FF",
        4: "#DEB887",
        5: "#FCE5C2",
      }
    }
  }
}

Related searches

beach inspired color schemesea glass and sand palettenatural coastal colorsmuted beach toneswarm and cool nature palette

Palette colors

Hex values

Color 1#AFEEEE
·
Color 2#4682B4
·
Color 3#F0F8FF
·
Color 4#DEB887
·
Color 5#FCE5C2
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
1.2:1Fail
1.4:1Fail
1.1:1Fail
2
3.2:1AA18
3.8:1AA18
2.2:1Fail
3.3:1AA18
3
1.2:1Fail
3.8:1AA18
1.7:1Fail
1.1:1Fail
4
1.4:1Fail
2.2:1Fail
1.7:1Fail
1.5:1Fail
5
1.1:1Fail
3.3:1AA18
1.1:1Fail
1.5:1Fail

Similar palettes

More like Ocean Glass Shards

View all cool
Coastal Seagrass Whisper
Ocean Stone Radiance
Winter Pine Grove
Aegean Coast Breeze
Azure Coast Relic
Deep Mossy Glen