Palette

Ember Grove Twilight

Warm, earthy tones evoking the magical glow of embers in a quiet forest as twilight descends.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ember Grove Twilight 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 Grove Twilight.

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

Data visualization

#8C4D2E#B46C3E#E3995E#3D291F#603D2A

Palette guide

How to use Ember Grove Twilight

Overview

The Ember Grove Twilight palette offers a rich, deep collection of warm, earthy tones, perfectly capturing the magical glow of embers in a quiet forest as twilight descends. Featuring a range from deep brown-orange (#8C4D2E) to warm orange-brown (#B46C3E) and a glowing lighter orange (#E3995E), it's complemented by the almost black of Dark Truffle (#3D291F) and grounding Cocoa Brown (#603D2A). This palette is ideal for designers and developers aiming to evoke a sense of coziness, intimacy, and natural elegance, creating designs that feel grounded, inviting, and subtly dramatic, much like a serene evening in an autumnal woodland.

Best used for

Cozy blog or website themes
Branding for artisanal food or craft businesses
Warm, inviting interior design concepts
Photography filters or presets for natural scenes
Packaging for coffee, tea, or chocolate products
Digital art depicting twilight forest landscapes

Suggested color roles

primary

Use the deep brown-orange (#8C4D2E) as a robust primary for headers, large blocks, or foundational brand elements, offering warmth and stability.

secondary

The warm orange-brown (#B46C3E) serves as an inviting secondary color, perfect for subheadings, interactive components, or elements requiring a gentle highlight.

accent

The glowing lighter orange (#E3995E) provides a subtle, warm accent, ideal for small details, icons, or decorative flourishes that need a soft, ember-like glow.

background

Cocoa Brown (#603D2A) makes for a rich, atmospheric background, especially effective for dark mode interfaces or sections requiring depth and warmth.

text

Dark Truffle (#3D291F) is excellent for body text on lighter backgrounds, ensuring high readability, or use a crisp white on darker elements for strong contrast.

Accessibility notes

Dark Truffle (#3D291F) offers good contrast against lighter shades like the glowing orange (#E3995E) for text.
Ensure sufficient contrast when using the lighter orange (#E3995E) for text on Cocoa Brown (#603D2A).
Always test color combinations for readability, especially for smaller font sizes and interactive elements.
Avoid placing the glowing orange (#E3995E) directly on the warm orange-brown (#B46C3E) for critical text to maintain contrast.

Recommended combinations

Deep Forest Glow

Excellent for creating a rich, atmospheric visual hierarchy, suitable for headers and key content areas.

#3D291F · #8C4D2E · #E3995E

Ember Warmth

Ideal for highlighting interactive elements or adding a comforting, inviting touch to user interfaces.

#B46C3E · #603D2A · #E3995E

Rustic Grounding

Provides a strong, stable base for brand elements, backgrounds, or sections requiring a sense of tradition and earthiness.

#8C4D2E · #3D291F · #B46C3E

CSS variables

:root {
  --ember-grove-twilight-1: #8C4D2E;
  --ember-grove-twilight-2: #B46C3E;
  --ember-grove-twilight-3: #E3995E;
  --ember-grove-twilight-4: #3D291F;
  --ember-grove-twilight-5: #603D2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ember-grove-twilight": {
        1: "#8C4D2E",
        2: "#B46C3E",
        3: "#E3995E",
        4: "#3D291F",
        5: "#603D2A",
      }
    }
  }
}

Hex values

Color 1#8C4D2E

Color 2#B46C3E

Color 3#E3995E

Color 4#3D291F

Color 5#603D2A

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

2.1:1Fail

1.5:1Fail

1.6:1Fail

1.7:1Fail

3.4:1AA18

2.3:1Fail

2.8:1Fail

1.7:1Fail

5.9:1AA

4.1:1AA18

2.1:1Fail

3.4:1AA18

5.9:1AA

1.4:1Fail

1.5:1Fail

2.3:1Fail

4.1:1AA18

1.4:1Fail

Similar palettes

More like Ember Grove Twilight

View all warm

Autumn Harvest Berry

Maple Leaf Canopy

Rustic Fireplace Warmth

Spiced Apple Cider

Spiced Earth Hearth

Apple Grove Hearth