Palette

Percale Finish

Crisp, clean blues and whites, fresh and smooth like a high-quality percale bed linen finish.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Percale Finish 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 Percale Finish.

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

Data visualization

#E0F2F7#F0F8FA#F8FBFC#FFFFFF#C0E0E5

Palette guide

How to use Percale Finish

Overview

The Percale Finish palette offers a crisp and clean collection of cool blues and pure whites, evoking the smooth, fresh feel of high-quality bed linen. With the dominant `#FFFFFF` (White) providing a pristine base and the subtle `#C0E0E5` (PowderBlue) adding a gentle coolness, this palette is ideal for designers and developers aiming for a refined, minimalist, and serene digital aesthetic. Shades like `#E0F2F7` and `#F0F8FA` offer nuanced variations of light blue, perfect for subtle gradients, backgrounds, or layered UI elements. This collection ensures a professional, calming, and highly readable user experience.

Best used for

Luxury home goods branding
Clean and minimalist portfolio websites
Healthcare or wellness app interfaces
Professional corporate websites
High-end editorial designs
Any project requiring a sense of purity and calm

Suggested color roles

primary

Use `#C0E0E5` for main content blocks, headers, or navigation to provide a soft, cool anchor.

secondary

Employ `#E0F2F7` for secondary information, subtle background panels, or hover states.

accent

While subtle, `#F8FBFC` can act as a very soft accent for borders or delicate UI separators, maintaining crispness.

background

Utilize `#FFFFFF` or `#F0F8FA` as the main background color for a clean, bright, and expansive canvas.

text

For excellent readability, use a dark blue, charcoal, or black text on `#FFFFFF` or `#F0F8FA` backgrounds.

Accessibility notes

Ensure sufficient contrast for dark text on `#FFFFFF` or `#F0F8FA` backgrounds.
Avoid using `#F8FBFC` or `#F0F8FA` for text on `#FFFFFF` backgrounds due to extremely low contrast.
Check contrast ratios carefully when using `#E0F2F7` or `#C0E0E5` for text, especially on lighter backgrounds.
For critical information, prioritize strong contrast pairings like black text on white.

Recommended combinations

Crisp White

Creates a very clean, ethereal background with subtle variations, ideal for minimalist designs.

#FFFFFF · #F8FBFC · #F0F8FA

Cool Layer

Excellent for defining sections or cards, with the cool blue providing a gentle visual separation.

#C0E0E5 · #E0F2F7 · #FFFFFF

Soft Depth

Perfect for subtle gradients, dividers, or background textures that require a gentle color shift and cool tone.

#E0F2F7 · #F0F8FA · #C0E0E5

CSS variables

:root {
  --percale-finish-1: #E0F2F7;
  --percale-finish-2: #F0F8FA;
  --percale-finish-3: #F8FBFC;
  --percale-finish-4: #FFFFFF;
  --percale-finish-5: #C0E0E5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "percale-finish": {
        1: "#E0F2F7",
        2: "#F0F8FA",
        3: "#F8FBFC",
        4: "#FFFFFF",
        5: "#C0E0E5",
      }
    }
  }
}

Hex values

Color 1#E0F2F7

Color 2#F0F8FA

Color 3#F8FBFC

Color 4#FFFFFF

Color 5#C0E0E5

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

Similar palettes

More like Percale Finish

Percale Finish

See it in context.

Ready when you are.

Built with Percale Finish.

How to use Percale Finish

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Crisp White

Cool Layer

Soft Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Percale Finish