Palette

Cocoa Mint Delight

A delicious blend of rich cocoa and cool mint, offering both comfort and a refreshing, delightful twist.

warmplayful5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cocoa Mint 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 Cocoa Mint Delight.

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

Data visualization

#3A241D#6C4A3C#A38F7E#C9DFE3#9FC1B1

Palette guide

How to use Cocoa Mint Delight

Overview

The Cocoa Mint Delight palette is a delicious blend of rich cocoa and cool mint, offering both comfort and a refreshing, delightful twist. Featuring deep #3A241D and warm #6C4A3C alongside the soothing #9FC1B1 and airy #C9DFE3, this palette evokes a playful yet sophisticated mood. Designers can leverage the comforting browns for a grounded base, while the minty accents add a pop of freshness. This combination is particularly effective for brands aiming to communicate indulgence, natural goodness, or a whimsical charm, appealing to both warmth and vibrancy.

Best used for

Gourmet chocolate and dessert packaging
Café and patisserie branding
Children's book illustrations
Natural beauty product lines
Cozy interior design themes
Food blogging and recipe websites

Suggested color roles

primary

Use #3A241D for dominant elements like headers or main brand colors, providing a rich, grounding presence.

secondary

Apply #6C4A3C for subheadings, navigation, or larger content blocks to maintain warmth and readability.

accent

Introduce #9FC1B1 or #C9DFE3 for call-to-action buttons, highlights, or decorative elements to add a refreshing contrast.

background

The light #C9DFE3 provides an airy, clean backdrop, while #A38F7E offers a warmer, textured feel.

text

Pair a dark color like #3A241D or #6C4A3C with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

Ensure sufficient contrast when using #A38F7E with #C9DFE3 for text, as both are relatively light.
Darker browns like #3A241D provide excellent contrast for white or light mint text.
The mint shades (#9FC1B1, #C9DFE3) may require larger text sizes if used on similar light backgrounds.
Check contrast ratios for all text pairings, especially between #6C4A3C and #A38F7E.

Recommended combinations

Rich & Fresh

Excellent for branding, creating a balanced feel of indulgence and refreshing lightness.

#3A241D · #A38F7E · #9FC1B1

Warm Comfort

Ideal for backgrounds and secondary elements, providing a soft, inviting atmosphere.

#6C4A3C · #A38F7E · #C9DFE3

Playful Pop

Use for accents and interactive elements to create a striking, playful contrast.

#3A241D · #9FC1B1 · #C9DFE3

CSS variables

:root {
  --cocoa-mint-delight-1: #3A241D;
  --cocoa-mint-delight-2: #6C4A3C;
  --cocoa-mint-delight-3: #A38F7E;
  --cocoa-mint-delight-4: #C9DFE3;
  --cocoa-mint-delight-5: #9FC1B1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cocoa-mint-delight": {
        1: "#3A241D",
        2: "#6C4A3C",
        3: "#A38F7E",
        4: "#C9DFE3",
        5: "#9FC1B1",
      }
    }
  }
}

Hex values

Color 1#3A241D

Color 2#6C4A3C

Color 3#A38F7E

Color 4#C9DFE3

Color 5#9FC1B1

Accessibility

Contrast checker

1.8:1Fail

4.7:1AA

10.4:1AAA

7.4:1AAA

1.8:1Fail

2.5:1Fail

5.6:1AA

4:1AA18

4.7:1AA

2.5:1Fail

2.2:1Fail

1.6:1Fail