Back to palettes

Palette

Ember Path

Soft reds fading into rosy pinks, like the gentle glow of cooling embers guiding a cozy path.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A52A2A#CD5C5C#E35D5D#F17A7A#FFC0CB

Palette guide

How to use Ember Path

Overview

The Ember Path palette gracefully transitions through soft reds into rosy pinks, like the gentle glow of cooling embers guiding a cozy path. This harmonious gradient features deep Brown (#A52A2A), inviting Indian Red (#CD5C5C), a brighter red (#E35D5D), soft light red (#F17A7A), and delicate Pink (#FFC0CB). It's a serene and comforting collection, perfect for designers and developers looking to create a soft, romantic, or subtly warm aesthetic. This palette is ideal for projects that require a gentle touch, evoking feelings of comfort, safety, and understated elegance, reminiscent of a peaceful evening stroll.

Best used for

  • Romantic or feminine brand identities
  • Wedding or anniversary themed designs
  • Soft, comforting website aesthetics
  • Beauty and skincare product packaging
  • Children's book illustrations or nursery decor
  • Digital art with a warm, gentle light source

Suggested color roles

primary

Brown (#A52A2A) anchors the palette as a deep, foundational red, providing stability and depth for main headings or significant design elements.

secondary

Indian Red (#CD5C5C) offers a warm and inviting secondary hue, perfect for subheadings, interactive elements, or sections that need a comforting touch.

accent

The soft light red (#F17A7A) serves as a gentle accent, ideal for subtle highlights, decorative details, or elements requiring a delicate, warm glow.

background

Pink (#FFC0CB) provides a very light, airy background, creating a soft and expansive canvas that enhances readability for darker text.

text

Brown (#A52A2A) is an excellent choice for body text on lighter backgrounds, ensuring high readability with a warm, sophisticated feel, or use a deep charcoal for maximum contrast.

Accessibility notes

  • Brown (#A52A2A) against Pink (#FFC0CB) offers good contrast for readable body text.
  • Ensure sufficient contrast if using Indian Red (#CD5C5C) or the lighter reds for text on Pink (#FFC0CB).
  • Always verify contrast ratios for all text and interactive elements to meet WCAG 2.1 AA standards.
  • Avoid placing the soft light red (#F17A7A) on Pink (#FFC0CB) for critical text due to potential low contrast.

Recommended combinations

Deep Rose Glow

Creates a rich, warm gradient, perfect for banners, headers, or focal points that need to feel inviting and deep.

#A52A2A · #CD5C5C · #F17A7A

Soft Ember Light

Ideal for backgrounds, subtle overlays, or elements requiring a delicate, ethereal touch and soft luminosity.

#E35D5D · #F17A7A · #FFC0CB

Cozy Path

Provides a balanced contrast for text and interactive elements, suitable for navigation or informational sections.

#A52A2A · #FFC0CB · #CD5C5C

CSS variables

:root {
  --ember-path-1: #A52A2A;
  --ember-path-2: #CD5C5C;
  --ember-path-3: #E35D5D;
  --ember-path-4: #F17A7A;
  --ember-path-5: #FFC0CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ember-path": {
        1: "#A52A2A",
        2: "#CD5C5C",
        3: "#E35D5D",
        4: "#F17A7A",
        5: "#FFC0CB",
      }
    }
  }
}

Related searches

soft red pink palettegentle warm color schemeromantic UI design colorscooling embers aestheticcozy path brand identity

Palette colors

Hex values

Color 1#A52A2A
·
Color 2#CD5C5C
·
Color 3#E35D5D
·
Color 4#F17A7A
·
Color 5#FFC0CB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2:1Fail
2.6:1Fail
4.6:1AA
2
1.8:1Fail
1.1:1Fail
1.5:1Fail
2.6:1Fail
3
2:1Fail
1.1:1Fail
1.3:1Fail
2.3:1Fail
4
2.6:1Fail
1.5:1Fail
1.3:1Fail
1.7:1Fail
5
4.6:1AA
2.6:1Fail
2.3:1Fail
1.7:1Fail

Similar palettes

More like Ember Path

View all warm