Palette

Arctic Moss Glaze

Chilly greens and serene blues, inspired by frost-kissed moss thriving in an arctic landscape.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Moss Glaze 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 Arctic Moss Glaze.

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

Data visualization

#2F4F4F#4F6F6F#709090#90B0B0#B0D0D0

Palette guide

How to use Arctic Moss Glaze

Overview

The Arctic Moss Glaze palette features chilly greens and serene blues, inspired by frost-kissed moss thriving in an arctic landscape. Ranging from the light #B0D0D0 to the deep #2F4F4F, this collection offers designers and developers a cool, earthy aesthetic perfect for conveying tranquility, natural growth, and understated elegance. The prominent #4F6F6F and #709090 provide a clear progression of cool, muted tones, allowing for elegant visual hierarchies in UI design, impactful branding, and serene digital experiences. It's an excellent choice for projects that aim to evoke peace, organic connection, and a sophisticated, natural identity.

Best used for

Eco-friendly product branding
Nature conservation websites
Organic food or wellness brands
Minimalist interior design concepts
Garden and landscaping services
Artisan craft websites

Suggested color roles

primary

#2F4F4F (A deep, dark slate grey-green, excellent for main headings, crucial call-to-action buttons, or key UI elements that command attention.)

secondary

#4F6F6F (A versatile medium grey-green, ideal for subheadings, secondary interactive elements, or supporting graphical features, providing gentle contrast.)

accent

#709090 (A lighter, cool grey-green, perfect for subtle highlights, hover states, or delicate design accents that need to glimmer.)

background

#B0D0D0 (A very light, cool grey-green, serving as a pristine backdrop that enhances readability and provides an expansive, fresh feel.)

text

#2F4F4F (The darkest color in the palette, providing excellent contrast for body text on lighter backgrounds, ensuring high readability.)

Accessibility notes

Ensure #2F4F4F text on #B0D0D0 background meets WCAG AAA standards for optimal readability.
Avoid using #709090 or #90B0B0 for text on similar light backgrounds, as contrast will be insufficient.
When using #4F6F6F for interactive elements, verify its contrast with surrounding colors for clear user feedback.
For critical information, always pair the darkest available color, #2F4F4F, with the lightest background, #B0D0D0.

Recommended combinations

Deep Moss

Ideal for a clean background with strong primary text and a deep grey-green for headings or key actions.

#B0D0D0 · #2F4F4F · #4F6F6F

Glaze Layers

Use for creating visual depth in layered UI components, card backgrounds, or subtle gradients.

#90B0B0 · #709090 · #4F6F6F

Earthy Accent

Apply the darkest grey-green for focal points, with lighter tones providing a serene context.

#2F4F4F · #B0D0D0 · #709090

CSS variables

:root {
  --arctic-moss-glaze-1: #2F4F4F;
  --arctic-moss-glaze-2: #4F6F6F;
  --arctic-moss-glaze-3: #709090;
  --arctic-moss-glaze-4: #90B0B0;
  --arctic-moss-glaze-5: #B0D0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-moss-glaze": {
        1: "#2F4F4F",
        2: "#4F6F6F",
        3: "#709090",
        4: "#90B0B0",
        5: "#B0D0D0",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4F6F6F

Color 3#709090

Color 4#90B0B0

Color 5#B0D0D0

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

3.8:1AA18

5.4:1AA

1.6:1Fail

2.4:1Fail

3.3:1AA18

2.6:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

3.8:1AA18

2.4:1Fail

1.5:1Fail

1.4:1Fail

5.4:1AA

3.3:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Arctic Moss Glaze

Arctic Moss Glaze

See it in context.

Ready when you are.

Built with Arctic Moss Glaze.

How to use Arctic Moss Glaze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Moss

Glaze Layers

Earthy Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arctic Moss Glaze