{
  "id": "web-tao-ye-qing",
  "name": "Kiln Teal",
  "platform": "web",
  "platformLabel": "Web",
  "slug": "tao-ye-qing",
  "tags": [
    "Natural",
    "Muted gray",
    "Low saturation"
  ],
  "scene": "Studios, craft brands & portfolio sites",
  "advice": {
    "family": "Teal",
    "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": "A good neutral lead for data visualisation, letting the data carry its own colors.",
    "avoid": "Too weak a teal reads as indecisive — let a support color supply the character.",
    "pair": "Reliable with deep blue and graphite gray; a little warm orange wakes it up."
  },
  "source": "preset",
  "score": 86,
  "createdAt": "2026-10-15",
  "license": "Data free to reuse; a credit is appreciated",
  "page": "https://paletteget.com/palette-list/web/tao-ye-qing/",
  "colors": [
    {
      "key": "primary",
      "label": "Primary",
      "desc": "Brand color, mapped to the CSS variable --color-primary",
      "hex": "#1f5f5b",
      "rgb": "rgb(31, 95, 91)",
      "hsl": "hsl(176.3, 50.8%, 24.7%)",
      "hslRaw": {
        "h": 176.3,
        "s": 50.8,
        "l": 24.7
      }
    },
    {
      "key": "primaryHover",
      "label": "Primary hover",
      "desc": "Hover state: --color-primary-hover",
      "hex": "#174a47",
      "rgb": "rgb(23, 74, 71)",
      "hsl": "hsl(176.5, 52.6%, 19%)",
      "hslRaw": {
        "h": 176.5,
        "s": 52.6,
        "l": 19
      }
    },
    {
      "key": "primaryActive",
      "label": "Primary active",
      "desc": "Pressed state: --color-primary-active",
      "hex": "#0f3a38",
      "rgb": "rgb(15, 58, 56)",
      "hsl": "hsl(177.2, 58.9%, 14.3%)",
      "hslRaw": {
        "h": 177.2,
        "s": 58.9,
        "l": 14.3
      }
    },
    {
      "key": "textMain",
      "label": "Text main",
      "desc": "Body text: --color-text-main",
      "hex": "#2a2622",
      "rgb": "rgb(42, 38, 34)",
      "hsl": "hsl(30, 10.5%, 14.9%)",
      "hslRaw": {
        "h": 30,
        "s": 10.5,
        "l": 14.9
      }
    },
    {
      "key": "textSub",
      "label": "Text sub",
      "desc": "Secondary text: --color-text-sub",
      "hex": "#6b625a",
      "rgb": "rgb(107, 98, 90)",
      "hsl": "hsl(28.2, 8.6%, 38.6%)",
      "hslRaw": {
        "h": 28.2,
        "s": 8.6,
        "l": 38.6
      }
    },
    {
      "key": "bg",
      "label": "Background",
      "desc": "Page background: --color-bg",
      "hex": "#f6f1e8",
      "rgb": "rgb(246, 241, 232)",
      "hsl": "hsl(38.6, 43.8%, 93.7%)",
      "hslRaw": {
        "h": 38.6,
        "s": 43.8,
        "l": 93.7
      }
    },
    {
      "key": "surface",
      "label": "Surface",
      "desc": "Card and panel background: --color-surface",
      "hex": "#efe7da",
      "rgb": "rgb(239, 231, 218)",
      "hsl": "hsl(37.1, 39.6%, 89.6%)",
      "hslRaw": {
        "h": 37.1,
        "s": 39.6,
        "l": 89.6
      }
    },
    {
      "key": "border",
      "label": "Border",
      "desc": "Dividers and outlines: --color-border",
      "hex": "#dcd0be",
      "rgb": "rgb(220, 208, 190)",
      "hsl": "hsl(36, 30%, 80.4%)",
      "hslRaw": {
        "h": 36,
        "s": 30,
        "l": 80.4
      }
    },
    {
      "key": "link",
      "label": "Link",
      "desc": "Link color: --color-link",
      "hex": "#16504c",
      "rgb": "rgb(22, 80, 76)",
      "hsl": "hsl(175.9, 56.9%, 20%)",
      "hslRaw": {
        "h": 175.9,
        "s": 56.9,
        "l": 20
      }
    },
    {
      "key": "accent",
      "label": "Accent",
      "desc": "Highlight color: --color-accent",
      "hex": "#d97757",
      "rgb": "rgb(217, 119, 87)",
      "hsl": "hsl(14.8, 63.1%, 59.6%)",
      "hslRaw": {
        "h": 14.8,
        "s": 63.1,
        "l": 59.6
      }
    }
  ],
  "roles": {
    "primary": "#1F5F5B",
    "primaryHover": "#174A47",
    "primaryActive": "#0F3A38",
    "textMain": "#2A2622",
    "textSub": "#6B625A",
    "bg": "#F6F1E8",
    "surface": "#EFE7DA",
    "border": "#DCD0BE",
    "link": "#16504c",
    "accent": "#D97757"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 13.34,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 6.56,
      "level": "AAA"
    },
    "textOnSurface": {
      "ratio": 12.23,
      "level": "AAA"
    }
  },
  "usage": {
    "cssVariables": ":root {\n  --color-primary: #1f5f5b;\n  --color-primaryHover: #174a47;\n  --color-primaryActive: #0f3a38;\n  --color-textMain: #2a2622;\n  --color-textSub: #6b625a;\n  --color-bg: #f6f1e8;\n  --color-surface: #efe7da;\n  --color-border: #dcd0be;\n  --color-link: #16504c;\n  --color-accent: #d97757;\n}",
    "cssUrl": "https://paletteget.com/palette-list/web/tao-ye-qing/index.css"
  }
}