Cherry Mist · Mini App palette (10 colours, ready to copy)

10 colour roles

Every colour has a defined purpose. Use the buttons on the right to copy it in any format.

Theme theme

Global theme colour (navigation bar, selected tab)

#db43a1rgb(219, 67, 161)hsl(322.9, 67.9%, 56.1%)

Button btn

Primary button background

#db43a1rgb(219, 67, 161)hsl(322.9, 67.9%, 56.1%)

Button disabled btnDisabled

Disabled button background

#f1d0e4rgb(241, 208, 228)hsl(323.6, 54.1%, 88%)

Page background bg

Page backgroundColor

#faf9fargb(250, 249, 250)hsl(300, 9.1%, 97.8%)

Card card

Product and content card background

#f6f4f5rgb(246, 244, 245)hsl(330, 10%, 96.1%)

Text main textMain

Headings and body copy

#292327rgb(41, 35, 39)hsl(320, 7.9%, 14.9%)

Text sub textSub

Captions and timestamps

#7c6a75rgb(124, 106, 117)hsl(323.3, 7.8%, 45.1%)

Divider divider

List dividers

#e8e3e6rgb(232, 227, 230)hsl(324, 9.8%, 90%)

Price price

Prices and promotional figures, usually warm

#df4a2crgb(223, 74, 44)hsl(10.1, 73.7%, 52.4%)

Tag tag

Tag and coupon backgrounds

#cbbf67rgb(203, 191, 103)hsl(52.8, 49%, 60%)

How to use it

Written by hand for the hue family and lightness of this palette, not assembled from a template.

The lead colour is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.

Good forGood for products that should feel gentle and young.

Use with careUse it sparingly where authority matters; it can dilute a sense of expertise.

Pairs withCharcoal or black makes it more fashion-forward; white keeps it fresh.

Hue family: Pink

What it looks like in a real interface

The same palette rendered across all three platforms — the fastest way to judge whether it works.

Live preview · switch platform

9:41

Mini App Store•••

Sample product500 g · pack

$39.90

Sample product1 kg · pack

$68.00

Buy nowSold out

Accessibility contrast check

Calculated to WCAG 2.1. AA is the accessibility baseline, AAA the enhanced level.

Foreground / background	Ratio	Body text	Large text
Body text / page background	14.66:1	AAA	AAA
Body text / card background	14.06:1	AAA	AAA
Brand colour / page background	3.75:1	AA	AA

Verify this pair in the checker →

Export to your project

Four formats, ready to paste. Or fetch them by URL from your tooling or AI agent.

CSS variables

:root {
  --color-theme: #db43a1; /* Theme */
  --color-btn: #db43a1; /* Button */
  --color-btnDisabled: #f1d0e4; /* Button disabled */
  --color-bg: #faf9fa; /* Page background */
  --color-card: #f6f4f5; /* Card */
  --color-textMain: #292327; /* Text main */
  --color-textSub: #7c6a75; /* Text sub */
  --color-divider: #e8e3e6; /* Divider */
  --color-price: #df4a2c; /* Price */
  --color-tag: #cbbf67; /* Tag */
}

SCSS variables

$color-theme: #db43a1; // Theme
$color-btn: #db43a1; // Button
$color-btnDisabled: #f1d0e4; // Button disabled
$color-bg: #faf9fa; // Page background
$color-card: #f6f4f5; // Card
$color-textMain: #292327; // Text main
$color-textSub: #7c6a75; // Text sub
$color-divider: #e8e3e6; // Divider
$color-price: #df4a2c; // Price
$color-tag: #cbbf67; // Tag

Tailwind config

// tailwind.config.js: Cherry Mist
module.exports = {
  theme: {
    extend: {
      colors: {
        'theme': '#db43a1',
        'btn': '#db43a1',
        'btnDisabled': '#f1d0e4',
        'bg': '#faf9fa',
        'card': '#f6f4f5',
        'textMain': '#292327',
        'textSub': '#7c6a75',
        'divider': '#e8e3e6',
        'price': '#df4a2c',
        'tag': '#cbbf67',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Cherry Mist",
  "platform": "miniapp",
  "tags": [
    "Berry",
    "Pink"
  ],
  "advice": {
    "family": "Pink",
    "depth": "The lead colour is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.",
    "muted": null,
    "suit": "Good for products that should feel gentle and young.",
    "avoid": "Use it sparingly where authority matters; it can dilute a sense of expertise.",
    "pair": "Charcoal or black makes it more fashion-forward; white keeps it fresh."
  },
  "roles": {
    "theme": "#db43a1",
    "btn": "#db43a1",
    "btnDisabled": "#f1d0e4",
    "bg": "#faf9fa",
    "card": "#f6f4f5",
    "textMain": "#292327",
    "textSub": "#7c6a75",
    "divider": "#e8e3e6",
    "price": "#df4a2c",
    "tag": "#cbbf67"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.66,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.75,
      "level": "AA"
    },
    "textOnSurface": {
      "ratio": 14.06,
      "level": "AAA"
    }
  }
}

More palettes on this platform