Palette

Caramel Swirl Delight

A delicious array of warm browns and creams, reminiscent of a decadent, gooey caramel swirl dessert.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7B3F00#B47C3B#D2B48C#E6C898#F0E6D0

Palette guide

How to use Caramel Swirl Delight

Overview

The Caramel Swirl Delight palette (variant 2) presents a delicious array of warm browns and creams, reminiscent of a decadent, gooey caramel dessert. Featuring a rich dark chocolate #7B3F00, warm caramel #B47C3B, soft desert sand #D2B48C, light creamy beige #E6C898, and a delicate off-white #F0E6D0, this collection offers designers and developers a cozy and sophisticated aesthetic. It's ideal for projects aiming to convey warmth, indulgence, and an inviting atmosphere. The harmonious blend of browns 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 #B47C3B as a foundational color for main content blocks, headers, or primary navigation, establishing a rich and inviting base.

secondary

Apply #7B3F00 for subheadings, detailed UI elements, or background textures, providing depth and contrast.

accent

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

background

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

text

For optimal readability, use #7B3F00 or a deep charcoal against lighter backgrounds, and white text against #B47C3B.

Accessibility notes

Ensure #7B3F00 provides sufficient contrast for text when used on #F0E6D0 or #E6C898 backgrounds.
Avoid using #B47C3B text on #D2B48C backgrounds for main content due to potential low contrast.
Lighter colors like #F0E6D0 should be reserved for larger display text if used with #E6C898.
Verify contrast ratios for all interactive elements, ensuring clear distinction between states, especially with the subtle variations in mid-tones.

Recommended combinations

Dessert Layers

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

#F0E6D0 · #E6C898 · #D2B48C

Rich Caramel

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

#7B3F00 · #B47C3B · #D2B48C

Sweet Swirl

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

#B47C3B · #D2B48C · #F0E6D0

CSS variables

:root {
  --caramel-swirl-delight-2-1: #7B3F00;
  --caramel-swirl-delight-2-2: #B47C3B;
  --caramel-swirl-delight-2-3: #D2B48C;
  --caramel-swirl-delight-2-4: #E6C898;
  --caramel-swirl-delight-2-5: #F0E6D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "caramel-swirl-delight-2": {
        1: "#7B3F00",
        2: "#B47C3B",
        3: "#D2B48C",
        4: "#E6C898",
        5: "#F0E6D0",
      }
    }
  }
}

Hex values

Color 1#7B3F00

Color 2#B47C3B

Color 3#D2B48C

Color 4#E6C898

Color 5#F0E6D0

Accessibility

Contrast checker

2.3:1Fail

4.2:1AA18

5.1:1AA

6.6:1AA

2.3:1Fail

1.8:1Fail

2.2:1Fail

2.9:1Fail

4.2:1AA18

1.8:1Fail

1.2:1Fail

1.6:1Fail

5.1:1AA

2.2:1Fail

1.2:1Fail

1.3:1Fail

6.6:1AA

2.9:1Fail

1.6:1Fail

1.3:1Fail

Similar palettes

More like Caramel Swirl Delight

View all warm

Caramel Swirl Indulge

Artisan Loaf Hearth

Autumn Forest Canopy

Autumn Harvest Spices

Autumn Syrup

Barista's Brew Comfort