Palette

Spring Thaw Creek

Cool, refreshing greens and teals, inspired by the gentle flow of a creek during a spring thaw.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spring Thaw Creek 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 Spring Thaw Creek.

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

Data visualization

#AAD4CE#82B7B2#5A9591#38736E#DAEEEB

Palette guide

How to use Spring Thaw Creek

Overview

The Spring Thaw Creek color palette evokes a sense of serene natural beauty, featuring a soothing range of cool greens and teals. Inspired by gentle streams and fresh spring waters, this collection includes the airy #DAEEEB, the soft #AAD4CE, the balanced #82B7B2, the grounding #5A9591, and the deep #38736E. Ideal for projects aiming for tranquility, freshness, and organic elegance, it offers designers and developers a harmonious foundation. These hues are perfect for creating calming user interfaces, environmental branding, or any design needing a refreshing, understated aesthetic. Its inherent calmness makes it versatile for a variety of digital and print applications.

Best used for

Spa & wellness branding
Eco-conscious product packaging
Nature photography websites or portfolios
Tranquil mobile app interfaces
Sustainable fashion designs
Meditation or mindfulness applications

Suggested color roles

primary

A grounding, mid-tone teal #5A9591 that anchors the palette, suitable for main branding elements, prominent buttons, or large content blocks.

secondary

A harmonious supporting green-teal #82B7B2, excellent for subheadings, secondary calls-to-action, or decorative elements that need to feel integrated but distinct.

accent

A light, refreshing teal #AAD4CE perfect for highlighting key information, interactive states like hover effects, or small decorative details that require a subtle pop.

background

The lightest, most airy shade #DAEEEB, ideal for clean backgrounds, spacious layouts, or as a base for content, providing a sense of openness.

text

The deepest, most saturated hue #38736E, ensuring strong readability for body text, navigation links, or important labels against lighter backgrounds like #DAEEEB or #AAD4CE.

Accessibility notes

Ensure sufficient contrast when pairing lighter shades like #DAEEEB and #AAD4CE for text and background; aim for WCAG AA or AAA compliance.
The darkest shade, #38736E, provides excellent contrast against #DAEEEB for body text, making it highly readable.
Avoid using #AAD4CE or #82B7B2 directly on #DAEEEB for small text or critical UI elements without checking contrast ratios.
For interactive elements, ensure hover/focus states have distinct contrast changes, perhaps using #5A9591 on a #DAEEEB background for clarity.

Recommended combinations

Calm Interface

Ideal for light, airy user interfaces, clean website layouts, or serene app designs where softness and space are prioritized.

#DAEEEB · #AAD4CE · #82B7B2

Deep Nature

Creates a more grounded and sophisticated feel, suitable for corporate branding, impactful headings, or sections requiring depth and seriousness.

#38736E · #5A9591 · #82B7B2

Refreshing Contrast

Perfect for high-readability text (#38736E) on a light background (#DAEEEB), with #AAD4CE providing a subtle, fresh accent for interactive elements.

#DAEEEB · #38736E · #AAD4CE

CSS variables

:root {
  --spring-thaw-creek-1: #AAD4CE;
  --spring-thaw-creek-2: #82B7B2;
  --spring-thaw-creek-3: #5A9591;
  --spring-thaw-creek-4: #38736E;
  --spring-thaw-creek-5: #DAEEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spring-thaw-creek": {
        1: "#AAD4CE",
        2: "#82B7B2",
        3: "#5A9591",
        4: "#38736E",
        5: "#DAEEEB",
      }
    }
  }
}

Hex values

Color 1#AAD4CE

Color 2#82B7B2

Color 3#5A9591

Color 4#38736E

Color 5#DAEEEB

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.4:1AA18

1.3:1Fail

1.4:1Fail

1.5:1Fail

2.4:1Fail

1.9:1Fail