Back to palettes

Palette

Porcelain Ocean Sands

Clean and refreshing, like white sands meeting gentle, porcelain blue ocean waves on a serene morning.

pastelminimal5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Porcelain Ocean Sands 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 Porcelain Ocean Sands.

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

Data visualization

#F8F8F8#ADD8E6#B0E0E6#F0F0F0#87CEEB

Palette guide

How to use Porcelain Ocean Sands

Overview

The Porcelain Ocean Sands palette evokes the serene beauty of a pristine coastline, blending crisp whites with gentle, refreshing blues. This collection features the clean, almost-white #F8F8F8 and #F0F0F0, alongside the soothing sky blue of #ADD8E6, the slightly deeper #B0E0E6, and the vibrant yet soft #87CEEB. Designers will find this palette perfect for creating airy, minimalist, and refreshing aesthetics. Developers can leverage these hues for clean user interfaces, tranquil backgrounds, or interactive elements that convey a sense of calm and clarity. It’s an excellent choice for projects aiming for a light, breezy, and modern feel.

Best used for

  • Coastal-themed websites and branding
  • Health and wellness applications
  • Spa and relaxation brand identities
  • Minimalist UI design and dashboards
  • Children's educational materials
  • Travel and tourism promotion

Suggested color roles

primary

#F8F8F8 - A pristine, bright white, ideal for main backgrounds, large content areas, or a clean canvas for minimalist designs.

secondary

#F0F0F0 - A slightly softer white, excellent for secondary backgrounds, card elements, or subtle dividers to add texture without strong contrast.

accent

#87CEEB - The most vibrant blue, perfect for calls-to-action, important icons, or interactive elements that need to stand out.

background

#F8F8F8 or #F0F0F0 - Both offer clean, light backdrops. #F8F8F8 is crisper, while #F0F0F0 is marginally softer.

text

For light backgrounds, a dark navy or charcoal (e.g., #2C3E50) works well. For blues like #87CEEB, white text is recommended for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast between text and the light background shades like #F8F8F8 and #F0F0F0.
  • The blue shades (#ADD8E6, #B0E0E6) might require darker text; always check contrast ratios.
  • #87CEEB can support white text, but verify readability against WCAG standards.
  • Avoid using similar light blues for interactive elements if they lack sufficient contrast from the background.

Recommended combinations

Breezy Horizon

Creates a fresh, open feel, great for headers or primary content blocks.

#F8F8F8 · #ADD8E6 · #87CEEB

Sandy Shore

Provides a gentle blend for backgrounds and secondary UI elements, very calm.

#F0F0F0 · #ADD8E6 · #B0E0E6

Ocean Depths

A slightly bolder combination, suitable for highlights or interactive components.

#F8F8F8 · #B0E0E6 · #87CEEB

CSS variables

:root {
  --porcelain-ocean-sands-1: #F8F8F8;
  --porcelain-ocean-sands-2: #ADD8E6;
  --porcelain-ocean-sands-3: #B0E0E6;
  --porcelain-ocean-sands-4: #F0F0F0;
  --porcelain-ocean-sands-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-ocean-sands": {
        1: "#F8F8F8",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#F0F0F0",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

ocean blue white paletteminimalist pastel colorsrefreshing clean designlight blue brandingserene beach color scheme

Palette colors

Hex values

Color 1#F8F8F8
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#F0F0F0
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.3:1Fail
1.1:1Fail
1.6:1Fail
2
1.4:1Fail
1.1:1Fail
1.3:1Fail
1.1:1Fail
3
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.2:1Fail
4
1.1:1Fail
1.3:1Fail
1.3:1Fail
1.5:1Fail
5
1.6:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail

Similar palettes

More like Porcelain Ocean Sands

View all pastel
Chiffon Cloud Dance
Desert Rose Mirage
Ethereal Cloud Veil
Frosted Mint Delight
Porcelain Bloom Garden
Sea Glass