Back to palettes

Palette

Ember Ash Hearth

A comforting transition of warm greys, like the fading embers of a once-roaring fire.

MonochromeCalm5 colors
More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ember Ash Hearth 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 Ember Ash Hearth.

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

Data visualization

#2C2C2C#4A4A4A#6C6C6C#8E8E8E#B0B0B0

Palette guide

How to use Ember Ash Hearth

Overview

The Ember Ash Hearth palette offers a comforting transition of warm grays, like the fading embers of a once-roaring fire. This monochrome collection features deep charcoal (#2C2C2C), dark ash gray (#4A4A4A), medium gray (#6C6C6C), light gray (#8E8E8E), and very light gray (#B0B0B0). It's an ideal choice for designs that aim to convey warmth, coziness, and understated elegance. Designers and developers can leverage these subtle variations to create serene, inviting interfaces, sophisticated branding, or calming digital presentations. The harmonious progression of tones allows for depth and visual interest while maintaining a minimalist and comforting aesthetic, perfect for relaxing environments.

Best used for

  • Home decor and interior design websites
  • Wellness and mindfulness app interfaces
  • Cozy cafe or lounge branding
  • Minimalist photography portfolios
  • Comfort-focused e-commerce platforms
  • Sophisticated editorial layouts for lifestyle blogs

Suggested color roles

primary

Deep charcoal (#2C2C2C) serves as an excellent foundational color for text or strong graphical elements, conveying grounding and sophistication.

secondary

Dark ash gray (#4A4A4A) and medium gray (#6C6C6C) are versatile for supporting content blocks, subheadings, or subtle dividers, adding visual texture.

accent

Light gray (#8E8E8E) can be used sparingly for subtle accents, hover states, or to add a touch of brightness without breaking the comforting feel.

background

Very light gray (#B0B0B0) provides a soft, inviting, and sophisticated canvas, ensuring content stands out gently.

text

Deep charcoal (#2C2C2C) is the recommended color for body text on light backgrounds (#B0B0B0) for optimal readability. Medium gray (#6C6C6C) can be used for secondary or less prominent text.

Accessibility notes

  • Ensure sufficient contrast for text, particularly when using lighter grays like #8E8E8E on #B0B0B0, which may have low contrast.
  • Always use #2C2C2C for body text on light backgrounds to meet WCAG contrast requirements.
  • Avoid using #6C6C6C or #8E8E8E for small text sizes to maintain legibility.
  • Consider providing options for increased text size or bolding for critical information if mid-tone grays are used.

Recommended combinations

Hearth Glow

Ideal for a clean, comforting look, using a bright background with dark text and a medium gray for secondary elements or accents.

#B0B0B0 · #2C2C2C · #6C6C6C

Ash Layers

Excellent for creating subtle depth and layering in UI elements, background patterns, or elegant graphical compositions.

#4A4A4A · #6C6C6C · #8E8E8E

Ember Text

Perfect for sophisticated typography, combining a light background with a strong primary text color and a darker gray for secondary information.

#B0B0B0 · #2C2C2C · #4A4A4A

CSS variables

:root {
  --ember-ash-hearth-1: #2C2C2C;
  --ember-ash-hearth-2: #4A4A4A;
  --ember-ash-hearth-3: #6C6C6C;
  --ember-ash-hearth-4: #8E8E8E;
  --ember-ash-hearth-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ember-ash-hearth": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6C6C6C",
        4: "#8E8E8E",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

ember ash color palettewarm gray design schemecozy monochrome colorssubtle neutral UIhearth inspired palette

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#6C6C6C
·
Color 4#8E8E8E
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.3:1AA18
6.4:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
4.1:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.4:1Fail
4
4.3:1AA18
2.7:1Fail
1.6:1Fail
1.5:1Fail
5
6.4:1AA
4.1:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Ember Ash Hearth

View all Monochrome
Gentle Stream Pebbles
Stormy Beach Day
Cherry Blossom Dew
Monochrome Ocean Depths
Winter Woodland Calm
Zen River Pebble