Palette

Cozy Ember Embrace

A comforting and inviting palette that radiates the warmth and intimacy of a crackling fire on a chilly evening.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#FF8C00#FFD700#654321#FFF8DC

Palette guide

How to use Cozy Ember Embrace

Overview

The 'Cozy Ember Embrace' palette is a comforting and inviting collection that radiates the warmth and intimacy of a crackling fire on a chilly evening. This rich palette features a deep dark red (#8B0000), a vibrant orange (#FF8C00), a bright gold (#FFD700), a robust dark brown (#654321), and a creamy corn silk (#FFF8DC). Ideal for designers and developers seeking to convey warmth, comfort, and a touch of seasonal cheer. These harmonious hues are perfect for projects that celebrate autumn, holidays, or a welcoming, grounded aesthetic, ensuring an inviting user experience across various platforms.

Best used for

Autumn and winter seasonal branding
Holiday greeting cards and decor
Rustic event invitations
Cozy cafe or restaurant interiors
Fireside-themed app interfaces
Home goods and textile designs

Suggested color roles

primary

#8B0000 (Dark Red) - A deep, anchoring primary color, ideal for main structures, headers, or strong brand elements.

secondary

#FF8C00 (Vibrant Orange) - Provides an energetic, inviting complement, excellent for secondary content, calls-to-action, or accents.

accent

#FFD700 (Gold) - A luminous, bright accent perfect for highlights, interactive elements, or a touch of luxury and glow.

background

#FFF8DC (Corn Silk) - A soft, creamy background that brightens the palette while maintaining warmth, perfect for content areas.

text

#654321 (Dark Brown) - Suitable for body text on lighter backgrounds, providing excellent readability and a grounded feel.

Accessibility notes

Ensure sufficient contrast for text, especially when using brighter colors like #FFD700 on lighter backgrounds.
The dark #654321 provides excellent contrast for text on #FFF8DC or #FFD700 backgrounds.
Use #8B0000 or #FF8C00 for headings with white or light text for strong visual impact and readability.
Avoid using #FFD700 for small body text unless on a significantly darker background to ensure legibility.

Recommended combinations

Ember Glow

Ideal for warm website headers, autumn promotions, or inviting branding.

#8B0000 · #FF8C00 · #FFF8DC

Golden Hearth

Great for content cards, luxurious accents, or where a rich, warm feel is desired.

#FFD700 · #654321 · #FF8C00

Fireside Depth

Perfect for bold calls-to-action, energetic illustrations, or accentuating key information.

#8B0000 · #654321 · #FFD700

CSS variables

:root {
  --cozy-ember-embrace-1: #8B0000;
  --cozy-ember-embrace-2: #FF8C00;
  --cozy-ember-embrace-3: #FFD700;
  --cozy-ember-embrace-4: #654321;
  --cozy-ember-embrace-5: #FFF8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cozy-ember-embrace": {
        1: "#8B0000",
        2: "#FF8C00",
        3: "#FFD700",
        4: "#654321",
        5: "#FFF8DC",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#FF8C00

Color 3#FFD700

Color 4#654321

Color 5#FFF8DC

Accessibility

Contrast checker

4.3:1AA18

7.1:1AAA

1.1:1Fail

9.4:1AAA

4.3:1AA18

1.7:1Fail

3.8:1AA18

2.2:1Fail

7.1:1AAA

1.7:1Fail

6.3:1AA

1.3:1Fail

1.1:1Fail

3.8:1AA18

6.3:1AA

8.3:1AAA

9.4:1AAA

2.2:1Fail

1.3:1Fail

8.3:1AAA

Similar palettes

More like Cozy Ember Embrace

View all warm

Autumn Hearth Comfort