Back to palettes

Palette

Tranquil Bliss Flow

Reflects the serene beauty of a calm, flowing stream under a clear, open sky, offering pure tranquility.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tranquil Bliss Flow 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 Tranquil Bliss Flow.

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

Data visualization

#F0F8FF#E0FFFF#AFEEEE#B0E0E6#87CEEB

Palette guide

How to use Tranquil Bliss Flow

Overview

The Tranquil Bliss Flow palette captures the serene beauty of a calm, flowing stream under a clear sky, offering a refreshing spectrum of blues. From the airy #F0F8FF to the soft #E0FFFF, through the tranquil #AFEEEE and #B0E0E6, to the deeper #87CEEB, these colors evoke peace and clarity. This palette is ideal for designers aiming to create clean, soothing, and refreshing digital experiences. It's particularly effective for projects that emphasize calm, well-being, or a minimalist aesthetic, providing a light and harmonious foundation that promotes a sense of ease and open space.

Best used for

  • Wellness and relaxation app interfaces
  • Spa and beauty brand websites
  • Minimalist design portfolios
  • Cloud-based service branding
  • Baby product marketing and packaging
  • Content related to meditation and mental clarity

Suggested color roles

primary

Utilize #87CEEB as a calming yet distinct primary for important headings, calls to action, or key brand elements.

secondary

Employ #AFEEEE for supporting content blocks, subheadings, or background accents, providing a gentle presence.

accent

Apply #B0E0E6 for subtle highlights, interactive states, or decorative elements, adding a soft, refreshing touch.

background

Use #F0F8FF or #E0FFFF as the main background color, creating an expansive, airy, and clean canvas.

text

A dark blue (e.g., #000080) or a medium gray (e.g., #666666) provides excellent readability on these light backgrounds.

Accessibility notes

  • The darkest color, #87CEEB, provides good contrast against the lightest, #F0F8FF, making it suitable for primary text.
  • Avoid using #AFEEEE or #B0E0E6 for small text on backgrounds like #F0F8FF due to potential low contrast.
  • Ensure interactive elements have clear visual states, as the lighter blues have subtle differences in luminosity.
  • Text should be significantly darker than the background colors (e.g., #87CEEB text on #F0F8FF background) to meet WCAG standards.

Recommended combinations

Sky & Water

Creates an airy, light, and expansive feel, perfect for clean backgrounds, header areas, or soft transitions.

#F0F8FF · #E0FFFF · #AFEEEE

Stream Flow

Offers a gentle progression of blues, ideal for layered UI elements, data visualization, or subtle gradients.

#AFEEEE · #B0E0E6 · #87CEEB

Calm Focus

Provides clear contrast for key information against a light background, excellent for calls to action or important content blocks.

#F0F8FF · #87CEEB · #AFEEEE

CSS variables

:root {
  --tranquil-bliss-flow-1: #F0F8FF;
  --tranquil-bliss-flow-2: #E0FFFF;
  --tranquil-bliss-flow-3: #AFEEEE;
  --tranquil-bliss-flow-4: #B0E0E6;
  --tranquil-bliss-flow-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-bliss-flow": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#AFEEEE",
        4: "#B0E0E6",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

calm blue color schemeserene water palettelight cool colorstranquil sky huesminimalist blue design

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E0FFFF
·
Color 3#AFEEEE
·
Color 4#B0E0E6
·
Color 5#87CEEB
·

Accessibility

Contrast checker

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

Similar palettes

More like Tranquil Bliss Flow

View all cool
Calm Ocean Swell
Glacial Lagoon Calm
Glacial Lake Mirror
Glacial Lake Serenity
Koi Water Garden
Lake Mist Reflection