Back to palettes

Palette

Ceramic Glaze Ocean

Reflects the subtle variations of ocean-inspired ceramic glazes, from deep blues to clear aqua.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ceramic Glaze Ocean 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 Ceramic Glaze Ocean.

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

Data visualization

#2F4F4F#4682B4#6495ED#ADD8E6#E0FFFF

Palette guide

How to use Ceramic Glaze Ocean

Overview

The "Ceramic Glaze Ocean" palette (ID ceramic-glaze-ocean-3) reflects the subtle variations of ocean-inspired ceramic glazes, offering a journey from deep, mysterious blues to clear, vibrant aquas. It grounds itself with the profound #2F4F4F, a dark blue-green, then flows into the strong #4682B4 and the inviting #6495ED. Lighter, ethereal tones like #ADD8E6 and the almost transparent #E0FFFF complete the spectrum, evoking serene waters. This collection is perfect for designers creating themes of tranquility, artisan craft, or natural beauty. Developers can utilize these colors for sophisticated interfaces in travel, eco-luxury, or art-focused applications, providing a visually rich and calming user experience.

Best used for

  • Luxury travel agency websites
  • Art gallery branding
  • Eco-friendly product packaging
  • Oceanography educational platforms
  • High-end spa services
  • Apparel with a nautical theme

Suggested color roles

primary

#4682B4 - A solid steel blue, ideal for main content areas, prominent headers, or key interactive elements, providing depth.

secondary

#6495ED - A vibrant cornflower blue, excellent for subheadings, active states, or graphical accents that need to stand out.

accent

#ADD8E6 - A light, clear blue, perfect for subtle highlights, small icons, or to draw attention to secondary information.

background

#2F4F4F - A very dark, blue-green, serving as an immersive, sophisticated background, especially for dark mode designs.

text

#E0FFFF - A very light aqua, providing excellent contrast and readability for text on the dark #2F4F4F background.

Accessibility notes

  • Text in #E0FFFF on #2F4F4F or #4682B4 provides strong contrast and readability.
  • Avoid placing #ADD8E6 text on #6495ED due to insufficient contrast for critical information.
  • Ensure interactive elements in lighter shades like #ADD8E6 have clear focus states.
  • For body text, use #E0FFFF against the darkest colors to meet WCAG AA standards.

Recommended combinations

Deep Sea

Creates a strong, deep ocean feel, with the lightest color for stark, clear contrast in text or highlights.

#2F4F4F · #4682B4 · #E0FFFF

Glaze Horizon

Ideal for layered backgrounds or card designs, showing a transition from light to deep.

#6495ED · #ADD8E6 · #2F4F4F

Aqua Craft

Excellent for showcasing product details or feature blocks with a consistent cool-tone theme.

#4682B4 · #ADD8E6 · #6495ED

CSS variables

:root {
  --ceramic-glaze-ocean-3-1: #2F4F4F;
  --ceramic-glaze-ocean-3-2: #4682B4;
  --ceramic-glaze-ocean-3-3: #6495ED;
  --ceramic-glaze-ocean-3-4: #ADD8E6;
  --ceramic-glaze-ocean-3-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ceramic-glaze-ocean-3": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6495ED",
        4: "#ADD8E6",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

deep ocean blue paletteglossy ceramic colorscool craft designblue green gradientsserene web ui colors

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4682B4
·
Color 3#6495ED
·
Color 4#ADD8E6
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3:1AA18
5.8:1AA
8.5:1AAA
2
2.2:1Fail
1.4:1Fail
2.7:1Fail
3.9:1AA18
3
3:1AA18
1.4:1Fail
1.9:1Fail
2.8:1Fail
4
5.8:1AA
2.7:1Fail
1.9:1Fail
1.4:1Fail
5
8.5:1AAA
3.9:1AA18
2.8:1Fail
1.4:1Fail

Similar palettes

More like Ceramic Glaze Ocean

View all cool