Back to palettes

Palette

Seafoam Dreamscape

Gentle, airy greens and blues that evoke the soft, ephemeral beauty of seafoam on a tranquil shore.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seafoam Dreamscape 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 Seafoam Dreamscape.

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

Data visualization

#F0FFFF#C9E2B2#A6D6D6#6FBAC5#488B97

Palette guide

How to use Seafoam Dreamscape

Overview

The Seafoam Dreamscape palette offers a gentle, airy blend of greens and blues, mirroring the soft, ephemeral beauty of seafoam on a tranquil shore. With hues ranging from the pure white of #F0FFFF to the deep teal of #488B97, alongside the calming #A6D6D6 and a touch of #C9E2B2, this scheme inspires serenity and peace. Designers seeking to create a relaxed, natural, or ethereal aesthetic will find this palette highly versatile. Developers can implement these colors to build user interfaces that feel calm and inviting, perfect for applications focused on wellness, nature, or gentle guidance, ensuring a soothing user experience.

Best used for

  • Wellness and meditation applications
  • Baby product brands and websites
  • Spa and beauty industry marketing
  • Eco-friendly packaging and product design
  • Relaxed UI/UX for lifestyle blogs
  • Children's book illustrations and educational content

Suggested color roles

primary

Use #488B97 as a calming brand anchor for main headings or key brand elements, providing a grounded feel.

secondary

Apply #6FBAC5 for supporting sections, subheadings, or decorative elements, adding a gentle flow.

accent

Employ #C9E2B2 for subtle highlights, interactive states, or gentle calls to action, maintaining softness.

background

Utilize #F0FFFF as a pure, expansive background, providing an airy and clean base for content.

text

For optimal readability, use #488B97 or a dark charcoal on light backgrounds like #F0FFFF.

Accessibility notes

  • The contrast of #488B97 on #F0FFFF is good for all text sizes.
  • Use #6FBAC5 for larger text on #F0FFFF, as its contrast might be too low for small body text.
  • Avoid using #C9E2B2 or #A6D6D6 for small text on #F0FFFF due to insufficient contrast.
  • Ensure interactive elements in lighter tones have clear visual indicators beyond color alone.

Recommended combinations

Airy Serenity

Creates a clean, tranquil look with a white background, deep teal text, and soft green accents for a peaceful feel.

#F0FFFF · #488B97 · #C9E2B2

Gentle Flow

Ideal for creating subtle gradients or layered sections that transition smoothly, reminiscent of water.

#A6D6D6 · #6FBAC5 · #488B97

Dreamy Accents

Uses a light base with soft green and blue for delicate elements, perfect for subtle visual interest.

#F0FFFF · #C9E2B2 · #6FBAC5

CSS variables

:root {
  --seafoam-dreamscape-1: #F0FFFF;
  --seafoam-dreamscape-2: #C9E2B2;
  --seafoam-dreamscape-3: #A6D6D6;
  --seafoam-dreamscape-4: #6FBAC5;
  --seafoam-dreamscape-5: #488B97;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seafoam-dreamscape": {
        1: "#F0FFFF",
        2: "#C9E2B2",
        3: "#A6D6D6",
        4: "#6FBAC5",
        5: "#488B97",
      }
    }
  }
}

Related searches

seafoam green palettetranquil aqua colorssoft pastel uicalming web designdreamlike color scheme

Palette colors

Hex values

Color 1#F0FFFF
·
Color 2#C9E2B2
·
Color 3#A6D6D6
·
Color 4#6FBAC5
·
Color 5#488B97
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
2.2:1Fail
3.8:1AA18
2
1.4:1Fail
1.1:1Fail
1.6:1Fail
2.8:1Fail
3
1.5:1Fail
1.1:1Fail
1.4:1Fail
2.4:1Fail
4
2.2:1Fail
1.6:1Fail
1.4:1Fail
1.8:1Fail
5
3.8:1AA18
2.8:1Fail
2.4:1Fail
1.8:1Fail

Similar palettes

More like Seafoam Dreamscape

View all pastel
Aqua Aura
Cloudless Sky Wash
Dewdrop Petal Blush
Dreamy Cloudscape
Dreamy Cotton
Dreamy Skyscape Tint