Palette

Wet Stone Stream

Cool blues and greys reflect the smooth, wet stones found in a clear mountain stream.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wet Stone Stream 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 Wet Stone Stream.

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

Data visualization

#2F3C4C#50657C#7C95B4#B3C8E0#DFEDF8

Palette guide

How to use Wet Stone Stream

Overview

The 'Wet Stone Stream' palette offers a serene and minimalist collection of cool blues and greys, inspired by tranquil mountain waters. Ranging from the deep #2F3C4C to the airy #DFEDF8, with mid-tones like #50657C, #7C95B4, and #B3C8E0, this gradient provides a sense of calm and clarity. It's a versatile choice for designers and developers seeking to evoke stability, trust, and a clean aesthetic. This palette is perfect for projects where subtlety and sophisticated simplicity are key, creating a soothing visual experience.

Best used for

Corporate websites and professional branding
Healthcare or wellness app design
Minimalist UI/UX designs
Nature-inspired product packaging
Financial services interfaces
Architectural or interior design presentations

Suggested color roles

primary

Set #2F3C4C as a deep, grounding primary background or for weighty elements, conveying stability and professionalism.

secondary

Use #50657C or #7C95B4 for secondary backgrounds, cards, or navigation, offering a gentle contrast and layering.

accent

Highlight with #B3C8E0 or #DFEDF8 for subtle interactive elements, hover states, or to draw attention to lighter content areas.

background

Leverage #DFEDF8 for clean, airy primary backgrounds, or #2F3C4C for a darker, more contemplative base, building layers with the other blues.

text

For dark backgrounds like #2F3C4C, use a light color like #DFEDF8 or white. For lighter backgrounds such as #DFEDF8, use #2F3C4C or #50657C for clear, readable text.

Accessibility notes

Ensure sufficient contrast between lighter text (e.g., #DFEDF8) and darker backgrounds (e.g., #2F3C4C) for readability.
When using mid-tones like #7C95B4 as a background, test text colors like #2F3C4C and #DFEDF8 to meet WCAG contrast guidelines.
The close proximity of some lighter shades may require careful contrast checking when used together for small elements.
This palette is generally color-blind friendly due to its monochromatic nature, but always verify critical information distinction.

Recommended combinations

Deep Stream

A high-contrast blend, perfect for a dark base with clear, readable content and bright accents.

#2F3C4C · #7C95B4 · #DFEDF8

Misty Morning

Ideal for a light, airy design, using the mid-tones for hierarchy and softer visual interest.

#DFEDF8 · #50657C · #B3C8E0

Stone Path

Creates a balanced, professional look with a prominent mid-blue, supported by a deep tone and a gentle highlight.

#50657C · #2F3C4C · #B3C8E0

CSS variables

:root {
  --wet-stone-stream-1: #2F3C4C;
  --wet-stone-stream-2: #50657C;
  --wet-stone-stream-3: #7C95B4;
  --wet-stone-stream-4: #B3C8E0;
  --wet-stone-stream-5: #DFEDF8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wet-stone-stream": {
        1: "#2F3C4C",
        2: "#50657C",
        3: "#7C95B4",
        4: "#B3C8E0",
        5: "#DFEDF8",
      }
    }
  }
}

Hex values

Color 1#2F3C4C

Color 2#50657C

Color 3#7C95B4

Color 4#B3C8E0

Color 5#DFEDF8

Accessibility

Contrast checker

1.9:1Fail

3.6:1AA18

6.5:1AA

9.4:1AAA

1.9:1Fail

2:1Fail

3.5:1AA18

5:1AA

3.6:1AA18

2:1Fail

1.8:1Fail

2.6:1Fail

6.5:1AA

3.5:1AA18

1.8:1Fail

1.4:1Fail

9.4:1AAA

5:1AA

2.6:1Fail

1.4:1Fail

Similar palettes

More like Wet Stone Stream