Palette

Burnt Sugar Glaze

A comforting blend of deep, rich browns and warm oranges, reminiscent of caramelized sugar and warm treats.

Warmnatural5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#654321#8B4513#A0522D#D2691E#F4A460

Palette guide

How to use Burnt Sugar Glaze

Overview

The Burnt Sugar Glaze palette is a comforting blend of deep, rich browns and warm oranges, reminiscent of caramelized sugar and warm treats. This warm collection features the dark brown of #654321, the saddle brown of #8B4513, the sienna of #A0522D, the chocolate of #D2691E, and the soft sandy brown of #F4A460. It's an excellent choice for designers aiming to create cozy, inviting, and deliciously inspired visuals. The palette evokes a sense of warmth, sweetness, and natural comfort, perfect for projects that celebrate gourmet delights, autumn aesthetics, and a homely charm.

Best used for

Gourmet food and dessert branding
Cozy cafe and bakery designs
Autumn seasonal event promotions
Rustic product packaging
Warm digital interfaces and blogs
Dessert shop aesthetics and menus

Suggested color roles

primary

Use #8B4513 as a rich, comforting primary brown, perfect for main brand elements or inviting sections.

secondary

Apply #A0522D as a warm sienna secondary color, offering earthy support and sophistication.

accent

Introduce #D2691E as a vibrant orange-brown accent, ideal for calls to action or sweet highlights.

background

Utilize #F4A460 as a soft sandy brown background, creating a light and warm base.

text

For body text, #654321 (very dark brown) offers excellent readability against lighter colors in the palette, ensuring strong contrast.

Accessibility notes

#654321 provides strong contrast for text against lighter colors in the palette, especially #F4A460, ensuring readability.
Be cautious with using #D2691E or #F4A460 for text, as they may lack sufficient contrast against each other or very light backgrounds.
Ensure interactive elements like buttons and links are clearly distinguishable with good contrast, potentially using #654321.
Prioritize using the darker browns for essential text to ensure readability for all users, meeting WCAG standards.

Recommended combinations

Caramel Drip

Ideal for warm headers, inviting call-to-action sections, or delectable product showcases.

#8B4513 · #D2691E · #F4A460

Sweet & Cozy

Great for sophisticated branding, textural elements, or creating depth in a design.

#654321 · #A0522D · #8B4513

Autumn Treat

Perfect for highlighting key information, special offers, or establishing a warm visual hierarchy.

#F4A460 · #D2691E · #654321

CSS variables

:root {
  --burnt-sugar-glaze-1: #654321;
  --burnt-sugar-glaze-2: #8B4513;
  --burnt-sugar-glaze-3: #A0522D;
  --burnt-sugar-glaze-4: #D2691E;
  --burnt-sugar-glaze-5: #F4A460;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "burnt-sugar-glaze": {
        1: "#654321",
        2: "#8B4513",
        3: "#A0522D",
        4: "#D2691E",
        5: "#F4A460",
      }
    }
  }
}

Hex values

Color 1#654321

Color 2#8B4513

Color 3#A0522D

Color 4#D2691E

Color 5#F4A460

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2.4:1Fail

4.3:1AA18

1.2:1Fail

1.3:1Fail

2:1Fail

3.5:1AA18

1.6:1Fail

1.3:1Fail

1.5:1Fail

2.8:1Fail

2.4:1Fail

2:1Fail

1.5:1Fail

1.8:1Fail

4.3:1AA18

3.5:1AA18

2.8:1Fail

1.8:1Fail

Similar palettes

More like Burnt Sugar Glaze

Sunbaked Terracotta Earth