Back to palettes

Palette

Ceramic Glaze Ocean

The smooth, vibrant hues of glazed pottery, reflecting the calm, clear waters of the Mediterranean Sea.

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

#4169E1#87CEEB#B0C4DE#E0FFFF#F5F5DC

Palette guide

How to use Ceramic Glaze Ocean

Overview

The "Ceramic Glaze Ocean" palette (ID ceramic-glaze-ocean) evokes the smooth, vibrant hues of glazed pottery, reflecting the calm, clear waters of the Mediterranean Sea. It anchors with the compelling #4169E1, transitioning through the bright #87CEEB and the softer #B0C4DE. The palette brightens with the airy #E0FFFF, and introduces a unique warmth with #F5F5DC. This versatile collection is perfect for designers creating themes of tranquility, coastal elegance, or artisanal beauty. Developers can leverage these colors for refreshing user interfaces in travel, lifestyle, or craft-oriented applications, delivering a visually appealing and calming experience.

Best used for

  • Mediterranean restaurant branding
  • Coastal home decor websites
  • Travel agency promotions
  • Artisan pottery e-commerce
  • Summer fashion lookbooks
  • Wellness app interfaces

Suggested color roles

primary

#4169E1 - A strong royal blue, ideal for main headings, call-to-action buttons, or key navigational elements, conveying trust.

secondary

#87CEEB - A bright sky blue, excellent for subheadings, active states, or graphical elements that need to pop.

accent

#F5F5DC - A soft cream, perfect for subtle highlights, background textures, or to introduce a touch of warmth and elegance.

background

#E0FFFF - A very light aqua, serving as a clean, expansive, and refreshing canvas for content.

text

#4169E1 - A strong royal blue, providing excellent contrast and readability for text on lighter backgrounds like #E0FFFF or #F5F5DC.

Accessibility notes

  • Ensure #4169E1 text on #E0FFFF or #F5F5DC backgrounds meets WCAG contrast standards.
  • Avoid using #87CEEB for small text on light backgrounds like #E0FFFF due to potential low contrast.
  • The darkest color, #4169E1, provides good contrast for white or very light text.
  • For body text, prefer #4169E1 against #E0FFFF for optimal readability across devices.

Recommended combinations

Mediterranean Breeze

Creates a vibrant yet calm coastal feel, with the lightest blue providing a clear sky effect.

#4169E1 · #87CEEB · #E0FFFF

Glazed Pottery

Ideal for showcasing artisanal products, using the cream as a warm base and royal blue as an accent.

#B0C4DE · #F5F5DC · #4169E1

Clear Waters

Excellent for backgrounds or large sections where a soft, flowing blue gradient is desired.

#87CEEB · #E0FFFF · #B0C4DE

CSS variables

:root {
  --ceramic-glaze-ocean-1: #4169E1;
  --ceramic-glaze-ocean-2: #87CEEB;
  --ceramic-glaze-ocean-3: #B0C4DE;
  --ceramic-glaze-ocean-4: #E0FFFF;
  --ceramic-glaze-ocean-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ceramic-glaze-ocean": {
        1: "#4169E1",
        2: "#87CEEB",
        3: "#B0C4DE",
        4: "#E0FFFF",
        5: "#F5F5DC",
      }
    }
  }
}

Related searches

mediterranean blue palettecalm ocean glaze colorsartisanal blue greencoastal web designserene pottery hues

Palette colors

Hex values

Color 1#4169E1
·
Color 2#87CEEB
·
Color 3#B0C4DE
·
Color 4#E0FFFF
·
Color 5#F5F5DC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.8:1Fail
2.7:1Fail
4.6:1AA
4.4:1AA18
2
2.8:1Fail
1:1Fail
1.7:1Fail
1.6:1Fail
3
2.7:1Fail
1:1Fail
1.7:1Fail
1.6:1Fail
4
4.6:1AA
1.7:1Fail
1.7:1Fail
1:1Fail
5
4.4:1AA18
1.6:1Fail
1.6:1Fail
1:1Fail

Similar palettes

More like Ceramic Glaze Ocean

View all cool