Back to palettes

Palette

Marine Ceramic Wash

Coastal blues and muted beiges reminiscent of ocean-washed pottery and smooth beach stones.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Marine Ceramic Wash 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 Marine Ceramic Wash.

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

Data visualization

#B0E0E6#87CEFA#5F9EA0#4682B4#D2B48C

Palette guide

How to use Marine Ceramic Wash

Overview

The Marine Ceramic Wash palette features coastal blues and muted beiges, reminiscent of ocean-washed pottery and smooth beach stones. This collection includes light sky blue #B0E0E6, vibrant light blue #87CEFA, cadet blue #5F9EA0, muted steel blue #4682B4, and a sandy beige #D2B48C. It's an excellent choice for designers and developers aiming to create calm, natural, and earthy designs. The palette evokes a sense of tranquility, coastal serenity, and artisanal craftsmanship, making it versatile for eco-friendly or wellness-oriented branding.

Best used for

  • Coastal decor and home goods brands
  • Eco-friendly product packaging and branding
  • Spa and wellness center websites
  • Nature photography and travel blogs
  • Relaxed interior design concepts
  • Artisanal crafts and pottery showcases

Suggested color roles

primary

Utilize #4682B4 as a grounding primary for main branding, structural elements, or to convey stability and depth.

secondary

Employ #5F9EA0 for supporting sections, subheadings, or to add a subtle layer of depth and cool tones.

accent

Apply #D2B48C as an earthy accent for warmth, subtle contrast, or to highlight natural textures.

background

Use #B0E0E6 as a light, serene, and airy background that provides a clean canvas for other elements.

text

For optimal readability on light backgrounds, use #4682B4 or black. White text provides excellent contrast on #4682B4.

Accessibility notes

  • Ensure #4682B4 text on #B0E0E6 background meets WCAG contrast standards for clear readability.
  • The beige #D2B48C on #B0E0E6 might have low contrast for small text; use for larger headings or decorative elements.
  • Use a darker blue like #4682B4 for body text on lighter backgrounds to ensure optimal readability.
  • White text on #4682B4 or #5F9EA0 provides good contrast for headings and key information.

Recommended combinations

Coastal Breeze

Perfect for light and airy UI, relaxing themes, and evoking a sense of openness and calm.

#B0E0E6 · #87CEFA · #D2B48C

Ocean Pottery

Ideal for earthy branding, natural product design, and conveying artisanal quality.

#4682B4 · #5F9EA0 · #D2B48C

Calm Waters

Suitable for subtle gradients, serene backgrounds, and creating a harmonious, balanced visual.

#87CEFA · #D2B48C · #B0E0E6

CSS variables

:root {
  --marine-ceramic-wash-1: #B0E0E6;
  --marine-ceramic-wash-2: #87CEFA;
  --marine-ceramic-wash-3: #5F9EA0;
  --marine-ceramic-wash-4: #4682B4;
  --marine-ceramic-wash-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "marine-ceramic-wash": {
        1: "#B0E0E6",
        2: "#87CEFA",
        3: "#5F9EA0",
        4: "#4682B4",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

coastal blue paletteearthy marine colorsceramic inspired designcalm ocean huesnatural beach tones

Palette colors

Hex values

Color 1#B0E0E6
·
Color 2#87CEFA
·
Color 3#5F9EA0
·
Color 4#4682B4
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.1:1Fail
2.9:1Fail
1.4:1Fail
2
1.2:1Fail
1.8:1Fail
2.4:1Fail
1.1:1Fail
3
2.1:1Fail
1.8:1Fail
1.3:1Fail
1.5:1Fail
4
2.9:1Fail
2.4:1Fail
1.3:1Fail
2.1:1Fail
5
1.4:1Fail
1.1:1Fail
1.5:1Fail
2.1:1Fail

Similar palettes

More like Marine Ceramic Wash

View all cool
Azure Coast Relic
Azure Coastline
Bohemian Sky Weave
Celestial Ocean Mirror
Coastal Rockpool
Coastal Seagrass Whisper