{
  "id": "web-mai-tang-jin",
  "name": "Malt Sugar Gold",
  "platform": "web",
  "platformLabel": "Web",
  "slug": "mai-tang-jin",
  "tags": [
    "Retro",
    "Warm",
    "Business"
  ],
  "scene": "Food & lifestyle brand sites",
  "advice": {
    "family": "Orange",
    "depth": "This palette's lead color is deep and carries weight — suited to dark themes, or interfaces that need to feel professional and steady.",
    "muted": null,
    "suit": "Calmer than red and steadier than yellow — good when you want warmth without shouting.",
    "avoid": "Large areas can look cheap, so be restrained in B2B products that need authority.",
    "pair": "Layer light and dark oranges within the same family rather than adding a third hue."
  },
  "source": "preset",
  "score": 80,
  "createdAt": "2026-10-12",
  "license": "Data free to reuse; a credit is appreciated",
  "page": "https://paletteget.com/palette-list/web/mai-tang-jin/",
  "colors": [
    {
      "key": "primary",
      "label": "Primary",
      "desc": "Brand color, mapped to the CSS variable --color-primary",
      "hex": "#b8860b",
      "rgb": "rgb(184, 134, 11)",
      "hsl": "hsl(42.7, 88.7%, 38.2%)",
      "hslRaw": {
        "h": 42.7,
        "s": 88.7,
        "l": 38.2
      }
    },
    {
      "key": "primaryHover",
      "label": "Primary hover",
      "desc": "Hover state: --color-primary-hover",
      "hex": "#96690a",
      "rgb": "rgb(150, 105, 10)",
      "hsl": "hsl(40.7, 87.5%, 31.4%)",
      "hslRaw": {
        "h": 40.7,
        "s": 87.5,
        "l": 31.4
      }
    },
    {
      "key": "primaryActive",
      "label": "Primary active",
      "desc": "Pressed state: --color-primary-active",
      "hex": "#744e07",
      "rgb": "rgb(116, 78, 7)",
      "hsl": "hsl(39.1, 88.6%, 24.1%)",
      "hslRaw": {
        "h": 39.1,
        "s": 88.6,
        "l": 24.1
      }
    },
    {
      "key": "textMain",
      "label": "Text main",
      "desc": "Body text: --color-text-main",
      "hex": "#2a2116",
      "rgb": "rgb(42, 33, 22)",
      "hsl": "hsl(33, 31.3%, 12.5%)",
      "hslRaw": {
        "h": 33,
        "s": 31.3,
        "l": 12.5
      }
    },
    {
      "key": "textSub",
      "label": "Text sub",
      "desc": "Secondary text: --color-text-sub",
      "hex": "#7c6e58",
      "rgb": "rgb(124, 110, 88)",
      "hsl": "hsl(36.7, 17%, 41.6%)",
      "hslRaw": {
        "h": 36.7,
        "s": 17,
        "l": 41.6
      }
    },
    {
      "key": "bg",
      "label": "Background",
      "desc": "Page background: --color-bg",
      "hex": "#fffdf7",
      "rgb": "rgb(255, 253, 247)",
      "hsl": "hsl(45, 100%, 98.4%)",
      "hslRaw": {
        "h": 45,
        "s": 100,
        "l": 98.4
      }
    },
    {
      "key": "surface",
      "label": "Surface",
      "desc": "Card and panel background: --color-surface",
      "hex": "#fbf3e2",
      "rgb": "rgb(251, 243, 226)",
      "hsl": "hsl(40.8, 75.8%, 93.5%)",
      "hslRaw": {
        "h": 40.8,
        "s": 75.8,
        "l": 93.5
      }
    },
    {
      "key": "border",
      "label": "Border",
      "desc": "Dividers and outlines: --color-border",
      "hex": "#eadfc6",
      "rgb": "rgb(234, 223, 198)",
      "hsl": "hsl(41.7, 46.2%, 84.7%)",
      "hslRaw": {
        "h": 41.7,
        "s": 46.2,
        "l": 84.7
      }
    },
    {
      "key": "link",
      "label": "Link",
      "desc": "Link color: --color-link",
      "hex": "#735303",
      "rgb": "rgb(115, 83, 3)",
      "hsl": "hsl(42.9, 94.9%, 23.1%)",
      "hslRaw": {
        "h": 42.9,
        "s": 94.9,
        "l": 23.1
      }
    },
    {
      "key": "accent",
      "label": "Accent",
      "desc": "Highlight color: --color-accent",
      "hex": "#8b5e3c",
      "rgb": "rgb(139, 94, 60)",
      "hsl": "hsl(25.8, 39.7%, 39%)",
      "hslRaw": {
        "h": 25.8,
        "s": 39.7,
        "l": 39
      }
    }
  ],
  "roles": {
    "primary": "#b8860b",
    "primaryHover": "#96690a",
    "primaryActive": "#744e07",
    "textMain": "#2a2116",
    "textSub": "#7c6e58",
    "bg": "#fffdf7",
    "surface": "#fbf3e2",
    "border": "#eadfc6",
    "link": "#735303",
    "accent": "#8b5e3c"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.55,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.2,
      "level": "AA"
    },
    "textOnSurface": {
      "ratio": 14.33,
      "level": "AAA"
    }
  },
  "usage": {
    "cssVariables": ":root {\n  --color-primary: #b8860b;\n  --color-primaryHover: #96690a;\n  --color-primaryActive: #744e07;\n  --color-textMain: #2a2116;\n  --color-textSub: #7c6e58;\n  --color-bg: #fffdf7;\n  --color-surface: #fbf3e2;\n  --color-border: #eadfc6;\n  --color-link: #735303;\n  --color-accent: #8b5e3c;\n}",
    "cssUrl": "https://paletteget.com/palette-list/web/mai-tang-jin/index.css"
  }
}