Back to palettes

Palette

Porcelain Teacup Blue

Soft, muted blues and almost-whites create a gentle, refined feel, reminiscent of fine porcelain teacups.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Porcelain Teacup Blue 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 Teacup Blue.

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

Data visualization

#E0FFFF#ADD8E6#B0E0E6#C7DDEA#F5F8F9

Palette guide

How to use Porcelain Teacup Blue

Overview

The Porcelain Teacup Blue palette is a collection of soft, muted blues and almost-whites, designed to evoke the gentle, refined feel of classic porcelain. Featuring the crisp #E0FFFF, the serene #ADD8E6, the slightly deeper #B0E0E6, and the very light #F5F8F9, this palette is perfect for creating calm, minimalist, and elegant aesthetics. Designers can leverage these hues for a clean, sophisticated look that feels both refreshing and timeless. Developers will find them ideal for crafting airy user interfaces, tranquil backgrounds, or subtle interactive elements, ensuring a harmonious and understated digital experience.

Best used for

  • Minimalist website design
  • High-end homeware branding
  • Spa and wellness applications
  • Delicate product packaging
  • Serene interior design concepts
  • Clean tech interfaces and dashboards

Suggested color roles

primary

#F5F8F9 - A very light, almost-white blue, excellent for expansive main backgrounds or a clean canvas for minimalist content.

secondary

#E0FFFF - A bright, airy light blue, perfect for secondary content areas, card backgrounds, or subtle overlays, adding luminosity.

accent

#B0E0E6 - A slightly more saturated blue, ideal for subtle accents, interactive elements, or key typography to draw attention gently.

background

#F5F8F9 - Provides a clean, bright, and calming backdrop. #E0FFFF can also be used for a more distinct, light blue background.

text

For light backgrounds, a dark navy or charcoal (e.g., #2F4F4F) provides good contrast. For #B0E0E6, white text is recommended for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between text and the very light background shades, especially #F5F8F9 and #E0FFFF.
  • The lighter blues (#ADD8E6, #C7DDEA) may require darker text; always check contrast ratios.
  • #B0E0E6 can support white text, but verify readability against WCAG AA standards.
  • Avoid using similar light tones for interactive elements unless they have a distinct hover or focus state.

Recommended combinations

Teacup Clarity

Creates a very clean, bright, and harmonious base for minimalist designs.

#F5F8F9 · #E0FFFF · #ADD8E6

Gentle Flow

Provides a subtle progression of cool tones, good for layered backgrounds or visual depth.

#E0FFFF · #C7DDEA · #B0E0E6

Porcelain Accent

A balanced trio for clean layouts, using the deeper blue for key interactive elements.

#F5F8F9 · #ADD8E6 · #B0E0E6

CSS variables

:root {
  --porcelain-teacup-blue-1: #E0FFFF;
  --porcelain-teacup-blue-2: #ADD8E6;
  --porcelain-teacup-blue-3: #B0E0E6;
  --porcelain-teacup-blue-4: #C7DDEA;
  --porcelain-teacup-blue-5: #F5F8F9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-teacup-blue": {
        1: "#E0FFFF",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#C7DDEA",
        5: "#F5F8F9",
      }
    }
  }
}

Related searches

minimalist blue white palettedelicate cool color schemesoft porcelain bluecalm UI colorsserene teacup design

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#C7DDEA
·
Color 5#F5F8F9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.4:1Fail
1.3:1Fail
1:1Fail
2
1.4:1Fail
1.1:1Fail
1.1:1Fail
1.4:1Fail
3
1.4:1Fail
1.1:1Fail
1:1Fail
1.3:1Fail
4
1.3:1Fail
1.1:1Fail
1:1Fail
1.3:1Fail
5
1:1Fail
1.4:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Porcelain Teacup Blue

View all cool
Nordic Winter Calm
Arctic Chill Breeze
Arctic Glacier Chill
Arctic Glacier Chill
Arctic Ice Crystal
Arctic Ice Drift