Palette

Caramel Swirl Indulge

Deliciously warm and inviting tones, like a rich caramel swirled into a creamy treat.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Caramel Swirl Indulge 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 Caramel Swirl Indulge.

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

Data visualization

#9E5B2B#C2824C#E6AF6D#FFDDA1#5D3E2F

Palette guide

How to use Caramel Swirl Indulge

Overview

The Caramel Swirl Indulge palette offers deliciously warm and inviting tones, like a rich caramel swirled into a creamy treat. Featuring a deep caramel #9E5B2B, vibrant orange-brown #C2824C, soft peach-gold #E6AF6D, luminous cream #FFDDA1, and a grounding dark chocolate #5D3E2F, this collection provides designers and developers with an inviting and sophisticated aesthetic. It's ideal for projects aiming to convey warmth, indulgence, and an inviting atmosphere. The harmonious blend of browns, oranges, and creams provides a robust foundation for creating serene and engaging digital experiences.

Best used for

Dessert or bakery branding and websites
Gourmet food product packaging
Cozy blog or lifestyle platforms
Interior design concepts for cafes or homes
Digital interfaces for relaxation or comfort apps
Editorial layouts for food or lifestyle magazines

Suggested color roles

primary

Use #9E5B2B as a foundational color for main content blocks, headers, or primary navigation, establishing a rich and inviting base.

secondary

Apply #C2824C for subheadings, detailed UI elements, or background textures, providing warmth and depth.

accent

Leverage #E6AF6D for subtle highlights, interactive elements, or decorative accents, offering gentle warmth and approachability.

background

Employ #FFDDA1 for expansive backgrounds or main content areas, creating a light, airy, and highly readable canvas.

text

For optimal readability, use #5D3E2F or a deep charcoal against lighter backgrounds, and white text against #9E5B2B.

Accessibility notes

Ensure #5D3E2F provides sufficient contrast for text when used on #FFDDA1 or #E6AF6D backgrounds.
Avoid using #9E5B2B text on #C2824C backgrounds for main content due to potential low contrast.
Lighter colors like #FFDDA1 should be reserved for larger display text if used with #E6AF6D.
Verify contrast ratios for all interactive elements, ensuring clear distinction between states, especially with the subtle variations in mid-tones.

Recommended combinations

Golden Swirl

Ideal for soft gradients, expansive backgrounds, or layered UI elements.

#FFDDA1 · #E6AF6D · #C2824C

Rich Indulgence

Perfect for creating strong, grounded content blocks or sophisticated branding.

#5D3E2F · #9E5B2B · #C2824C

Caramel Treat

Use for accentuating key features or adding a warm, inviting highlight.

#C2824C · #E6AF6D · #FFDDA1

CSS variables

:root {
  --caramel-swirl-indulge-1: #9E5B2B;
  --caramel-swirl-indulge-2: #C2824C;
  --caramel-swirl-indulge-3: #E6AF6D;
  --caramel-swirl-indulge-4: #FFDDA1;
  --caramel-swirl-indulge-5: #5D3E2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "caramel-swirl-indulge": {
        1: "#9E5B2B",
        2: "#C2824C",
        3: "#E6AF6D",
        4: "#FFDDA1",
        5: "#5D3E2F",
      }
    }
  }
}

Hex values

Color 1#9E5B2B

Color 2#C2824C

Color 3#E6AF6D

Color 4#FFDDA1

Color 5#5D3E2F

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4:1AA18

1.8:1Fail

1.7:1Fail

1.6:1Fail

2.4:1Fail

3:1AA18