{"id":51,"date":"2026-10-23T16:31:11","date_gmt":"2026-10-23T08:31:11","guid":{"rendered":"http:\/\/www.17bkb.com\/?p=51"},"modified":"2026-10-23T16:31:11","modified_gmt":"2026-10-23T08:31:11","slug":"51","status":"publish","type":"post","link":"http:\/\/www.17bkb.com\/index.php\/2026\/10\/23\/51\/","title":{"rendered":""},"content":{"rendered":"\n<div id=\"cp-app\">\n  <div class=\"cp-deco cp-deco-1\"><\/div>\n  <div class=\"cp-deco cp-deco-2\"><\/div>\n  <div class=\"cp-deco cp-deco-3\"><\/div>\n\n  <div class=\"cp-inner\">\n    <div class=\"cp-header\">\n      <div>\n        <h2 class=\"cp-title\">\u989c\u8272\u4ee3\u7801\u901f\u67e5<\/h2>\n        <p class=\"cp-sub\">\u70b9\u51fb\u4efb\u610f\u8272\u5757\uff0c\u5373\u523b\u590d\u5236 HEX \u4ee3\u7801 \u00b7 \u652f\u6301\u641c\u7d22<\/p>\n      <\/div>\n      <div class=\"cp-count\" id=\"cpCount\">0 \u8272<\/div>\n    <\/div>\n\n    <div class=\"cp-search-wrap\" id=\"cpSearchWrap\">\n      <svg class=\"cp-search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle>\n        <path d=\"m20 20-3.5-3.5\"><\/path>\n      <\/svg>\n      <input type=\"text\" id=\"cpSearch\" class=\"cp-search\" placeholder=\"\u641c\u7d22\u989c\u8272\u540d\u79f0\u6216 HEX\uff0c\u5982\uff1a\u84dd\u3001#3B82F6\u3001ff00\">\n      <button class=\"cp-clear\" id=\"cpClear\" aria-label=\"\u6e05\u7a7a\">\u00d7<\/button>\n    <\/div>\n\n    <div class=\"cp-tabs\" id=\"cpTabs\"><\/div>\n    <div class=\"cp-grid\" id=\"cpGrid\"><\/div>\n  <\/div>\n\n  <div class=\"cp-toast\" id=\"cpToast\"><\/div>\n<\/div>\n\n<style>\n#cp-app{\n  --cp-radius:22px;\n  --cp-text:#0f172a;\n  --cp-muted:#64748b;\n  --cp-border:rgba(15,23,42,.06);\n  position:relative;\n  max-width:1140px;\n  margin:36px auto;\n  border-radius:28px;\n  padding:2px;\n  background:\n    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55)),\n    linear-gradient(135deg, #eef2ff, #fdf2f8, #ecfeff);\n  border:1px solid rgba(255,255,255,.9);\n  box-shadow:\n    0 1px 2px rgba(15,23,42,.04),\n    0 12px 28px -12px rgba(15,23,42,.12),\n    0 40px 80px -40px rgba(15,23,42,.18);\n  overflow:hidden;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",sans-serif;\n  color:var(--cp-text);\n}\n#cp-app *{box-sizing:border-box;}\n#cp-app button{font:inherit;}\n\n\/* \u80cc\u666f\u88c5\u9970\u5149\u6655 *\/\n#cp-app .cp-deco{\n  position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;pointer-events:none;z-index:0;\n}\n#cp-app .cp-deco-1{width:420px;height:420px;background:#a5b4fc;top:-160px;left:-120px;}\n#cp-app .cp-deco-2{width:380px;height:380px;background:#f9a8d4;top:-140px;right:-100px;opacity:.55;}\n#cp-app .cp-deco-3{width:460px;height:460px;background:#5eead4;bottom:-240px;left:30%;opacity:.35;}\n\n#cp-app .cp-inner{\n  position:relative;z-index:1;\n  padding:32px;\n  border-radius:26px;\n  background:rgba(255,255,255,.55);\n  backdrop-filter:blur(20px) saturate(1.2);\n  -webkit-backdrop-filter:blur(20px) saturate(1.2);\n}\n\n\/* \u5934\u90e8 *\/\n#cp-app .cp-header{\n  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;\n  margin-bottom:4px;\n}\n#cp-app .cp-title{\n  margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.2;\n  background:linear-gradient(120deg,#4f46e5 0%,#9333ea 50%,#db2777 100%);\n  -webkit-background-clip:text;background-clip:text;color:transparent;\n  filter:drop-shadow(0 4px 12px rgba(99,102,241,.18));\n}\n#cp-app .cp-sub{margin:8px 0 0;font-size:13.5px;color:var(--cp-muted);letter-spacing:.01em;}\n#cp-app .cp-count{\n  padding:8px 18px;border-radius:999px;flex-shrink:0;\n  background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(236,72,153,.12));\n  color:#4f46e5;font-size:13px;font-weight:700;\n  border:1px solid rgba(99,102,241,.22);\n  backdrop-filter:blur(8px);\n  box-shadow:0 4px 14px -6px rgba(99,102,241,.35);\n}\n\n\/* \u641c\u7d22\u6846 *\/\n#cp-app .cp-search-wrap{position:relative;margin:24px 0 18px;}\n#cp-app .cp-search-icon{\n  position:absolute;left:18px;top:50%;transform:translateY(-50%);\n  width:19px;height:19px;color:#94a3b8;pointer-events:none;z-index:2;\n  transition:color .2s;\n}\n#cp-app .cp-search-wrap:focus-within .cp-search-icon{color:#6366f1;}\n#cp-app .cp-search{\n  width:100%;padding:15px 48px 15px 50px;\n  border-radius:16px;\n  border:1px solid rgba(15,23,42,.08);\n  background:rgba(255,255,255,.85);\n  backdrop-filter:blur(10px);\n  font-size:15px;color:var(--cp-text);outline:none;\n  box-shadow:\n    inset 0 1px 2px rgba(15,23,42,.03),\n    0 1px 2px rgba(15,23,42,.04);\n  transition:border-color .25s, box-shadow .25s, background .25s;\n}\n#cp-app .cp-search::placeholder{color:#94a3b8;}\n#cp-app .cp-search:focus{\n  border-color:rgba(99,102,241,.55);\n  background:#fff;\n  box-shadow:\n    0 0 0 4px rgba(99,102,241,.12),\n    0 4px 16px -6px rgba(99,102,241,.3);\n}\n#cp-app .cp-clear{\n  position:absolute;right:12px;top:50%;transform:translateY(-50%);\n  width:30px;height:30px;border-radius:50%;border:none;\n  background:rgba(15,23,42,.06);color:#64748b;\n  font-size:17px;line-height:1;cursor:pointer;\n  display:flex;align-items:center;justify-content:center;\n  opacity:0;pointer-events:none;transition:.2s;z-index:2;\n}\n#cp-app .cp-search-wrap.has-value .cp-clear{opacity:1;pointer-events:auto;}\n#cp-app .cp-clear:hover{background:rgba(15,23,42,.12);color:#0f172a;}\n\n\/* \u5206\u7c7b\u6807\u7b7e *\/\n#cp-app .cp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}\n#cp-app .cp-tab{\n  display:inline-flex;align-items:center;gap:8px;\n  padding:8px 15px;border-radius:12px;\n  border:1px solid rgba(15,23,42,.07);\n  background:rgba(255,255,255,.7);\n  backdrop-filter:blur(8px);\n  font-size:13px;font-weight:500;color:#475569;\n  cursor:pointer;user-select:none;\n  transition:all .2s cubic-bezier(.34,1.3,.64,1);\n}\n#cp-app .cp-tab-dot{\n  width:9px;height:9px;border-radius:50%;flex-shrink:0;\n  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 1px 3px rgba(15,23,42,.2);\n}\n#cp-app .cp-tab:hover{\n  transform:translateY(-1px);\n  border-color:rgba(99,102,241,.3);\n  color:#4f46e5;\n  box-shadow:0 6px 16px -8px rgba(99,102,241,.35);\n}\n#cp-app .cp-tab.active{\n  background:linear-gradient(135deg,#6366f1,#8b5cf6);\n  border-color:transparent;color:#fff;font-weight:600;\n  box-shadow:0 10px 24px -10px rgba(99,102,241,.75);\n}\n#cp-app .cp-tab.active .cp-tab-dot{box-shadow:0 0 0 2px rgba(255,255,255,.85);}\n\n\/* \u7f51\u683c *\/\n#cp-app .cp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));\n  gap:14px;\n}\n\n\/* \u5361\u7247 *\/\n#cp-app .cp-item{\n  background:rgba(255,255,255,.9);\n  border-radius:18px;\n  padding:7px;\n  border:1px solid rgba(255,255,255,.9);\n  box-shadow:\n    0 1px 2px rgba(15,23,42,.04),\n    0 8px 20px -14px rgba(15,23,42,.18);\n  cursor:pointer;\n  transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s, border-color .28s;\n  animation:cpIn .35s ease both;\n  will-change:transform;\n}\n#cp-app .cp-item:hover{\n  transform:translateY(-5px) scale(1.015);\n  border-color:rgba(99,102,241,.2);\n  box-shadow:\n    0 4px 10px -6px rgba(15,23,42,.1),\n    0 22px 40px -18px rgba(15,23,42,.28);\n}\n#cp-app .cp-item.copied{\n  border-color:#10b981;\n  box-shadow:\n    0 0 0 3px rgba(16,185,129,.2),\n    0 16px 32px -16px rgba(16,185,129,.6);\n}\n\n\/* \u8272\u5757 *\/\n#cp-app .cp-swatch{\n  position:relative;height:98px;border-radius:13px;overflow:hidden;\n  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.35);\n  transition:transform .28s ease;\n}\n#cp-app .cp-item:hover .cp-swatch{transform:scale(1.03);}\n#cp-app .cp-swatch::before{\n  content:'';position:absolute;inset:0;\n  background:linear-gradient(140deg, rgba(255,255,255,.22), transparent 55%);\n  pointer-events:none;\n}\n#cp-app .cp-swatch-hex{\n  position:absolute;left:9px;bottom:9px;\n  padding:3px 8px;border-radius:6px;\n  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;\n  font-size:10.5px;font-weight:600;letter-spacing:.02em;\n  backdrop-filter:blur(6px);\n  -webkit-backdrop-filter:blur(6px);\n  transition:.2s;\n}\n\n\/* \u5361\u7247\u4fe1\u606f *\/\n#cp-app .cp-meta{\n  display:flex;align-items:center;justify-content:space-between;gap:8px;\n  padding:10px 7px 6px;\n}\n#cp-app .cp-name{\n  font-size:13px;font-weight:600;line-height:1.3;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\n}\n#cp-app .cp-icon{width:16px;height:16px;flex-shrink:0;transition:.2s;}\n#cp-app .cp-icon-copy{color:#cbd5e1;}\n#cp-app .cp-item:hover .cp-icon-copy{color:#6366f1;}\n#cp-app .cp-icon-check{display:none;color:#10b981;}\n#cp-app .cp-item.copied .cp-icon-copy{display:none;}\n#cp-app .cp-item.copied .cp-icon-check{display:block;}\n\n\/* \u7a7a\u72b6\u6001 *\/\n#cp-app .cp-empty{\n  grid-column:1\/-1;text-align:center;\n  padding:64px 0;color:var(--cp-muted);font-size:14px;\n}\n#cp-app .cp-empty b{display:block;font-size:36px;margin-bottom:12px;opacity:.8;}\n\n\/* \u63d0\u793a\u6c14\u6ce1 *\/\n#cp-app .cp-toast{\n  position:fixed;left:50%;bottom:48px;z-index:99999;\n  transform:translate(-50%,24px) scale(.92);\n  background:rgba(15,23,42,.95);\n  backdrop-filter:blur(12px);\n  -webkit-backdrop-filter:blur(12px);\n  color:#fff;padding:13px 26px;border-radius:999px;\n  font-size:14px;font-weight:500;letter-spacing:.01em;\n  border:1px solid rgba(255,255,255,.12);\n  box-shadow:0 20px 48px -16px rgba(15,23,42,.65);\n  opacity:0;pointer-events:none;\n  transition:opacity .3s, transform .3s cubic-bezier(.34,1.5,.64,1);\n}\n#cp-app .cp-toast.show{opacity:1;transform:translate(-50%,0) scale(1);}\n\n@keyframes cpIn{\n  from{opacity:0;transform:translateY(10px) scale(.97);}\n  to{opacity:1;transform:translateY(0) scale(1);}\n}\n\n\/* \u54cd\u5e94\u5f0f *\/\n@media (max-width:720px){\n  #cp-app{margin:16px 12px;border-radius:22px;}\n  #cp-app .cp-inner{padding:20px;border-radius:20px;}\n  #cp-app .cp-title{font-size:22px;}\n  #cp-app .cp-grid{grid-template-columns:repeat(auto-fill, minmax(116px, 1fr));gap:10px;}\n  #cp-app .cp-swatch{height:76px;}\n  #cp-app .cp-search{padding:13px 42px 13px 44px;font-size:14px;}\n  #cp-app .cp-tab{padding:7px 12px;font-size:12px;}\n  #cp-app .cp-name{font-size:12px;}\n}\n\n\/* \u6df1\u8272\u6a21\u5f0f *\/\n@media (prefers-color-scheme: dark){\n  #cp-app{\n    --cp-text:#e6edf7;\n    --cp-muted:#94a3b8;\n    background:\n      linear-gradient(180deg, rgba(15,23,42,.6), rgba(15,23,42,.35)),\n      linear-gradient(135deg, #1e1b4b, #3b0764, #042f2e);\n    border-color:rgba(255,255,255,.06);\n    box-shadow:0 24px 60px -24px rgba(0,0,0,.75);\n  }\n  #cp-app .cp-inner{background:rgba(15,23,42,.55);}\n  #cp-app .cp-deco-1{background:#4338ca;opacity:.35;}\n  #cp-app .cp-deco-2{background:#9d174d;opacity:.3;}\n  #cp-app .cp-deco-3{background:#0f766e;opacity:.25;}\n  #cp-app .cp-count{\n    background:rgba(99,102,241,.18);color:#a5b4fc;border-color:rgba(129,140,248,.28);\n  }\n  #cp-app .cp-search{\n    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:#e6edf7;\n  }\n  #cp-app .cp-search:focus{background:rgba(255,255,255,.08);}\n  #cp-app .cp-search::placeholder{color:#64748b;}\n  #cp-app .cp-clear{background:rgba(255,255,255,.08);color:#94a3b8;}\n  #cp-app .cp-clear:hover{background:rgba(255,255,255,.16);}\n  #cp-app .cp-tab{\n    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:#cbd5e1;\n  }\n  #cp-app .cp-tab:hover{color:#c7d2fe;border-color:rgba(129,140,248,.35);}\n  #cp-app .cp-tab.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;}\n  #cp-app .cp-item{\n    background:rgba(255,255,255,.04);\n    border-color:rgba(255,255,255,.08);\n    box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -14px rgba(0,0,0,.7);\n  }\n  #cp-app .cp-item:hover{border-color:rgba(129,140,248,.25);}\n  #cp-app .cp-icon-copy{color:#475569;}\n  #cp-app .cp-toast{background:rgba(2,6,23,.95);}\n}\n<\/style>\n\n<script>\n(function(){\n  \/* ============ \u989c\u8272\u6570\u636e ============ *\/\n  var COLORS = [\n    \/* \u57fa\u7840 *\/\n    {n:'\u7eaf\u9ed1', c:'\u57fa\u7840', h:'#000000'},\n    {n:'\u7eaf\u767d', c:'\u57fa\u7840', h:'#FFFFFF'},\n    {n:'\u6b63\u7ea2', c:'\u57fa\u7840', h:'#FF0000'},\n    {n:'\u6b63\u7eff', c:'\u57fa\u7840', h:'#00FF00'},\n    {n:'\u6b63\u84dd', c:'\u57fa\u7840', h:'#0000FF'},\n    {n:'\u6b63\u9ec4', c:'\u57fa\u7840', h:'#FFFF00'},\n    {n:'\u6b63\u9752', c:'\u57fa\u7840', h:'#00FFFF'},\n    {n:'\u6d0b\u7ea2', c:'\u57fa\u7840', h:'#FF00FF'},\n\n    \/* \u7ea2\u8272\u7cfb *\/\n    {n:'\u5370\u5ea6\u7ea2', c:'\u7ea2', h:'#CD5C5C'},\n    {n:'\u4eae\u73ca\u745a', c:'\u7ea2', h:'#F08080'},\n    {n:'\u6df1\u7ea2', c:'\u7ea2', h:'#DC143C'},\n    {n:'\u706b\u7816\u7ea2', c:'\u7ea2', h:'#B22222'},\n    {n:'\u6697\u7ea2', c:'\u7ea2', h:'#8B0000'},\n    {n:'\u756a\u8304\u7ea2', c:'\u7ea2', h:'#FF6347'},\n    {n:'\u9c91\u9c7c\u8272', c:'\u7ea2', h:'#FA8072'},\n    {n:'\u7329\u7ea2', c:'\u7ea2', h:'#FF2400'},\n    {n:'\u6a31\u6843\u7ea2', c:'\u7ea2', h:'#DE3163'},\n    {n:'\u80ed\u8102\u7ea2', c:'\u7ea2', h:'#960018'},\n    {n:'\u73ab\u7470\u7ea2', c:'\u7ea2', h:'#E0115F'},\n    {n:'\u52c3\u826e\u7b2c\u7ea2', c:'\u7ea2', h:'#800020'},\n    {n:'\u7816\u7ea2', c:'\u7ea2', h:'#CB4154'},\n\n    \/* \u6a59\u8272\u7cfb *\/\n    {n:'\u6a59\u8272', c:'\u6a59', h:'#FFA500'},\n    {n:'\u6df1\u6a59', c:'\u6a59', h:'#FF8C00'},\n    {n:'\u73ca\u745a\u8272', c:'\u6a59', h:'#FF7F50'},\n    {n:'\u4eae\u9c91\u8089', c:'\u6a59', h:'#FFA07A'},\n    {n:'\u6a58\u7ea2', c:'\u6a59', h:'#FF4500'},\n    {n:'\u5de7\u514b\u529b', c:'\u6a59', h:'#D2691E'},\n    {n:'\u6c99\u68d5', c:'\u6a59', h:'#F4A460'},\n    {n:'\u79d8\u9c81\u8272', c:'\u6a59', h:'#CD853F'},\n    {n:'\u674f\u8272', c:'\u6a59', h:'#FBCEB1'},\n    {n:'\u5357\u74dc\u6a59', c:'\u6a59', h:'#FF7518'},\n    {n:'\u7425\u73c0\u8272', c:'\u6a59', h:'#FFBF00'},\n    {n:'\u7126\u6a59', c:'\u6a59', h:'#CC5500'},\n\n    \/* \u9ec4\u8272\u7cfb *\/\n    {n:'\u91d1\u8272', c:'\u9ec4', h:'#FFD700'},\n    {n:'\u6b63\u9ec4', c:'\u9ec4', h:'#FFFF00'},\n    {n:'\u4eae\u9ec4', c:'\u9ec4', h:'#FFFFE0'},\n    {n:'\u67e0\u6aac\u7ef8', c:'\u9ec4', h:'#FFFACD'},\n    {n:'\u5361\u5176', c:'\u9ec4', h:'#F0E68C'},\n    {n:'\u6df1\u5361\u5176', c:'\u9ec4', h:'#BDB76B'},\n    {n:'\u5c0f\u9ea6\u8272', c:'\u9ec4', h:'#F5DEB3'},\n    {n:'\u756a\u6728\u74dc', c:'\u9ec4', h:'#FFEFD5'},\n    {n:'\u82a5\u672b\u9ec4', c:'\u9ec4', h:'#FFDB58'},\n    {n:'\u9999\u69df\u9ec4', c:'\u9ec4', h:'#F7E7CE'},\n    {n:'\u5976\u6cb9\u8272', c:'\u9ec4', h:'#FFFDD0'},\n    {n:'\u85cf\u7ea2\u82b1', c:'\u9ec4', h:'#F4C430'},\n\n    \/* \u7eff\u8272\u7cfb *\/\n    {n:'\u7eff\u8272', c:'\u7eff', h:'#008000'},\n    {n:'\u9178\u6a59', c:'\u7eff', h:'#00FF00'},\n    {n:'\u9752\u67e0\u7eff', c:'\u7eff', h:'#32CD32'},\n    {n:'\u68ee\u6797\u7eff', c:'\u7eff', h:'#228B22'},\n    {n:'\u6d77\u6d0b\u7eff', c:'\u7eff', h:'#2E8B57'},\n    {n:'\u6df1\u7eff', c:'\u7eff', h:'#006400'},\n    {n:'\u6625\u7eff', c:'\u7eff', h:'#00FF7F'},\n    {n:'\u9ec4\u7eff', c:'\u7eff', h:'#9ACD32'},\n    {n:'\u8584\u8377\u7eff', c:'\u7eff', h:'#98FF98'},\n    {n:'\u7fe1\u7fe0\u7eff', c:'\u7eff', h:'#50C878'},\n    {n:'\u6a44\u6984\u7eff', c:'\u7eff', h:'#808000'},\n    {n:'\u82d4\u85d3\u7eff', c:'\u7eff', h:'#8A9A5B'},\n    {n:'\u9f20\u5c3e\u8349\u7eff', c:'\u7eff', h:'#9DC183'},\n    {n:'\u677e\u7eff\u8272', c:'\u7eff', h:'#01796F'},\n    {n:'\u730e\u7eff', c:'\u7eff', h:'#355E3B'},\n\n    \/* \u9752\u8272\u7cfb *\/\n    {n:'\u9752\u8272', c:'\u9752', h:'#00FFFF'},\n    {n:'\u7eff\u677e\u77f3', c:'\u9752', h:'#40E0D0'},\n    {n:'\u6df1\u7eff\u677e\u77f3', c:'\u9752', h:'#00CED1'},\n    {n:'\u4eae\u6d77\u84dd', c:'\u9752', h:'#20B2AA'},\n    {n:'\u519b\u84dd', c:'\u9752', h:'#5F9EA0'},\n    {n:'\u84dd\u7eff', c:'\u9752', h:'#008080'},\n    {n:'\u6df1\u9752', c:'\u9752', h:'#008B8B'},\n    {n:'\u6c34\u9e2d\u8272', c:'\u9752', h:'#00827F'},\n    {n:'\u5929\u9752\u77f3', c:'\u9752', h:'#6CA0DC'},\n    {n:'\u6e56\u84dd', c:'\u9752', h:'#00BFFF'},\n    {n:'\u9e2d\u7eff', c:'\u9752', h:'#007A74'},\n    {n:'\u78a7\u8272', c:'\u9752', h:'#2AEBB2'},\n\n    \/* \u84dd\u8272\u7cfb *\/\n    {n:'\u84dd\u8272', c:'\u84dd', h:'#0000FF'},\n    {n:'\u9053\u5947\u84dd', c:'\u84dd', h:'#1E90FF'},\n    {n:'\u77e2\u8f66\u83ca\u84dd', c:'\u84dd', h:'#6495ED'},\n    {n:'\u7687\u5bb6\u84dd', c:'\u84dd', h:'#4169E1'},\n    {n:'\u94a2\u84dd', c:'\u84dd', h:'#4682B4'},\n    {n:'\u6df1\u5929\u84dd', c:'\u84dd', h:'#00BFFF'},\n    {n:'\u5929\u84dd', c:'\u84dd', h:'#87CEEB'},\n    {n:'\u5348\u591c\u84dd', c:'\u84dd', h:'#191970'},\n    {n:'\u7231\u4e3d\u4e1d\u84dd', c:'\u84dd', h:'#F0F8FF'},\n    {n:'\u6d77\u519b\u84dd', c:'\u84dd', h:'#000080'},\n    {n:'\u94b4\u84dd', c:'\u84dd', h:'#0047AB'},\n    {n:'\u6ce2\u65af\u84dd', c:'\u84dd', h:'#1C39BB'},\n    {n:'\u7fa4\u9752', c:'\u84dd', h:'#3F00FF'},\n    {n:'\u975b\u9752', c:'\u84dd', h:'#00416A'},\n    {n:'\u54c1\u84dd', c:'\u84dd', h:'#5A5AA5'},\n\n    \/* \u7d2b\u8272\u7cfb *\/\n    {n:'\u7d2b\u8272', c:'\u7d2b', h:'#800080'},\n    {n:'\u975b\u84dd', c:'\u7d2b', h:'#4B0082'},\n    {n:'\u6df1\u7d2b', c:'\u7d2b', h:'#9400D3'},\n    {n:'\u84dd\u7d2b', c:'\u7d2b', h:'#8A2BE2'},\n    {n:'\u7d2b\u7f57\u5170', c:'\u7d2b', h:'#EE82EE'},\n    {n:'\u6885\u7ea2', c:'\u7d2b', h:'#DDA0DD'},\n    {n:'\u5170\u82b1\u7d2b', c:'\u7d2b', h:'#DA70D6'},\n    {n:'\u85b0\u8863\u8349\u7d2b', c:'\u7d2b', h:'#E6E6FA'},\n    {n:'\u4e01\u9999\u7d2b', c:'\u7d2b', h:'#C8A2C8'},\n    {n:'\u7d2b\u6c34\u6676', c:'\u7d2b', h:'#9966CC'},\n    {n:'\u62dc\u5360\u5ead\u7d2b', c:'\u7d2b', h:'#702963'},\n    {n:'\u5e1d\u738b\u7d2b', c:'\u7d2b', h:'#7851A9'},\n    {n:'\u6697\u7d2b', c:'\u7d2b', h:'#301934'},\n    {n:'\u9526\u8475\u7d2b', c:'\u7d2b', h:'#E0B0FF'},\n\n    \/* \u7c89\u8272\u7cfb *\/\n    {n:'\u7c89\u8272', c:'\u7c89', h:'#FFC0CB'},\n    {n:'\u4eae\u7c89', c:'\u7c89', h:'#FFB6C1'},\n    {n:'\u70ed\u7c89', c:'\u7c89', h:'#FF69B4'},\n    {n:'\u6df1\u7c89', c:'\u7c89', h:'#FF1493'},\n    {n:'\u6de1\u7d2b\u7ea2', c:'\u7c89', h:'#DB7093'},\n    {n:'\u73ab\u7470\u68d5', c:'\u7c89', h:'#BC8F8F'},\n    {n:'\u6a31\u82b1\u7c89', c:'\u7c89', h:'#FFB7C5'},\n    {n:'\u73ab\u7470\u7c89', c:'\u7c89', h:'#FF66CC'},\n    {n:'\u73ca\u745a\u7c89', c:'\u7c89', h:'#F88379'},\n    {n:'\u82ad\u857e\u7c89', c:'\u7c89', h:'#F4C2C2'},\n    {n:'\u9999\u7c89', c:'\u7c89', h:'#FFD1DC'},\n\n    \/* \u68d5\u8272\u7cfb *\/\n    {n:'\u68d5\u8272', c:'\u68d5', h:'#A52A2A'},\n    {n:'\u9a6c\u978d\u68d5', c:'\u68d5', h:'#8B4513'},\n    {n:'\u8d6d\u8272', c:'\u68d5', h:'#A0522D'},\n    {n:'\u79d8\u9c81\u68d5', c:'\u68d5', h:'#CD853F'},\n    {n:'\u7c73\u8272', c:'\u68d5', h:'#F5F5DC'},\n    {n:'\u9e7f\u76ae\u8272', c:'\u68d5', h:'#DEB887'},\n    {n:'\u68d5\u8910', c:'\u68d5', h:'#D2B48C'},\n    {n:'\u5de7\u514b\u529b\u68d5', c:'\u68d5', h:'#D2691E'},\n    {n:'\u5496\u5561\u8272', c:'\u68d5', h:'#6F4E37'},\n    {n:'\u9a7c\u8272', c:'\u68d5', h:'#C19A6B'},\n    {n:'\u6817\u8272', c:'\u68d5', h:'#954535'},\n    {n:'\u6df1\u68d5', c:'\u68d5', h:'#3B2F2F'},\n\n    \/* \u7070\u8272\u7cfb *\/\n    {n:'\u7070\u8272', c:'\u7070', h:'#808080'},\n    {n:'\u6df1\u7070', c:'\u7070', h:'#A9A9A9'},\n    {n:'\u4eae\u7070', c:'\u7070', h:'#D3D3D3'},\n    {n:'\u94f6\u7070', c:'\u7070', h:'#C0C0C0'},\n    {n:'\u6697\u7070', c:'\u7070', h:'#696969'},\n    {n:'\u77f3\u677f\u7070', c:'\u7070', h:'#708090'},\n    {n:'\u767d\u70df', c:'\u7070', h:'#F5F5F5'},\n    {n:'\u76d6\u6069\u65af\u4f2f\u52d2\u7070', c:'\u7070', h:'#DCDCDC'},\n    {n:'\u70ad\u7070', c:'\u7070', h:'#36454F'},\n    {n:'\u70df\u7070', c:'\u7070', h:'#848884'},\n    {n:'\u9f20\u7070', c:'\u7070', h:'#9E9E9E'},\n    {n:'\u94c1\u7070', c:'\u7070', h:'#52595D'},\n\n    \/* \u4e2d\u56fd\u4f20\u7edf\u8272 *\/\n    {n:'\u6731\u7802', c:'\u56fd\u8272', h:'#E34234'},\n    {n:'\u80ed\u8102', c:'\u56fd\u8272', h:'#9D2933'},\n    {n:'\u7edb\u7d2b', c:'\u56fd\u8272', h:'#8C4356'},\n    {n:'\u85d5\u8377', c:'\u56fd\u8272', h:'#E4C6D0'},\n    {n:'\u5929\u9752', c:'\u56fd\u8272', h:'#2A52BE'},\n    {n:'\u6e56\u84dd', c:'\u56fd\u8272', h:'#30DFF3'},\n    {n:'\u7af9\u9752', c:'\u56fd\u8272', h:'#789262'},\n    {n:'\u67f3\u7eff', c:'\u56fd\u8272', h:'#AFDD22'},\n    {n:'\u677e\u82b1', c:'\u56fd\u8272', h:'#BCE672'},\n    {n:'\u9e45\u9ec4', c:'\u56fd\u8272', h:'#FFF143'},\n    {n:'\u674f\u9ec4', c:'\u56fd\u8272', h:'#FFA631'},\n    {n:'\u7f03\u8272', c:'\u56fd\u8272', h:'#F0C239'},\n    {n:'\u79cb\u9999', c:'\u56fd\u8272', h:'#D9B611'},\n    {n:'\u85cf\u9752', c:'\u56fd\u8272', h:'#2E4E7E'},\n    {n:'\u9edb\u84dd', c:'\u56fd\u8272', h:'#425066'},\n    {n:'\u9edb\u7eff', c:'\u56fd\u8272', h:'#426666'},\n    {n:'\u58a8\u8272', c:'\u56fd\u8272', h:'#50616D'},\n    {n:'\u4e4c\u9ed1', c:'\u56fd\u8272', h:'#392F41'},\n    {n:'\u6708\u767d', c:'\u56fd\u8272', h:'#D6ECF0'},\n    {n:'\u7389\u8272', c:'\u56fd\u8272', h:'#2EDFA3'},\n    {n:'\u7f25\u8272', c:'\u56fd\u8272', h:'#7FECAD'},\n    {n:'\u77f3\u9752', c:'\u56fd\u8272', h:'#1685A9'},\n    {n:'\u77f3\u7eff', c:'\u56fd\u8272', h:'#57C3C2'},\n    {n:'\u85e4\u9ec4', c:'\u56fd\u8272', h:'#FFB61E'},\n    {n:'\u6731\u8198', c:'\u56fd\u8272', h:'#F36838'}\n  ];\n\n  \/* ============ \u5206\u7c7b\u914d\u7f6e ============ *\/\n  var CAT_META = {\n    '\u5168\u90e8': {label:'\u5168\u90e8',      dot:'linear-gradient(135deg,#f43f5e,#eab308,#22c55e,#3b82f6,#a855f7)'},\n    '\u57fa\u7840': {label:'\u57fa\u7840',      dot:'#000000'},\n    '\u7ea2':   {label:'\u7ea2\u8272\u7cfb',    dot:'#EF4444'},\n    '\u6a59':   {label:'\u6a59\u8272\u7cfb',    dot:'#F97316'},\n    '\u9ec4':   {label:'\u9ec4\u8272\u7cfb',    dot:'#EAB308'},\n    '\u7eff':   {label:'\u7eff\u8272\u7cfb',    dot:'#22C55E'},\n    '\u9752':   {label:'\u9752\u8272\u7cfb',    dot:'#06B6D4'},\n    '\u84dd':   {label:'\u84dd\u8272\u7cfb',    dot:'#3B82F6'},\n    '\u7d2b':   {label:'\u7d2b\u8272\u7cfb',    dot:'#A855F7'},\n    '\u7c89':   {label:'\u7c89\u8272\u7cfb',    dot:'#EC4899'},\n    '\u68d5':   {label:'\u68d5\u8272\u7cfb',    dot:'#92400E'},\n    '\u7070':   {label:'\u7070\u8272\u7cfb',    dot:'#6B7280'},\n    '\u56fd\u8272': {label:'\u4f20\u7edf\u8272',    dot:'linear-gradient(135deg,#E34234,#FFD700,#2A52BE)'}\n  };\n\n  \/* ============ DOM ============ *\/\n  var grid       = document.getElementById('cpGrid');\n  var tabs       = document.getElementById('cpTabs');\n  var search     = document.getElementById('cpSearch');\n  var searchWrap = document.getElementById('cpSearchWrap');\n  var clearBtn   = document.getElementById('cpClear');\n  var countEl    = document.getElementById('cpCount');\n  var toast      = document.getElementById('cpToast');\n\n  var currentCat = '\u5168\u90e8';\n  var toastTimer = null;\n\n  var ICON_COPY  = '<svg class=\"cp-icon cp-icon-copy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\"><\/rect><path d=\"M5 15V5a2 2 0 0 1 2-2h10\"><\/path><\/svg>';\n  var ICON_CHECK = '<svg class=\"cp-icon cp-icon-check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>';\n\n  \/* ============ \u5de5\u5177\u51fd\u6570 ============ *\/\n  function hexToRgb(hex){\n    return {\n      r: parseInt(hex.substr(1,2),16),\n      g: parseInt(hex.substr(3,2),16),\n      b: parseInt(hex.substr(5,2),16)\n    };\n  }\n  function luminance(hex){\n    var c = hexToRgb(hex);\n    return (0.299*c.r + 0.587*c.g + 0.114*c.b) \/ 255;\n  }\n  \/* \u6839\u636e\u8272\u5757\u4eae\u5ea6\u51b3\u5b9a HEX \u6807\u7b7e\u6837\u5f0f *\/\n  function hexBadgeStyle(hex){\n    var lum = luminance(hex);\n    if(lum > 0.6){\n      return 'background:rgba(15,23,42,.82);color:#fff;';\n    }\n    return 'background:rgba(255,255,255,.92);color:#0f172a;';\n  }\n\n  \/* ============ \u6e32\u67d3\u6807\u7b7e ============ *\/\n  function buildTabs(){\n    var cats = ['\u5168\u90e8'];\n    COLORS.forEach(function(c){\n      if(cats.indexOf(c.c) === -1) cats.push(c.c);\n    });\n    var html = '';\n    cats.forEach(function(cat){\n      var meta = CAT_META[cat] || {label:cat, dot:'#999'};\n      html += '<div class=\"cp-tab' + (cat === currentCat ? ' active' : '') +\n              '\" data-cat=\"' + cat + '\">' +\n                '<span class=\"cp-tab-dot\" style=\"background:' + meta.dot + '\"><\/span>' +\n                meta.label +\n              '<\/div>';\n    });\n    tabs.innerHTML = html;\n  }\n\n  \/* ============ \u6e32\u67d3\u5361\u7247 ============ *\/\n  function render(){\n    var kw = search.value.trim().toLowerCase().replace(\/^#\/, '');\n    searchWrap.classList.toggle('has-value', search.value.trim() !== '');\n\n    var html = '';\n    var count = 0;\n\n    COLORS.forEach(function(item){\n      if(currentCat !== '\u5168\u90e8' && item.c !== currentCat) return;\n      var hexLower = item.h.toLowerCase().replace('#','');\n      var match = !kw ||\n                  item.n.toLowerCase().indexOf(kw) > -1 ||\n                  hexLower.indexOf(kw) > -1;\n      if(!match) return;\n\n      var delay = Math.min(count, 30) * 10;\n      count++;\n      var badgeStyle = hexBadgeStyle(item.h);\n\n      html += '<div class=\"cp-item\" data-hex=\"' + item.h + '\" title=\"\u70b9\u51fb\u590d\u5236 ' + item.h + '\"' +\n                ' style=\"animation-delay:' + delay + 'ms\">' +\n                '<div class=\"cp-swatch\" style=\"background:' + item.h + '\">' +\n                  '<span class=\"cp-swatch-hex\" style=\"' + badgeStyle + '\">' + item.h + '<\/span>' +\n                '<\/div>' +\n                '<div class=\"cp-meta\">' +\n                  '<div class=\"cp-name\">' + item.n + '<\/div>' +\n                  ICON_COPY + ICON_CHECK +\n                '<\/div>' +\n              '<\/div>';\n    });\n\n    if(count === 0){\n      html = '<div class=\"cp-empty\"><b>\ud83d\udd0d<\/b>\u6ca1\u6709\u627e\u5230\u5339\u914d\u7684\u989c\u8272\uff0c\u6362\u4e2a\u5173\u952e\u8bcd\u8bd5\u8bd5<\/div>';\n    }\n\n    grid.innerHTML = html;\n    countEl.textContent = count + ' \u8272';\n  }\n\n  \/* ============ \u63d0\u793a ============ *\/\n  function showToast(text){\n    toast.textContent = '\u2705 \u5df2\u590d\u5236 ' + text;\n    toast.classList.add('show');\n    clearTimeout(toastTimer);\n    toastTimer = setTimeout(function(){\n      toast.classList.remove('show');\n    }, 1600);\n  }\n\n  \/* ============ \u590d\u5236 ============ *\/\n  function copyText(text, el){\n    function done(){\n      showToast(text);\n      if(el){\n        el.classList.add('copied');\n        setTimeout(function(){ el.classList.remove('copied'); }, 950);\n      }\n    }\n    if(navigator.clipboard && window.isSecureContext){\n      navigator.clipboard.writeText(text).then(done).catch(function(){ fallbackCopy(text, done); });\n    } else {\n      fallbackCopy(text, done);\n    }\n  }\n  function fallbackCopy(text, done){\n    var ta = document.createElement('textarea');\n    ta.value = text;\n    ta.style.position = 'fixed';\n    ta.style.top = '-1000px';\n    ta.style.opacity = '0';\n    document.body.appendChild(ta);\n    ta.select();\n    try{ document.execCommand('copy'); done(); }\n    catch(e){ showToast('\u590d\u5236\u5931\u8d25\uff0c\u8bf7\u624b\u52a8\u590d\u5236'); }\n    document.body.removeChild(ta);\n  }\n\n  \/* ============ \u4e8b\u4ef6 ============ *\/\n  tabs.addEventListener('click', function(e){\n    var tab = e.target.closest('.cp-tab');\n    if(!tab) return;\n    currentCat = tab.getAttribute('data-cat');\n    var all = tabs.querySelectorAll('.cp-tab');\n    for(var i = 0; i < all.length; i++) all[i].classList.remove('active');\n    tab.classList.add('active');\n    render();\n  });\n\n  grid.addEventListener('click', function(e){\n    var item = e.target.closest('.cp-item');\n    if(!item) return;\n    copyText(item.getAttribute('data-hex'), item);\n  });\n\n  search.addEventListener('input', render);\n\n  clearBtn.addEventListener('click', function(){\n    search.value = '';\n    render();\n    search.focus();\n  });\n\n  \/* ============ \u542f\u52a8 ============ *\/\n  buildTabs();\n  render();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u989c\u8272\u4ee3\u7801\u901f\u67e5 \u70b9\u51fb\u4efb\u610f\u8272\u5757\uff0c\u5373\u523b\u590d\u5236 HEX \u4ee3\u7801 \u00b7 \u652f\u6301&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":1,"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":52,"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/posts\/51\/revisions\/52"}],"wp:attachment":[{"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.17bkb.com\/index.php\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}