{
  "id": "web-jing-hu-lan",
  "name": "Still Lake Blue",
  "platform": "web",
  "platformLabel": "Web",
  "slug": "jing-hu-lan",
  "tags": [
    "Business",
    "Minimal",
    "SaaS"
  ],
  "scene": "SaaS dashboards & corporate sites",
  "advice": {
    "family": "Blue",
    "depth": "The lead colour sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.",
    "muted": null,
    "suit": "The most versatile lead: technology, finance, tools and enterprise services that need to feel trustworthy.",
    "avoid": "It is so common that it can feel anonymous; support colours and typography have to do the differentiating.",
    "pair": "Deeper blue for depth and white for openness are the two hardest combinations to get wrong."
  },
  "source": "preset",
  "score": 86,
  "createdAt": "2026-10-12",
  "license": "Data free to reuse; a credit is appreciated",
  "page": "https://paletteget.com/palette-list/web/jing-hu-lan/",
  "colors": [
    {
      "key": "primary",
      "label": "Primary",
      "desc": "Brand colour, mapped to the CSS variable --color-primary",
      "hex": "#2563eb",
      "rgb": "rgb(37, 99, 235)",
      "hsl": "hsl(221.2, 83.2%, 53.3%)",
      "hslRaw": {
        "h": 221.2,
        "s": 83.2,
        "l": 53.3
      }
    },
    {
      "key": "primaryHover",
      "label": "Primary hover",
      "desc": "Hover state: --color-primary-hover",
      "hex": "#1d4ed8",
      "rgb": "rgb(29, 78, 216)",
      "hsl": "hsl(224.3, 76.3%, 48%)",
      "hslRaw": {
        "h": 224.3,
        "s": 76.3,
        "l": 48
      }
    },
    {
      "key": "primaryActive",
      "label": "Primary active",
      "desc": "Pressed state: --color-primary-active",
      "hex": "#1e40af",
      "rgb": "rgb(30, 64, 175)",
      "hsl": "hsl(225.9, 70.7%, 40.2%)",
      "hslRaw": {
        "h": 225.9,
        "s": 70.7,
        "l": 40.2
      }
    },
    {
      "key": "textMain",
      "label": "Text main",
      "desc": "Body text: --color-text-main",
      "hex": "#0f172a",
      "rgb": "rgb(15, 23, 42)",
      "hsl": "hsl(222.2, 47.4%, 11.2%)",
      "hslRaw": {
        "h": 222.2,
        "s": 47.4,
        "l": 11.2
      }
    },
    {
      "key": "textSub",
      "label": "Text sub",
      "desc": "Secondary text: --color-text-sub",
      "hex": "#64748b",
      "rgb": "rgb(100, 116, 139)",
      "hsl": "hsl(215.4, 16.3%, 46.9%)",
      "hslRaw": {
        "h": 215.4,
        "s": 16.3,
        "l": 46.9
      }
    },
    {
      "key": "bg",
      "label": "Background",
      "desc": "Page background: --color-bg",
      "hex": "#ffffff",
      "rgb": "rgb(255, 255, 255)",
      "hsl": "hsl(0, 0%, 100%)",
      "hslRaw": {
        "h": 0,
        "s": 0,
        "l": 100
      }
    },
    {
      "key": "surface",
      "label": "Surface",
      "desc": "Card and panel background: --color-surface",
      "hex": "#f8fafc",
      "rgb": "rgb(248, 250, 252)",
      "hsl": "hsl(210, 40%, 98%)",
      "hslRaw": {
        "h": 210,
        "s": 40,
        "l": 98
      }
    },
    {
      "key": "border",
      "label": "Border",
      "desc": "Dividers and outlines: --color-border",
      "hex": "#e2e8f0",
      "rgb": "rgb(226, 232, 240)",
      "hsl": "hsl(214.3, 31.8%, 91.4%)",
      "hslRaw": {
        "h": 214.3,
        "s": 31.8,
        "l": 91.4
      }
    },
    {
      "key": "link",
      "label": "Link",
      "desc": "Link colour: --color-link",
      "hex": "#0b41b9",
      "rgb": "rgb(11, 65, 185)",
      "hsl": "hsl(221.4, 88.8%, 38.4%)",
      "hslRaw": {
        "h": 221.4,
        "s": 88.8,
        "l": 38.4
      }
    },
    {
      "key": "accent",
      "label": "Accent",
      "desc": "Highlight colour: --color-accent",
      "hex": "#f59e0b",
      "rgb": "rgb(245, 158, 11)",
      "hsl": "hsl(37.7, 92.1%, 50.2%)",
      "hslRaw": {
        "h": 37.7,
        "s": 92.1,
        "l": 50.2
      }
    }
  ],
  "roles": {
    "primary": "#2563eb",
    "primaryHover": "#1d4ed8",
    "primaryActive": "#1e40af",
    "textMain": "#0f172a",
    "textSub": "#64748b",
    "bg": "#ffffff",
    "surface": "#f8fafc",
    "border": "#e2e8f0",
    "link": "#0b41b9",
    "accent": "#f59e0b"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 17.85,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 5.17,
      "level": "AAA"
    },
    "textOnSurface": {
      "ratio": 17.06,
      "level": "AAA"
    }
  },
  "usage": {
    "cssVariables": ":root {\n  --color-primary: #2563eb;\n  --color-primaryHover: #1d4ed8;\n  --color-primaryActive: #1e40af;\n  --color-textMain: #0f172a;\n  --color-textSub: #64748b;\n  --color-bg: #ffffff;\n  --color-surface: #f8fafc;\n  --color-border: #e2e8f0;\n  --color-link: #0b41b9;\n  --color-accent: #f59e0b;\n}",
    "cssUrl": "https://paletteget.com/palette-list/web/jing-hu-lan/index.css"
  }
}