Back to palettes

Palette

Mint Chocolate Swirl

A refreshing blend of rich chocolate browns and cool mint greens, like a delightful frozen dessert.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mint Chocolate Swirl 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 Mint Chocolate Swirl.

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

Data visualization

#3D2B2B#6A4A4A#7EC4C4#A6E2E2#D4F2F2

Palette guide

How to use Mint Chocolate Swirl

Overview

The Mint Chocolate Swirl palette is a delightful and refreshing blend, reminiscent of a frozen dessert, combining rich chocolate browns with cool mint teals. From the deep #3D2B2B and #6A4A4A browns to the vibrant #7EC4C4, #A6E2E2, and #D4F2F2 teals, this palette offers a playful yet sophisticated contrast. It's ideal for designers and developers looking to evoke a sense of freshness, indulgence, and creativity. The interplay between the warm, grounding browns and the crisp, invigorating teals creates a dynamic and appealing visual experience.

Best used for

  • Cafes, bakeries, and dessert brand identities
  • Playful e-commerce websites (sweets, gifts)
  • Food packaging and menu design
  • Children's product branding or websites
  • Casual dining restaurant interiors
  • Creative or artisanal craft businesses

Suggested color roles

primary

Use #3D2B2B as a grounding primary color for main headings, navigation, or strong brand elements, providing a rich base.

secondary

Apply #7EC4C4 for secondary content areas, subheadings, or as a vibrant background for specific sections, adding freshness.

accent

Reserve #A6E2E2 for eye-catching accents, call-to-action buttons, or interactive elements that need to pop.

background

Utilize #D4F2F2 as a light, airy background, allowing the deeper browns and more saturated teals to truly shine.

text

Employ #3D2B2B for body text on light teal backgrounds, ensuring excellent readability and maintaining the palette's rich feel.

Accessibility notes

  • Ensure high contrast for #3D2B2B text on #D4F2F2 background for optimal readability (WCAG AA).
  • Avoid placing #A6E2E2 text on #7EC4C4 without checking contrast; these are close in luminance.
  • Interactive elements should clearly distinguish states (hover, active) using contrasting colors like #6A4A4A on #A6E2E2.
  • For any text on the darker browns (#3D2B2B, #6A4A4A), use a light color like #D4F2F2 or white for sufficient contrast.

Recommended combinations

Rich & Fresh

Dark brown for branding, very light teal background, and mid-teal for highlights or secondary elements.

#3D2B2B · #D4F2F2 · #7EC4C4

Teal Gradient

Create a smooth, refreshing gradient for backgrounds, banners, or visual transitions.

#D4F2F2 · #A6E2E2 · #7EC4C4

Chocolate Accents

Mid-teal as a base with dark and mid-browns for text, buttons, or decorative details.

#7EC4C4 · #3D2B2B · #6A4A4A

CSS variables

:root {
  --mint-chocolate-swirl-2-1: #3D2B2B;
  --mint-chocolate-swirl-2-2: #6A4A4A;
  --mint-chocolate-swirl-2-3: #7EC4C4;
  --mint-chocolate-swirl-2-4: #A6E2E2;
  --mint-chocolate-swirl-2-5: #D4F2F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mint-chocolate-swirl-2": {
        1: "#3D2B2B",
        2: "#6A4A4A",
        3: "#7EC4C4",
        4: "#A6E2E2",
        5: "#D4F2F2",
      }
    }
  }
}

Related searches

mint chocolate colorsdessert color schemeplayful brand palettefresh brown greencafe interior colors

Palette colors

Hex values

Color 1#3D2B2B
·
Color 2#6A4A4A
·
Color 3#7EC4C4
·
Color 4#A6E2E2
·
Color 5#D4F2F2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
6.7:1AA
9.2:1AAA
11.3:1AAA
2
1.7:1Fail
3.9:1AA18
5.4:1AA
6.6:1AA
3
6.7:1AA
3.9:1AA18
1.4:1Fail
1.7:1Fail
4
9.2:1AAA
5.4:1AA
1.4:1Fail
1.2:1Fail
5
11.3:1AAA
6.6:1AA
1.7:1Fail
1.2:1Fail

Similar palettes

More like Mint Chocolate Swirl

View all vibrant
Fruit Medley
Garden Berry Patch
Orchard Fruit Medley
Sweet Citrus Bloom
Abstract Geometric Bloom
Berry Blossom