Palette

Soothing Bath Soak

Gentle, watery blues that mimic a tranquil, calming bath perfect for relaxation.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soothing Bath Soak 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 Soothing Bath Soak.

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

Data visualization

#D9F2F7#B2E5ED#87D5E3#5CBCE1#3FA8DC

Palette guide

How to use Soothing Bath Soak

Overview

The Soothing Bath Soak palette offers a gentle, watery spectrum of blues that perfectly mimic a tranquil, calming bath. This serene collection features a very light blue (#D9F2F7), a soft sky blue (#B2E5ED), a clear aqua (#87D5E3), a refreshing light blue (#5CBCE1), and a deeper, more saturated blue (#3FA8DC). Designers will find this palette invaluable for creating peaceful, clean, and refreshing visual experiences. It's ideal for projects that aim to convey relaxation, trust, or a sense of purity. Developers can effectively apply these hues for health and wellness apps, spa websites, or any interface where a calm, inviting, and user-friendly atmosphere is paramount, promoting a sense of ease and clarity.

Best used for

Spa and wellness center branding
Healthcare and medical websites
Baby product design and marketing
Clean, minimalist app interfaces
Environmental or eco-friendly initiatives
Relaxation and meditation applications

Suggested color roles

primary

Use #3FA8DC as a grounding primary color for headers or important interactive elements, providing depth and trust.

secondary

Apply #87D5E3 for main content areas or supporting graphics, offering a refreshing and clear presence.

accent

Utilize #5CBCE1 for calls-to-action or subtle highlights, drawing attention gently without harshness.

background

Employ #D9F2F7 as a light, airy background, or #B2E5ED for a slightly more saturated yet still serene base.

text

A dark charcoal or black is recommended for optimal readability on lighter backgrounds like #D9F2F7 and #B2E5ED. #3FA8DC can also work for text on these light backgrounds.

Accessibility notes

Ensure sufficient contrast for dark text on the lightest blues (#D9F2F7, #B2E5ED).
Avoid using light blue text on similar light blue backgrounds for critical information.
White text will generally have good contrast on #3FA8DC and #5CBCE1.
Always use a WCAG contrast checker to verify all text and background color combinations for accessibility.

Recommended combinations

Tranquil Flow

Creates a serene, flowing gradient or layered effect for headers and banners, transitioning from light to deep blue.

#D9F2F7 · #87D5E3 · #3FA8DC

Clean Interface

Ideal for clean UI: #D9F2F7 as a background, #3FA8DC for primary text or buttons, and #5CBCE1 for subtle accents or hover states.

#D9F2F7 · #3FA8DC · #5CBCE1

Refreshing Accent

A harmonious combination for cards or feature blocks: #B2E5ED as the base, #5CBCE1 for headings, and #87D5E3 for supporting details.

#B2E5ED · #5CBCE1 · #87D5E3

CSS variables

:root {
  --soothing-bath-soak-1: #D9F2F7;
  --soothing-bath-soak-2: #B2E5ED;
  --soothing-bath-soak-3: #87D5E3;
  --soothing-bath-soak-4: #5CBCE1;
  --soothing-bath-soak-5: #3FA8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soothing-bath-soak": {
        1: "#D9F2F7",
        2: "#B2E5ED",
        3: "#87D5E3",
        4: "#5CBCE1",
        5: "#3FA8DC",
      }
    }
  }
}

Hex values

Color 1#D9F2F7

Color 2#B2E5ED

Color 3#87D5E3

Color 4#5CBCE1

Color 5#3FA8DC

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.8:1Fail

2.3:1Fail

1.2:1Fail

1.6:1Fail

2:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

1.8:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

2.3:1Fail

2:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Soothing Bath Soak

Soothing Bath Soak

See it in context.

Ready when you are.

Built with Soothing Bath Soak.

How to use Soothing Bath Soak

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Tranquil Flow

Clean Interface

Refreshing Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Soothing Bath Soak