Back to palettes

Palette

Glass Block Refresh

A crisp and clean palette with refreshing blues and greens, evoking the transparent purity of glass and fresh water.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glass Block Refresh 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 Glass Block Refresh.

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

Data visualization

#C1D8D7#A1BFBE#7FA7A6#5F8F8F#E0F2F1

Palette guide

How to use Glass Block Refresh

Overview

The Glass Block Refresh palette offers a crisp, clean, and serene blend of cool greens and blues, evoking the transparent purity of glass and fresh water. From the airy #E0F2F1 to the grounding #5F8F8F, with harmonious mid-tones like #C1D8D7, #A1BFBE, and #7FA7A6, this collection is perfect for designs that aim for modern minimalism and a refreshing feel. Designers can leverage these shades for creating intuitive, uncluttered user interfaces. Developers will find this palette excellent for building digital experiences that convey clarity, efficiency, and a calm, contemporary aesthetic. It’s particularly well-suited for tech, wellness, or architectural branding that emphasizes clean lines and a sense of spaciousness.

Best used for

  • Modern tech company websites and apps
  • Architectural and interior design portfolios
  • Wellness and mindfulness platforms
  • Clean beauty product branding
  • Minimalist UI/UX designs
  • Corporate communications promoting transparency

Suggested color roles

primary

#5F8F8F provides a solid, dependable primary color, excellent for main calls to action, important headings, or significant brand elements, conveying stability.

secondary

#7FA7A6 serves as a versatile secondary, suitable for subheadings, secondary buttons, or larger content blocks where a slightly softer tone is preferred.

accent

#A1BFBE can be used for subtle highlights, interactive states, or as a background element that adds a gentle, cool touch without being overpowering.

background

#E0F2F1 is a pristine, near-white base with a cool hint, perfect for main content areas, ensuring maximum readability and a clean, expansive feel.

text

For optimal contrast on #E0F2F1, use #5F8F8F or a deep charcoal black. For text on darker backgrounds like #5F8F8F, use #E0F2F1.

Accessibility notes

  • Text in #5F8F8F on #E0F2F1 will generally provide excellent contrast and readability.
  • Be cautious with #C1D8D7 text on #E0F2F1; it will likely have insufficient contrast for body text.
  • Ensure all interactive elements have a contrast ratio of at least 4.5:1 against their background.
  • For color-blind users, rely on luminance differences, as the hues are quite similar within the blue-green range.

Recommended combinations

Clear Structure

Effective for corporate identity. #5F8F8F for brand elements, #7FA7A6 for secondary details, and #E0F2F1 for backgrounds.

#5F8F8F · #7FA7A6 · #E0F2F1

Gentle Flow

Creates a subtle, flowing gradient for headers or background sections, conveying a sense of calm and purity.

#C1D8D7 · #A1BFBE · #7FA7A6

Crisp Minimalism

A clean and refreshing combination. #E0F2F1 as background, #5F8F8F for primary text/buttons, and #A1BFBE for subtle accents.

#E0F2F1 · #5F8F8F · #A1BFBE

CSS variables

:root {
  --glass-block-refresh-1: #C1D8D7;
  --glass-block-refresh-2: #A1BFBE;
  --glass-block-refresh-3: #7FA7A6;
  --glass-block-refresh-4: #5F8F8F;
  --glass-block-refresh-5: #E0F2F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glass-block-refresh": {
        1: "#C1D8D7",
        2: "#A1BFBE",
        3: "#7FA7A6",
        4: "#5F8F8F",
        5: "#E0F2F1",
      }
    }
  }
}

Related searches

clean minimalist color paletterefreshing green blue uitransparent aesthetic designmodern serene brandingcool contemporary web colors

Palette colors

Hex values

Color 1#C1D8D7
·
Color 2#A1BFBE
·
Color 3#7FA7A6
·
Color 4#5F8F8F
·
Color 5#E0F2F1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.4:1Fail
1.3:1Fail
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
1.7:1Fail
3
1.8:1Fail
1.3:1Fail
1.4:1Fail
2.3:1Fail
4
2.4:1Fail
1.8:1Fail
1.4:1Fail
3.1:1AA18
5
1.3:1Fail
1.7:1Fail
2.3:1Fail
3.1:1AA18

Similar palettes

More like Glass Block Refresh

View all cool
Arctic Fox Shadow
Arctic Glacier Shard
Arctic Iceberg Edge
Cool Stone Carving
Frosted Winter Glaze
Frozen Mist Expanse