Back to palettes

Palette

Ocean Stone Radiance

Capturing the earthy yet vibrant tones of polished stones and minerals found on a wild beach.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Stone Radiance 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 Stone Radiance.

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

Data visualization

#1B646B#6E9C9F#A0BFC0#2D3E40#C5B2A1

Palette guide

How to use Ocean Stone Radiance

Overview

The Ocean Stone Radiance palette captures the earthy yet vibrant tones of polished stones and minerals found on a wild beach. It is anchored by the deep, rich teal #1B646B and the dark, almost black blue-grey #2D3E40, providing strong, natural foundations. These are beautifully complemented by the softer, muted teal #6E9C9F and the light, airy grey-blue #A0BFC0, reminiscent of sea-washed pebbles. A unique touch of warmth comes from the sandy beige #C5B2A1, adding a natural, organic feel. This palette is ideal for designers creating projects with a rugged, natural, or sophisticated coastal aesthetic. Developers can apply these hex codes to build user interfaces that feel grounded, elegant, and timeless, perfect for outdoor apparel, artisanal crafts, or architectural firms.

Best used for

  • Outdoor and adventure brand identities
  • Artisanal craft and handmade product branding
  • Architectural and interior design firms
  • Natural history museum displays
  • Eco-luxury product packaging
  • Men's fashion or grooming brands

Suggested color roles

primary

#1B646B (Deep Teal) - Excellent for primary headings, navigation, or strong brand elements, conveying depth, nature, and sophistication.

secondary

#2D3E40 (Dark Blue-Grey) - Use for strong text, secondary navigation, or as a grounding dark element, providing robust contrast.

accent

#C5B2A1 (Sandy Beige) - Ideal for subtle accents, highlights, or background textures to introduce warmth and an organic touch.

background

#A0BFC0 (Light Grey-Blue) - Provides a soft, cool, and clean base, allowing the deeper tones to stand out.

text

For primary text, use #2D3E40 or black on light backgrounds. For headings, #1B646B on #A0BFC0.

Accessibility notes

  • #A0BFC0 is light; use dark text (e.g., #2D3E40 or black) for all content on this background.
  • #1B646B and #2D3E40 provide excellent contrast for light text, but dark text on #A0BFC0 is preferred.
  • Text in #6E9C9F will require dark text for WCAG AA contrast.
  • Ensure sufficient contrast when placing #C5B2A1 near other light tones like #A0BFC0.

Recommended combinations

Grounded Elegance

A light grey-blue background with deep teal for primary elements and dark blue-grey for text, creating a sophisticated, natural look.

#A0BFC0 · #1B646B · #2D3E40

Earth & Sea

A sandy beige base with muted teal for secondary elements and deep teal for strong accents, evoking a coastal, earthy feel.

#C5B2A1 · #6E9C9F · #1B646B

Stone Texture

Dark blue-grey as a dominant color, light grey-blue for contrasting sections, and muted teal for subtle highlights, mimicking natural stone.

#2D3E40 · #A0BFC0 · #6E9C9F

CSS variables

:root {
  --ocean-stone-radiance-1: #1B646B;
  --ocean-stone-radiance-2: #6E9C9F;
  --ocean-stone-radiance-3: #A0BFC0;
  --ocean-stone-radiance-4: #2D3E40;
  --ocean-stone-radiance-5: #C5B2A1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-stone-radiance": {
        1: "#1B646B",
        2: "#6E9C9F",
        3: "#A0BFC0",
        4: "#2D3E40",
        5: "#C5B2A1",
      }
    }
  }
}

Related searches

natural ocean stone colorsearthy coastal palettesophisticated teal grey schemeorganic beach designtimeless mineral UI colors

Palette colors

Hex values

Color 1#1B646B
·
Color 2#6E9C9F
·
Color 3#A0BFC0
·
Color 4#2D3E40
·
Color 5#C5B2A1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.5:1AA18
1.6:1Fail
3.3:1AA18
2
2.2:1Fail
1.5:1Fail
3.7:1AA18
1.5:1Fail
3
3.5:1AA18
1.5:1Fail
5.7:1AA
1:1Fail
4
1.6:1Fail
3.7:1AA18
5.7:1AA
5.5:1AA
5
3.3:1AA18
1.5:1Fail
1:1Fail
5.5:1AA

Similar palettes

More like Ocean Stone Radiance

View all cool
Emerald Coast Sparkle
Emerald Coastline Bloom
Ocean Glass Shards
Tidal Pool Emeralds
Winter Pine Grove
Azure Coast Relic