Back to palettes

Palette

Ocean Jasper Depth

Drawing inspiration from the complex patterns and soothing depths of ocean jasper, tranquil and organic.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Jasper Depth 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 Jasper Depth.

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

Data visualization

#5E8C8C#8FB8B8#C2DEDE#416D6D#A5CCCC

Palette guide

How to use Ocean Jasper Depth

Overview

The Ocean Jasper Depth palette draws inspiration from the tranquil, intricate patterns of the ocean jasper gemstone, offering a soothing collection of muted blue-greens. From the deep, grounding #416D6D to the airy #C2DEDE, and the balanced #5E8C8C, this palette delivers an organic and sophisticated feel. The mid-tones like #8FB8B8 and #A5CCCC provide harmonious transitions, allowing designers to create layered and textured visuals. Developers will appreciate the cohesive nature for building interfaces that exude calmness and natural elegance, ideal for projects seeking an earthy yet refined aesthetic.

Best used for

  • Mineral and gemstone inspired brands
  • Holistic wellness and spa services
  • Sustainable and organic product packaging
  • Nature-themed editorial design
  • Interior design mood boards
  • Serene digital interfaces

Suggested color roles

primary

Use #416D6D for strong foundational elements or impactful headings, providing depth and stability.

secondary

Apply #5E8C8C for supporting content areas or subtle branding, maintaining the natural, muted feel.

accent

Highlight with #A5CCCC for interactive elements or delicate design details, offering a soft, inviting touch.

background

Employ #C2DEDE for light, expansive backgrounds, creating a clean and tranquil base.

text

For optimal readability, use #416D6D for headings and a dark charcoal like #333333 for body text against the lighter palette colors.

Accessibility notes

  • Ensure #416D6D text on #C2DEDE provides sufficient contrast for WCAG AA compliance.
  • The lighter colors, #C2DEDE and #A5CCCC, require a dark text color for readability.
  • Avoid placing #8FB8B8 text on #A5CCCC without careful contrast checking.
  • For small text, always prioritize pairing with the darkest color or a true black/dark grey.

Recommended combinations

Jasper Core

Ideal for creating depth and an organic, sophisticated feel in branding or UI elements.

#416D6D · #5E8C8C · #8FB8B8

Mineral Glow

Excellent for soft backgrounds, gradients, or layered graphics, evoking a luminous, natural quality.

#C2DEDE · #A5CCCC · #8FB8B8

Deep Serenity

Provides a harmonious balance of deep and light, suitable for primary content areas and design accents.

#5E8C8C · #416D6D · #C2DEDE

CSS variables

:root {
  --ocean-jasper-depth-1: #5E8C8C;
  --ocean-jasper-depth-2: #8FB8B8;
  --ocean-jasper-depth-3: #C2DEDE;
  --ocean-jasper-depth-4: #416D6D;
  --ocean-jasper-depth-5: #A5CCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-jasper-depth": {
        1: "#5E8C8C",
        2: "#8FB8B8",
        3: "#C2DEDE",
        4: "#416D6D",
        5: "#A5CCCC",
      }
    }
  }
}

Related searches

ocean jasper color palettemuted blue green schemetranquil mineral colorsnatural gemstone paletteserene organic design

Palette colors

Hex values

Color 1#5E8C8C
·
Color 2#8FB8B8
·
Color 3#C2DEDE
·
Color 4#416D6D
·
Color 5#A5CCCC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
1.5:1Fail
2.2:1Fail
2
1.7:1Fail
1.5:1Fail
2.7:1Fail
1.2:1Fail
3
2.6:1Fail
1.5:1Fail
4.1:1AA18
1.2:1Fail
4
1.5:1Fail
2.7:1Fail
4.1:1AA18
3.3:1AA18
5
2.2:1Fail
1.2:1Fail
1.2:1Fail
3.3:1AA18

Similar palettes

More like Ocean Jasper Depth

View all cool
Abyssal Current Glide
Deep Kelp Forest
Deep Ocean Bloom
Deep Sea Flora Bed
Emerald Grotto Depths
Indigo Shore Swell