Back to palettes

Palette

Burnt Sugar

Deep, caramelized browns that capture the rich, bittersweet aroma and hue of burnt sugar.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F2D00#7E4900#AB651A#3A2100#6A3A00

Palette guide

How to use Burnt Sugar

Overview

The Burnt Sugar palette features deep, caramelized browns that capture the rich, bittersweet aroma and hue of burnt sugar. This dark collection includes the very dark brown of #4F2D00, the deep brown of #7E4900, the medium brown of #AB651A, and the even darker brown of #3A2100 and #6A3A00. It's an excellent choice for designers aiming to create sophisticated, luxurious, and darkly inviting visuals. The palette evokes a sense of gourmet richness, warmth, and subtle elegance, perfect for projects that celebrate dark aesthetics, premium products, and a cozy yet refined atmosphere.

Best used for

  • Luxury chocolate branding and packaging
  • Sophisticated coffee shops and roasteries
  • Dark mode interfaces and applications
  • Gourmet dessert packaging
  • Rustic elegant interiors and decor
  • Rich editorial designs and publications

Suggested color roles

primary

Use #7E4900 as a deep, inviting primary caramel brown, perfect for main brand elements or sophisticated backgrounds.

secondary

Apply #AB651A as a medium brown secondary color, offering warm support and subtle contrast.

accent

Introduce #AB651A again as a subtle accent, ideal for delicate highlights or decorative details on darker bases.

background

Utilize #3A2100 as a very dark, luxurious background, creating a deep and immersive canvas.

text

For headings, #AB651A (medium brown) offers a visible contrast on dark backgrounds. For body text, a light cream or white is essential for optimal readability.

Accessibility notes

  • This is a dark palette; ensure light text colors (like white or a light cream) are used for readability on all backgrounds.
  • Use #AB651A for text on the darkest backgrounds like #3A2100 or #4F2D00, but always verify contrast ratios.
  • Avoid using dark text on dark backgrounds; this palette is best suited for light text on a dark canvas.
  • Interactive elements should have clear hover/focus states, possibly using a brighter, contrasting color if within the palette proves difficult for distinction.

Recommended combinations

Deep Caramel

Ideal for sophisticated backgrounds with light text overlays or creating a sense of rich depth.

#4F2D00 · #7E4900 · #AB651A

Rich Bittersweet

Great for elegant branding, dark mode interfaces, or adding subtle textural variations.

#3A2100 · #6A3A00 · #AB651A

Sugar Glaze

Perfect for textural elements, subtle gradients, or creating a warm, inviting visual hierarchy.

#7E4900 · #AB651A · #4F2D00

CSS variables

:root {
  --burnt-sugar-1: #4F2D00;
  --burnt-sugar-2: #7E4900;
  --burnt-sugar-3: #AB651A;
  --burnt-sugar-4: #3A2100;
  --burnt-sugar-5: #6A3A00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "burnt-sugar": {
        1: "#4F2D00",
        2: "#7E4900",
        3: "#AB651A",
        4: "#3A2100",
        5: "#6A3A00",
      }
    }
  }
}

Related searches

dark brown caramel paletteburnt sugar color schemerich chocolate huessophisticated dark modegourmet food branding

Palette colors

Hex values

Color 1#4F2D00
·
Color 2#7E4900
·
Color 3#AB651A
·
Color 4#3A2100
·
Color 5#6A3A00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
1.2:1Fail
1.3:1Fail
2
1.7:1Fail
1.6:1Fail
2:1Fail
1.3:1Fail
3
2.7:1Fail
1.6:1Fail
3.3:1AA18
2.1:1Fail
4
1.2:1Fail
2:1Fail
3.3:1AA18
1.6:1Fail
5
1.3:1Fail
1.3:1Fail
2.1:1Fail
1.6:1Fail

Similar palettes

More like Burnt Sugar

View all dark
Ancient Tome Hues
Coffee Bean Aroma
Dark Academia Quiet
Dark Moody Coffee
Espresso Bean Rich
Espresso Roast Dark