Back to palettes

Palette

Mint Chocolate Swirl

A delightful blend of fresh greens and rich browns, inspired by the refreshing taste of mint chocolate treats.

earthplayful5 colors
More earth 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

#2E8B57#50C878#90EE90#8B4513#D2B48C

Palette guide

How to use Mint Chocolate Swirl

Overview

The Mint Chocolate Swirl palette offers a delightful, earthy blend of fresh greens and rich browns, directly inspired by the refreshing taste of mint chocolate treats. With vibrant greens like #2E8B57, #50C878, and #90EE90, complemented by the warm browns of #8B4513 and #D2B48C, this palette delivers a playful yet grounded aesthetic. It's an excellent choice for designers and developers aiming to convey natural goodness, artisanal quality, and a touch of whimsy. The balance between cool greens and warm browns creates a harmonious and inviting visual experience.

Best used for

  • Natural and organic food product branding
  • Artisanal coffee shops and bakeries
  • Eco-friendly and sustainable businesses
  • Children's educational apps or toys
  • Garden centers or botanical themes
  • Playful e-commerce for handcrafted goods

Suggested color roles

primary

Utilize #2E8B57 as the primary color for strong branding elements, headers, or main navigation, conveying natural vitality.

secondary

Apply #8B4513 for secondary content blocks, footers, or to introduce a warm, grounding contrast.

accent

Reserve #90EE90 for vibrant accents, call-to-action buttons, or key highlights that need to pop with freshness.

background

Use #D2B48C as a warm, inviting background color, providing a soft canvas that complements both greens and browns.

text

Employ #2E8B57 or #8B4513 for body text on the light #D2B48C background, ensuring excellent readability and thematic consistency.

Accessibility notes

  • Ensure #2E8B57 or #8B4513 text on #D2B48C background meets WCAG contrast standards for readability.
  • Avoid using #90EE90 for small body text on light backgrounds; it's best for larger accents or graphical elements.
  • Interactive elements should have clear hover/active states, perhaps using #50C878 for a subtle change.
  • When placing green text on green backgrounds, ensure sufficient luminosity difference (e.g., #2E8B57 on #90EE90 might be problematic for small text).

Recommended combinations

Earthy Sweetness

Light brown background with dark green for primary text and rich brown for accents or secondary information.

#D2B48C · #2E8B57 · #8B4513

Minty Fresh

A refreshing gradient of greens for banners, illustrations, or dynamic background elements.

#90EE90 · #50C878 · #2E8B57

Chocolate Highlight

Mid-green as a base with chocolate brown for important text and light brown for subtle details.

#50C878 · #8B4513 · #D2B48C

CSS variables

:root {
  --mint-chocolate-swirl-1: #2E8B57;
  --mint-chocolate-swirl-2: #50C878;
  --mint-chocolate-swirl-3: #90EE90;
  --mint-chocolate-swirl-4: #8B4513;
  --mint-chocolate-swirl-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mint-chocolate-swirl": {
        1: "#2E8B57",
        2: "#50C878",
        3: "#90EE90",
        4: "#8B4513",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

mint chocolate brandearthy green brownnatural food paletteplayful organic colorsfresh dessert theme

Palette colors

Hex values

Color 1#2E8B57
·
Color 2#50C878
·
Color 3#90EE90
·
Color 4#8B4513
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3:1Fail
1.7:1Fail
2.2:1Fail
2
2:1Fail
1.5:1Fail
3.3:1AA18
1.1:1Fail
3
3:1Fail
1.5:1Fail
5:1AA
1.4:1Fail
4
1.7:1Fail
3.3:1AA18
5:1AA
3.6:1AA18
5
2.2:1Fail
1.1:1Fail
1.4:1Fail
3.6:1AA18

Similar palettes

More like Mint Chocolate Swirl

View all earth
Enchanted Mushroom Ring
Terracotta Bloom Joy
Cocoa Mint Delight
Herbalist Green Blend
Mint Chocolate Swirl
Adobe Desert Hues