Palette

Porcelain Blue Wash

A gentle progression of blues, reminiscent of delicate porcelain ceramics or a soft sky.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6EBF0#C1D0DF#8FAFCB#5C8AB5#2F5C8A

Palette guide

How to use Porcelain Blue Wash

Overview

The Porcelain Blue Wash palette presents a refined progression of blues, reminiscent of delicate porcelain ceramics or a soft, clear sky. Ranging from the light #E6EBF0 to the deep #2F5C8A, with intermediate shades like #C1D0DF, #8FAFCB, and #5C8AB5, this scheme offers a clean, minimal, and sophisticated aesthetic. Designers and developers can leverage these harmonious cool tones to create interfaces and designs that exude professionalism, tranquility, and clarity. It's an excellent choice for projects requiring a sense of trust, stability, and modern elegance, without being overly stark.

Best used for

Corporate and professional websites
Tech product interfaces and dashboards
Healthcare branding and materials
Minimalist UI/UX design
Ocean or water-themed projects
Data visualization and infographics

Suggested color roles

primary

Use #2F5C8A as the main color for headings, primary calls to action, or key brand elements for authority.

secondary

Employ #5C8AB5 for secondary buttons, links, or important data points, providing balanced support.

accent

Apply #8FAFCB as a soft accent for subtle highlights, active states, or less critical information.

background

Utilize #E6EBF0 as the clean, almost white background, offering a fresh and expansive canvas.

text

For main body text, #2F5C8A provides excellent contrast. For secondary text or subheadings, #5C8AB5 works well.

Accessibility notes

#2F5C8A and #5C8AB5 offer strong contrast against #E6EBF0, making them ideal for body text and interactive elements.
Ensure #8FAFCB is used for larger text or headings on #E6EBF0, verifying contrast for smaller sizes.
Avoid using #C1D0DF for small text on #E6EBF0, as it may not meet WCAG contrast requirements.
Interactive elements should clearly indicate states (hover, focus) using sufficient contrast or additional visual cues.

Recommended combinations

Deep Contrast

#E6EBF0 as background, #2F5C8A for primary text/buttons, and #5C8AB5 for secondary links or highlights.

#E6EBF0 · #2F5C8A · #5C8AB5

Gradual Depth

Create layered backgrounds or cards, offering a subtle visual progression and structure.

#C1D0DF · #8FAFCB · #5C8AB5

Clean & Bold

#E6EBF0 as main content area, #5C8AB5 for key data, and #2F5C8A for strong calls to action.

#E6EBF0 · #5C8AB5 · #2F5C8A

CSS variables

:root {
  --porcelain-blue-wash-1: #E6EBF0;
  --porcelain-blue-wash-2: #C1D0DF;
  --porcelain-blue-wash-3: #8FAFCB;
  --porcelain-blue-wash-4: #5C8AB5;
  --porcelain-blue-wash-5: #2F5C8A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-blue-wash": {
        1: "#E6EBF0",
        2: "#C1D0DF",
        3: "#8FAFCB",
        4: "#5C8AB5",
        5: "#2F5C8A",
      }
    }
  }
}

Hex values

Color 1#E6EBF0

Color 2#C1D0DF

Color 3#8FAFCB

Color 4#5C8AB5

Color 5#2F5C8A

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3:1AA18

5.8:1AA

1.3:1Fail

1.5:1Fail

2.3:1Fail

4.4:1AA18

1.9:1Fail

1.5:1Fail

1.6:1Fail

3:1AA18

2.3:1Fail

1.6:1Fail

1.9:1Fail

5.8:1AA

4.4:1AA18

3:1AA18

1.9:1Fail

Similar palettes

More like Porcelain Blue Wash

Porcelain Blue Wash

See it in context.

Ready when you are.

Built with Porcelain Blue Wash.

How to use Porcelain Blue Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Contrast

Gradual Depth

Clean & Bold

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Porcelain Blue Wash