Back to palettes

Palette

Amber Glaze

A lustrous palette glowing with the deep, sweet warmth of amber and caramelized sugar.

warmelegant5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6AA4E#B87E28#7A511B#4C3110#F2C889

Palette guide

How to use Amber Glaze

Overview

The "Amber Glaze" palette exudes a luxurious, caramelized warmth, ideal for designs requiring sophistication and depth. Featuring a spectrum from the luminous #F2C889 (Light Amber) to the profound #4C3110 (Deep Coffee), it's reminiscent of rich honey and polished wood. Key hues like the vibrant #E6AA4E (Golden Amber) and the sturdy #7A511B (Burnt Umber) offer a refined balance, while #B87E28 (Caramel) bridges the light and dark. This palette is perfectly suited for high-end branding, elegant web design, or any project aiming to convey a sense of established quality and inviting richness.

Best used for

  • Luxury brand identity and packaging
  • High-end confectionery or beverage marketing
  • Elegant website themes for artisanal products
  • Interior design for cozy, upscale spaces
  • Photography portfolios with warm tones
  • Digital interfaces for sophisticated apps

Suggested color roles

primary

Use #4C3110 as a deep, grounding brown, perfect for strong branding elements, primary text, or sophisticated background sections.

secondary

Employ #7A511B as a rich, warm brown, excellent for subheadings, navigation, or complementary content blocks.

accent

Apply #E6AA4E as a bright, lustrous amber, ideal for call-to-action buttons, interactive highlights, or subtle decorative elements.

background

Utilize #F2C889 as a soft, creamy amber, providing a warm, inviting canvas that allows darker text to stand out beautifully.

text

For primary body text on light backgrounds, use #4C3110, ensuring excellent readability and a cohesive warm aesthetic.

Accessibility notes

  • Ensure #4C3110 or #7A511B text has sufficient contrast against #F2C889 for WCAG AA compliance.
  • Avoid using #E6AA4E for small text on #F2C889, as contrast may be insufficient.
  • When using #B87E28 for text, pair it with a very light background like #F2C889 or a very dark one for optimal contrast.
  • Reserve the lightest shades like #F2C889 primarily for backgrounds or large graphical elements.

Recommended combinations

Rich Depth

A sophisticated combination for headers, subtext, and a vibrant accent, conveying luxury and warmth.

#4C3110 · #7A511B · #E6AA4E

Luminous Glow

A light background with warm, deep text and a medium accent, perfect for inviting content sections.

#F2C889 · #B87E28 · #4C3110

Caramel Kiss

A balanced set for a strong base, a bright highlight, and a soft supporting background, ideal for UI elements.

#7A511B · #E6AA4E · #F2C889

CSS variables

:root {
  --amber-glaze-1: #E6AA4E;
  --amber-glaze-2: #B87E28;
  --amber-glaze-3: #7A511B;
  --amber-glaze-4: #4C3110;
  --amber-glaze-5: #F2C889;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amber-glaze": {
        1: "#E6AA4E",
        2: "#B87E28",
        3: "#7A511B",
        4: "#4C3110",
        5: "#F2C889",
      }
    }
  }
}

Related searches

luxury amber color palettecaramel gold schemerich brown and gold colorselegant warm brandinghoneyed color combinations

Palette colors

Hex values

Color 1#E6AA4E
·
Color 2#B87E28
·
Color 3#7A511B
·
Color 4#4C3110
·
Color 5#F2C889
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.4:1AA18
5.8:1AA
1.3:1Fail
2
1.7:1Fail
2:1Fail
3.5:1AA18
2.2:1Fail
3
3.4:1AA18
2:1Fail
1.7:1Fail
4.4:1AA18
4
5.8:1AA
3.5:1AA18
1.7:1Fail
7.6:1AAA
5
1.3:1Fail
2.2:1Fail
4.4:1AA18
7.6:1AAA

Similar palettes

More like Amber Glaze

View all warm