{
  "id": "miniapp-miniapp-chen-dian-257",
  "name": "Agarwood",
  "platform": "miniapp",
  "platformLabel": "Mini App",
  "slug": "miniapp-chen-dian-257",
  "tags": [
    "Calm",
    "Purple"
  ],
  "scene": "Home renovation & measuring",
  "advice": {
    "family": "Purple",
    "depth": "The lead color sits at 40% lightness and 55% saturation. It sits in the lower-middle range: enough presence over a light background, and it does not vanish when the theme goes dark. Saturation is moderate, present without being loud, the easiest band to live with in a day-to-day interface.",
    "suit": "It carries a touch of sophistication, good for brands that want to stand apart. The lead color measures 9.01:1 against this background, past the AAA line, so it can carry emphasis inside body text without being darkened.",
    "avoid": "Purple, red and blue can blur together; keep enough lightness between them. This one does not port to a dark theme: over a near-black surface the lead color is down to 1.99:1, nearly merged with the ground, so the dark version needs its own picks.",
    "pair": "Pale pink and cream soften it; deep blue grounds it. The accent measures 4.5:1 against this background, so it can carry text and icons directly."
  },
  "source": "generated",
  "score": 86,
  "createdAt": "2026-10-24",
  "license": "Data free to reuse; a credit is appreciated",
  "page": "https://paletteget.com/palette-list/miniapp/miniapp-chen-dian-257/",
  "colors": [
    {
      "key": "theme",
      "label": "Theme",
      "desc": "Global theme color (navigation bar, selected tab)",
      "hex": "#4e2e9f",
      "rgb": "rgb(78, 46, 159)",
      "hsl": "hsl(257, 55.1%, 40.2%)",
      "hslRaw": {
        "h": 257,
        "s": 55.1,
        "l": 40.2
      }
    },
    {
      "key": "btn",
      "label": "Button",
      "desc": "Primary button background",
      "hex": "#4e2e9f",
      "rgb": "rgb(78, 46, 159)",
      "hsl": "hsl(257, 55.1%, 40.2%)",
      "hslRaw": {
        "h": 257,
        "s": 55.1,
        "l": 40.2
      }
    },
    {
      "key": "btnDisabled",
      "label": "Button disabled",
      "desc": "Disabled button background",
      "hex": "#ac9bd5",
      "rgb": "rgb(172, 155, 213)",
      "hsl": "hsl(257.6, 40.8%, 72.2%)",
      "hslRaw": {
        "h": 257.6,
        "s": 40.8,
        "l": 72.2
      }
    },
    {
      "key": "bg",
      "label": "Page background",
      "desc": "Page backgroundColor",
      "hex": "#f9f9fb",
      "rgb": "rgb(249, 249, 251)",
      "hsl": "hsl(240, 20%, 98%)",
      "hslRaw": {
        "h": 240,
        "s": 20,
        "l": 98
      }
    },
    {
      "key": "card",
      "label": "Card",
      "desc": "Product and content card background",
      "hex": "#f4f3f7",
      "rgb": "rgb(244, 243, 247)",
      "hsl": "hsl(255, 20%, 96.1%)",
      "hslRaw": {
        "h": 255,
        "s": 20,
        "l": 96.1
      }
    },
    {
      "key": "textMain",
      "label": "Text main",
      "desc": "Headings and body copy",
      "hex": "#231f2d",
      "rgb": "rgb(35, 31, 45)",
      "hsl": "hsl(257.1, 18.4%, 14.9%)",
      "hslRaw": {
        "h": 257.1,
        "s": 18.4,
        "l": 14.9
      }
    },
    {
      "key": "textSub",
      "label": "Text sub",
      "desc": "Captions and timestamps",
      "hex": "#6b6085",
      "rgb": "rgb(107, 96, 133)",
      "hsl": "hsl(257.8, 16.2%, 44.9%)",
      "hslRaw": {
        "h": 257.8,
        "s": 16.2,
        "l": 44.9
      }
    },
    {
      "key": "divider",
      "label": "Divider",
      "desc": "List dividers",
      "hex": "#e4e1ea",
      "rgb": "rgb(228, 225, 234)",
      "hsl": "hsl(260, 17.6%, 90%)",
      "hslRaw": {
        "h": 260,
        "s": 17.6,
        "l": 90
      }
    },
    {
      "key": "price",
      "label": "Price",
      "desc": "Prices and promotional figures, usually warm",
      "hex": "#d04023",
      "rgb": "rgb(208, 64, 35)",
      "hsl": "hsl(10.1, 71.2%, 47.6%)",
      "hslRaw": {
        "h": 10.1,
        "s": 71.2,
        "l": 47.6
      }
    },
    {
      "key": "tag",
      "label": "Tag",
      "desc": "Tag and coupon backgrounds",
      "hex": "#8a449e",
      "rgb": "rgb(138, 68, 158)",
      "hsl": "hsl(286.7, 39.8%, 44.3%)",
      "hslRaw": {
        "h": 286.7,
        "s": 39.8,
        "l": 44.3
      }
    }
  ],
  "roles": {
    "theme": "#4e2e9f",
    "btn": "#4e2e9f",
    "btnDisabled": "#ac9bd5",
    "bg": "#f9f9fb",
    "card": "#f4f3f7",
    "textMain": "#231f2d",
    "textSub": "#6b6085",
    "divider": "#e4e1ea",
    "price": "#d04023",
    "tag": "#8a449e"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.3,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 9.01,
      "level": "AAA"
    },
    "textOnSurface": {
      "ratio": 14.56,
      "level": "AAA"
    }
  },
  "usage": {
    "cssVariables": ":root {\n  --color-theme: #4e2e9f;\n  --color-btn: #4e2e9f;\n  --color-btnDisabled: #ac9bd5;\n  --color-bg: #f9f9fb;\n  --color-card: #f4f3f7;\n  --color-textMain: #231f2d;\n  --color-textSub: #6b6085;\n  --color-divider: #e4e1ea;\n  --color-price: #d04023;\n  --color-tag: #8a449e;\n}",
    "cssUrl": "https://paletteget.com/palette-list/miniapp/miniapp-chen-dian-257/index.css"
  }
}