Hotodogo | Snippets: Traditional Colors in China and Japan

:root {
    --primary: #6366f1;
    --bg: #f1f5f9;
    --card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius: 12px;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 24px 16px;
}

CSS Before Head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Head

.container {
    max-width: 1100px;
    margin: 0 auto;
}
.page-header {
    text-align: center;
    margin-bottom: 24px;
}
.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}
.page-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.toolbar input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--card);
    transition: border-color 0.2s;
}
.toolbar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.toolbar .count {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}
.color-swatch {
    border-radius: 8px;
    padding: 14px 8px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(0,0,0,0.06);
}
.color-swatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 1;
}
.color-swatch .swatch-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}
.color-swatch .swatch-hex {
    font-size: 0.65rem;
    font-family: "JetBrains Mono", monospace;
    opacity: 0.75;
}
.color-swatch .copied-toast {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.color-swatch.copied .copied-toast {
    opacity: 1;
}

CSS After Head

var COLORS = [

];

function renderColors(filter) {
    var grid = document.getElementById('colorGrid');
    var q = (filter || '').toLowerCase().trim();
    var html = '';
    var count = 0;
    for (var i = 0; i < COLORS.length; i++) {
        var c = COLORS[i];
        if (q && c.n.toLowerCase().indexOf(q) === -1 && c.h.toLowerCase().indexOf(q) === -1) continue;
        html += '<div class="color-swatch" style="background-color:' + c.h + ';color:' + c.t + ';" data-hex="' + c.h + '" onclick="copyHex(this)">';
        html += '<div class="swatch-name">' + c.n + '</div>';
        html += '<div class="swatch-hex">' + c.h + '</div>';
        html += '<div class="copied-toast">Copied!</div>';
        html += '</div>';
        count++;
    }
    grid.innerHTML = html;
    document.getElementById('colorCount').textContent = count + ' / ' + COLORS.length;
}

function copyHex(el) {
    var hex = el.getAttribute('data-hex');
    navigator.clipboard.writeText(hex).then(function() {
        el.classList.add('copied');
        setTimeout(function() { el.classList.remove('copied'); }, 800);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    renderColors('');
    document.getElementById('searchInput').addEventListener('input', function() {
        renderColors(this.value);
    });
});

JS Before HTML Body

HTML Body Attrs

<div class="tc-app" id="tcApp">
  <div class="tc-header">
    <h1 class="tc-title">中国传统色</h1>
    <p class="tc-subtitle">Traditional Colors in China and Japan</p>
  </div>
  <div class="tc-toolbar">
    <div class="tc-search">
      <input type="text" id="tcSearch" placeholder="搜索颜色名称或色值..." autocomplete="off">
      <span class="tc-search-icon">&#128269;</span>
    </div>
    <div class="tc-stats" id="tcStats">628 colors</div>
  </div>
  <div class="tc-grid" id="tcGrid"></div>
  <div class="tc-empty" id="tcEmpty" style="display:none;">没有找到匹配的颜色</div>
</div>

<style>
.tc-app {
  --tc-primary: #c0392b;
  --tc-primary-light: #e74c3c;
  --tc-bg: #faf7f2;
  --tc-card-bg: #fff;
  --tc-text: #2c2c2c;
  --tc-text-muted: #888;
  --tc-border: #e8e0d4;
  --tc-radius: 10px;
  --tc-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--tc-bg);
  color: var(--tc-text);
  min-height: 100vh;
  padding: 0;
  margin: 0;
}
.tc-header {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  background: linear-gradient(135deg, #c0392b 0%, #8e1a1a 100%);
  color: #fff;
}
.tc-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  letter-spacing: 0.1em;
}
.tc-subtitle {
  font-size: 0.95rem;
  opacity: 0.8;
  margin: 0;
  font-weight: 400;
}
.tc-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 1.5rem auto 1rem;
  padding: 0 1.5rem;
  flex-wrap: wrap;
}
.tc-search {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.tc-search input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.4rem;
  border: 1px solid var(--tc-border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--tc-card-bg);
  color: var(--tc-text);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.tc-search input:focus {
  border-color: var(--tc-primary);
}
.tc-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.5;
}
.tc-stats {
  font-size: 0.85rem;
  color: var(--tc-text-muted);
  white-space: nowrap;
}
.tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}
.tc-card {
  border-radius: var(--tc-radius);
  overflow: hidden;
  box-shadow: var(--tc-shadow);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--tc-card-bg);
}
.tc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.tc-swatch {
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px;
  position: relative;
}
.tc-swatch-hex {
  font-size: 0.7rem;
  font-family: "JetBrains Mono", "Consolas", monospace;
  opacity: 0.7;
  letter-spacing: 0.03em;
}
.tc-info {
  padding: 8px 10px;
  text-align: center;
}
.tc-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.tc-hex-label {
  font-size: 0.7rem;
  color: var(--tc-text-muted);
  font-family: "JetBrains Mono", "Consolas", monospace;
  margin-top: 2px;
}
.tc-empty {
  text-align: center;
  padding: 3rem;
  color: var(--tc-text-muted);
  font-size: 1rem;
}
.tc-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #333;
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 0;
  transition: all 0.3s;
  z-index: 9999;
  pointer-events: none;
}
.tc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
  .tc-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 0 0.75rem; }
  .tc-swatch { height: 60px; }
  .tc-title { font-size: 1.6rem; }
  .tc-toolbar { padding: 0 0.75rem; }
}
</style>

<div class="tc-toast" id="tcToast"></div>

<script>
(function() {
  var COLORS = [
["#000","#70f3ff","蔚蓝","#70f3ff"],
["#000","#44cef6","蓝","#44cef6"],
["#000","#3eede7","碧蓝","#3eede7"],
["#fff","#1685a9","石青","#1685a9"],
["#fff","#177cb0","靛青","#177cb0"],
["#fff","#065279","靛蓝","#065279"],
["#fff","#003472","花青","#003472"],
["#fff","#4b5cc4","宝蓝","#4b5cc4"],
["#000","#a1afc9","蓝灰色","#a1afc9"],
["#fff","#2e4e7e","藏青","#2e4e7e"],
["#fff","#3b2e7e","藏蓝","#3b2e7e"],
["#fff","#4a4266","黛","#4a4266"],
["#fff","#426666","黛绿","#426666"],
["#fff","#425066","黛蓝","#425066"],
["#fff","#574266","黛紫","#574266"],
["#fff","#8d4bbb","紫色","#8d4bbb"],
["#fff","#815463","紫酱","#815463"],
["#fff","#815476","酱紫","#815476"],
["#fff","#4c221b","紫檀","#4c221b"],
["#fff","#003371","绀青","#003371"],
["#fff","#56004f","紫棠","#56004f"],
["#fff","#801dae","青莲","#801dae"],
["#fff","#4c8dae","群青","#4c8dae"],
["#000","#b0a4e3","雪青","#b0a4e3"],
["#000","#cca4e3","丁香色","#cca4e3"],
["#000","#edd1d8","藕色","#edd1d8"],
["#000","#e4c6d0","藕荷色","#e4c6d0"],
["#000","#ff461f","朱砂","#ff461f"],
["#000","#ff2d51","火红","#ff2d51"],
["#000","#f36838","朱膘","#f36838"],
["#000","#ed5736","妃色","#ed5736"],
["#000","#ff4777","洋红","#ff4777"],
["#000","#f00056","品红","#f00056"],
["#000","#ffb3a7","粉红","#ffb3a7"],
["#000","#f47983","桃红","#f47983"],
["#000","#db5a6b","海棠红","#db5a6b"],
["#000","#c93756","樱桃色","#c93756"],
["#000","#f9906f","酡颜","#f9906f"],
["#000","#f05654","银红","#f05654"],
["#000","#ff2121","大红","#ff2121"],
["#000","#f20c00","石榴红","#f20c00"],
["#000","#8c4356","绛紫","#8c4356"],
["#000","#c83c23","绯红","#c83c23"],
["#000","#9d2933","胭脂","#9d2933"],
["#000","#ff4c00","朱红","#ff4c00"],
["#000","#ff4e20","丹","#ff4e20"],
["#000","#f35336","彤","#f35336"],
["#000","#dc3023","酡红","#dc3023"],
["#000","#ff3300","炎","#ff3300"],
["#000","#cb3a56","茜色","#cb3a56"],
["#000","#a98175","绾","#a98175"],
["#000","#b36d61","檀","#b36d61"],
["#000","#ef7a82","嫣红","#ef7a82"],
["#000","#ff0097","洋红","#ff0097"],
["#fff","#c32136","枣红","#c32136"],
["#fff","#be002f","殷红","#be002f"],
["#fff","#c91f37","赫赤","#c91f37"],
["#fff","#bf242a","银朱","#bf242a"],
["#fff","#c3272b","赤","#c3272b"],
["#fff","#9d2933","胭脂","#9d2933"],
["#fff","#60281e","栗色","#60281e"],
["#fff","#622a1d","玄色","#622a1d"],
["#000","#bce672","松花色","#bce672"],
["#000","#c9dd22","柳黄","#c9dd22"],
["#000","#bddd22","嫩绿","#bddd22"],
["#000","#afdd22","柳绿","#afdd22"],
["#000","#a3d900","葱黄","#a3d900"],
["#000","#9ed900","葱绿","#9ed900"],
["#000","#9ed048","豆绿","#9ed048"],
["#000","#96ce54","豆青","#96ce54"],
["#000","#00bc12","油绿","#00bc12"],
["#000","#0eb83a","葱倩","#0eb83a"],
["#000","#0eb83a","葱青","#0eb83a"],
["#000","#0aa344","青葱","#0aa344"],
["#000","#16a951","石绿","#16a951"],
["#000","#21a675","松柏绿","#21a675"],
["#fff","#057748","松花绿","#057748"],
["#fff","#0c8918","绿沈","#0c8918"],
["#000","#00e500","绿色","#00e500"],
["#000","#40de5a","草绿","#40de5a"],
["#000","#00e079","青翠","#00e079"],
["#000","#00e09e","青色","#00e09e"],
["#000","#3de1ad","翡翠色","#3de1ad"],
["#000","#2add9c","碧绿","#2add9c"],
["#000","#2edfa3","玉色","#2edfa3"],
["#000","#7fecad","缥","#7fecad"],
["#000","#a4e2c6","艾绿","#a4e2c6"],
["#000","#7bcfa6","石青","#7bcfa6"],
["#000","#1bd1a5","碧色","#1bd1a5"],
["#000","#48c0a3","青碧","#48c0a3"],
["#000","#549688","铜绿","#549688"],
["#000","#789262","竹青","#789262"],
["#fff","#758a99","墨灰","#758a99"],
["#fff","#50616d","墨色","#50616d"],
["#fff","#424c50","鸦青","#424c50"],
["#fff","#41555d","黯","#41555d"],
["#000","#eaff56","樱草色","#eaff56"],
["#000","#fff143","鹅黄","#fff143"],
["#000","#faff72","鸭黄","#faff72"],
["#000","#ffa631","杏黄","#ffa631"],
["#000","#ffa400","橙黄","#ffa400"],
["#000","#fa8c35","橙色","#fa8c35"],
["#000","#ff8c31","杏红","#ff8c31"],
["#000","#ff8936","橘黄","#ff8936"],
["#000","#ff7500","橘红","#ff7500"],
["#000","#ffb61e","藤黄","#ffb61e"],
["#000","#ffc773","姜黄","#ffc773"],
["#000","#ffc64b","雌黄","#ffc64b"],
["#000","#f2be45","赤金","#f2be45"],
["#000","#f0c239","缃色","#f0c239"],
["#000","#e9bb1d","雄黄","#e9bb1d"],
["#000","#d9b611","秋香色","#d9b611"],
["#000","#eacd76","金色","#eacd76"],
["#000","#eedeb0","牙色","#eedeb0"],
["#000","#d3b17d","枯黄","#d3b17d"],
["#000","#e29c45","黄栌","#e29c45"],
["#000","#a78e44","乌金","#a78e44"],
["#000","#c89b40","昏黄","#c89b40"],
["#000","#ae7000","棕黄","#ae7000"],
["#000","#ca6924","琥珀","#ca6924"],
["#fff","#b25d25","棕色","#b25d25"],
["#fff","#b35c44","茶色","#b35c44"],
["#fff","#9b4400","棕红","#9b4400"],
["#fff","#9c5333","赭","#9c5333"],
["#fff","#a88462","驼色","#a88462"],
["#fff","#896c39","秋色","#896c39"],
["#fff","#827100","棕绿","#827100"],
["#fff","#6e511e","褐色","#6e511e"],
["#fff","#7c4b00","棕黑","#7c4b00"],
["#fff","#955539","赭色","#955539"],
["#fff","#845a33","赭石","#845a33"],
["#000","#ffffff","精白","#ffffff"],
["#000","#e9e7ef","银白","#e9e7ef"],
["#000","#f0f0f4","铅白","#f0f0f4"],
["#000","#e9f1f6","霜色","#e9f1f6"],
["#000","#f0fcff","雪白","#f0fcff"],
["#000","#e3f9fd","莹白","#e3f9fd"],
["#000","#d6ecf0","月白","#d6ecf0"],
["#000","#fffbf0","象牙白","#fffbf0"],
["#000","#f2ecde","缟","#f2ecde"],
["#000","#fcefe8","鱼肚白","#fcefe8"],
["#000","#fff2df","白粉","#fff2df"],
["#000","#f3f9f1","荼白","#f3f9f1"],
["#000","#e0eee8","鸭卵青","#e0eee8"],
["#000","#e0f0e9","素","#e0f0e9"],
["#000","#c0ebd7","青白","#c0ebd7"],
["#000","#bbcdc5","蟹壳青","#bbcdc5"],
["#000","#c2ccd0","花白","#c2ccd0"],
["#000","#bacac6","老银","#bacac6"],
["#000","#808080","灰色","#808080"],
["#000","#75878a","苍色","#75878a"],
["#000","#88ada6","水色","#88ada6"],
["#fff","#6b6882","黝","#6b6882"],
["#fff","#725e82","乌色","#725e82"],
["#fff","#3d3b4f","玄青","#3d3b4f"],
["#fff","#392f41","乌黑","#392f41"],
["#fff","#75664d","黎","#75664d"],
["#fff","#5d513c","黧","#5d513c"],
["#fff","#665757","黝黑","#665757"],
["#fff","#493131","缁色","#493131"],
["#fff","#312520","煤黑","#312520"],
["#fff","#161823","漆黑","#161823"],
["#fff","#000000","黑色","#000000"],
["#fff","#895b8a","古代紫","#895b8a"],
["#fff","#824880","茄子紺","#824880"],
["#fff","#915c8b","二藍","#915c8b"],
["#fff","#9d5b8b","京紫","#9d5b8b"],
["#fff","#7a4171","蒲葡","#7a4171"],
["#000","#bc64a4","若紫","#bc64a4"],
["#000","#b44c97","紅紫","#b44c97"],
["#000","#aa4c8f","梅紫","#aa4c8f"],
["#000","#cc7eb1","菖蒲色","#cc7eb1"],
["#000","#cca6bf","紅藤色","#cca6bf"],
["#000","#c4a3bf","浅紫","#c4a3bf"],
["#000","#e7e7eb","紫水晶","#e7e7eb"],
["#000","#dcd6d9","薄梅鼠","#dcd6d9"],
["#000","#d3cfd9","暁鼠","#d3cfd9"],
["#000","#d3ccd6","牡丹鼠","#d3ccd6"],
["#000","#c8c2c6","霞色","#c8c2c6"],
["#000","#a6a5c4","藤鼠","#a6a5c4"],
["#000","#a69abd","半色","#a69abd"],
["#000","#a89dac","薄色","#a89dac"],
["#000","#9790a4","薄鼠","#9790a4"],
["#000","#9e8b8e","鳩羽鼠","#9e8b8e"],
["#000","#95859c","鳩羽色","#95859c"],
["#000","#95949a","桔梗鼠","#95949a"],
["#000","#71686c","紫鼠","#71686c"],
["#000","#705b67","葡萄鼠","#705b67"],
["#fff","#634950","濃色","#634950"],
["#fff","#5f414b","紫鳶","#5f414b"],
["#fff","#4f455c","濃鼠","#4f455c"],
["#fff","#5a5359","藤煤竹","#5a5359"],
["#fff","#594255","滅紫","#594255"],
["#fff","#524748","紅消鼠","#524748"],
["#fff","#513743","似せ紫","#513743"],
["#000","#e6eae3","灰黄緑","#e6eae3"],
["#000","#d4dcd6","蕎麦切色","#d4dcd6"],
["#000","#d4dcda","薄雲鼠","#d4dcda"],
["#000","#d3cbc6","枯野色","#d3cbc6"],
["#000","#c8c2be","潤色","#c8c2be"],
["#000","#b3ada0","利休白茶","#b3ada0"],
["#000","#a99e93","茶鼠","#a99e93"],
["#000","#a58f86","胡桃染","#a58f86"],
["#000","#928178","江戸鼠","#928178"],
["#000","#887f7a","煤色","#887f7a"],
["#000","#b4866b","丁子茶","#b4866b"],
["#000","#b28c6e","柴染","#b28c6e"],
["#000","#a16d5d","宗伝唐茶","#a16d5d"],
["#000","#9f6f55","砺茶","#9f6f55"],
["#fff","#8c6450","煎茶色","#8c6450"],
["#fff","#856859","銀煤竹","#856859"],
["#fff","#765c47","黄枯茶","#765c47"],
["#fff","#6f514c","煤竹色","#6f514c"],
["#fff","#6f4b3e","焦茶","#6f4b3e"],
["#fff","#544a47","黒橡","#544a47"],
["#fff","#543f32","憲法色","#543f32"],
["#fff","#554738","涅色","#554738"],
["#fff","#433d3c","檳榔子染","#433d3c"],
["#fff","#432f2f","黒鳶","#432f2f"],
["#fff","#3f312b","赤墨","#3f312b"],
["#fff","#302833","黒紅","#302833"],
["#000","#ffffff","白","#ffffff"],
["#000","#fffffc","胡粉色","#fffffc"],
["#000","#f7fcfe","卯の花色","#f7fcfe"],
["#000","#f8fbf8","白磁","#f8fbf8"],
["#000","#fbfaf5","生成り色","#fbfaf5"],
["#000","#f3f3f3","乳白色","#f3f3f3"],
["#000","#f3f3f2","白練","#f3f3f2"],
["#000","#eae5e3","素色","#eae5e3"],
["#000","#e5e4e6","白梅鼠","#e5e4e6"],
["#000","#dcdddd","白鼠","#dcdddd"],
["#000","#dddcd6","絹鼠","#dddcd6"],
["#000","#c0c6c9","灰青","#c0c6c9"],
["#000","#afafb0","銀鼠","#afafb0"],
["#000","#adadad","薄鈍","#adadad"],
["#000","#a3a3a2","薄墨色","#a3a3a2"],
["#000","#9ea1a3","錫色","#9ea1a3"],
["#000","#9fa0a0","素鼠","#9fa0a0"],
["#000","#949495","鼠色","#949495"],
["#000","#888084","源氏鼠","#888084"],
["#000","#7d7d7d","灰色","#7d7d7d"],
["#000","#7b7c7d","鉛色","#7b7c7d"],
["#000","#727171","鈍色","#727171"],
["#fff","#595857","墨","#595857"],
["#fff","#595455","丼鼠","#595455"],
["#fff","#524e4d","消炭色","#524e4d"],
["#fff","#474a4d","藍墨茶","#474a4d"],
["#fff","#383c3c","羊羹色","#383c3c"],
["#fff","#2b2b2b","蝋色","#2b2b2b"],
["#fff","#2b2b2b","黒","#2b2b2b"],
["#fff","#180614","烏羽色","#180614"],
["#fff","#281a14","鉄黒","#281a14"],
["#fff","#000b00","濡羽色","#000b00"],
["#fff","#250d00","黒壇","#250d00"],
["#fff","#241a08","憲法黒茶","#241a08"],
["#fff","#16160e","暗黒色","#16160e"],
["#fff","#006e54","萌葱色","#006e54"],
["#000","#00a381","花緑青","#00a381"],
["#000","#38b48b","翡翠色","#38b48b"],
["#000","#00a497","青緑","#00a497"],
["#000","#80aba9","水浅葱","#80aba9"],
["#000","#5c9291","錆浅葱","#5c9291"],
["#000","#478384","青碧","#478384"],
["#fff","#43676b","御召茶","#43676b"],
["#fff","#80989b","湊鼠","#80989b"],
["#fff","#2c4f54","高麗納戸","#2c4f54"],
["#fff","#1f3134","百入茶","#1f3134"],
["#fff","#47585c","錆鼠","#47585c"],
["#fff","#485859","錆鉄御納戸","#485859"],
["#fff","#6c848d","藍鼠","#6c848d"],
["#fff","#53727d","錆御納戸","#53727d"],
["#fff","#5b7e91","舛花色","#5b7e91"],
["#fff","#426579","熨斗目花色","#426579"],
["#fff","#4c6473","御召御納戸","#4c6473"],
["#fff","#455765","鉄御納戸","#455765"],
["#fff","#44617b","紺鼠","#44617b"],
["#fff","#393f4c","藍鉄","#393f4c"],
["#fff","#393e4f","青褐","#393e4f"],
["#fff","#203744","褐返","#203744"],
["#fff","#4d4c61","褐色","#4d4c61"],
["#000","#eaf4fc","月白","#eaf4fc"],
["#000","#eaedf7","白菫色","#eaedf7"],
["#000","#e8ecef","白花色","#e8ecef"],
["#000","#ebf6f7","藍白","#ebf6f7"],
["#000","#c1e4e9","白藍","#c1e4e9"],
["#000","#bce2e8","水色","#bce2e8"],
["#000","#a2d7dd","瓶覗","#a2d7dd"],
["#000","#abced8","秘色色","#abced8"],
["#000","#a0d8ef","空色","#a0d8ef"],
["#000","#89c3eb","勿忘草色","#89c3eb"],
["#000","#84a2d4","青藤色","#84a2d4"],
["#000","#83ccd2","白群","#83ccd2"],
["#000","#84b9cb","浅縹","#84b9cb"],
["#000","#698aab","薄花色","#698aab"],
["#000","#008899","納戸色","#008899"],
["#000","#00a3af","浅葱色","#00a3af"],
["#000","#2a83a2","花浅葱","#2a83a2"],
["#000","#59b9c6","新橋色","#59b9c6"],
["#000","#2ca9e1","天色","#2ca9e1"],
["#000","#38a1db","露草色","#38a1db"],
["#000","#0095d9","青","#0095d9"],
["#000","#0094c8","薄藍","#0094c8"],
["#fff","#2792c3","縹色","#2792c3"],
["#fff","#007bbb","紺碧","#007bbb"],
["#fff","#5383c3","薄群青","#5383c3"],
["#fff","#5a79ba","薄花桜","#5a79ba"],
["#fff","#4c6cb3","群青色","#4c6cb3"],
["#fff","#3e62ad","杜若色","#3e62ad"],
["#fff","#1e50a2","瑠璃色","#1e50a2"],
["#fff","#507ea4","薄縹","#507ea4"],
["#fff","#19448e","瑠璃紺","#19448e"],
["#fff","#164a84","紺瑠璃","#164a84"],
["#fff","#165e83","藍色","#165e83"],
["#fff","#274a78","青藍","#274a78"],
["#fff","#2a4073","深縹","#2a4073"],
["#fff","#223a70","紺色","#223a70"],
["#fff","#192f60","紺青","#192f60"],
["#fff","#1c305c","留紺","#1c305c"],
["#fff","#0f2350","濃藍","#0f2350"],
["#fff","#17184b","鉄紺","#17184b"],
["#fff","#0d0015","漆黒","#0d0015"],
["#000","#bbc8e6","淡藤色","#bbc8e6"],
["#000","#bbbcde","藤色","#bbbcde"],
["#000","#8491c3","紅掛空色","#8491c3"],
["#000","#8491c3","紅碧","#8491c3"],
["#fff","#4d5aaf","紺桔梗","#4d5aaf"],
["#fff","#4d5aaf","花色","#4d5aaf"],
["#fff","#4a488e","紺藍","#4a488e"],
["#fff","#4d4398","紅桔梗","#4d4398"],
["#fff","#5654a2","桔梗色","#5654a2"],
["#fff","#706caa","藤納戸","#706caa"],
["#fff","#68699b","紅掛花色","#68699b"],
["#fff","#867ba9","紫苑色","#867ba9"],
["#000","#dbd0e6","白藤色","#dbd0e6"],
["#000","#a59aca","藤紫","#a59aca"],
["#fff","#7058a3","菫色","#7058a3"],
["#fff","#674598","青紫","#674598"],
["#fff","#674196","菖蒲色","#674196"],
["#000","#9079ad","竜胆色","#9079ad"],
["#fff","#745399","江戸紫","#745399"],
["#fff","#65318e","本紫","#65318e"],
["#fff","#522f60","葡萄色","#522f60"],
["#fff","#493759","深紫","#493759"],
["#fff","#2e2930","紫黒","#2e2930"],
["#000","#884898","紫","#884898"],
["#000","#c0a2c7","薄葡萄","#c0a2c7"],
["#fff","#460e44","紫紺","#460e44"],
["#fff","#74325c","暗紅色","#74325c"],
["#fff","#55295b","桑の実色","#55295b"],
["#000","#e6b422","黄金","#e6b422"],
["#000","#d9a62e","櫨染","#d9a62e"],
["#000","#d3a243","黄朽葉色","#d3a243"],
["#000","#c89932","山吹茶","#c89932"],
["#000","#d0af4c","芥子色","#d0af4c"],
["#000","#8b968d","豆がら茶","#8b968d"],
["#000","#6e7955","麹塵","#6e7955"],
["#000","#767c6b","山鳩色","#767c6b"],
["#000","#888e7e","利休鼠","#888e7e"],
["#fff","#5a544b","海松茶","#5a544b"],
["#fff","#56564b","藍海松茶","#56564b"],
["#fff","#56564b","藍媚茶","#56564b"],
["#fff","#494a41","千歳茶","#494a41"],
["#fff","#6b6f59","岩井茶","#6b6f59"],
["#fff","#474b42","仙斎茶","#474b42"],
["#fff","#333631","黒緑","#333631"],
["#fff","#5b6356","柳煤竹","#5b6356"],
["#fff","#726250","樺茶色","#726250"],
["#000","#9d896c","空五倍子色","#9d896c"],
["#000","#94846a","生壁色","#94846a"],
["#fff","#897858","肥後煤竹","#897858"],
["#fff","#716246","媚茶","#716246"],
["#000","#cbb994","白橡","#cbb994"],
["#000","#d6c6af","亜麻色","#d6c6af"],
["#000","#bfa46f","榛色","#bfa46f"],
["#000","#9e9478","灰汁色","#9e9478"],
["#fff","#a59564","利休茶","#a59564"],
["#fff","#715c1f","鶯茶","#715c1f"],
["#000","#c7b370","木蘭色","#c7b370"],
["#000","#dcd3b2","砂色","#dcd3b2"],
["#000","#a19361","油色","#a19361"],
["#000","#8f8667","利休色","#8f8667"],
["#000","#887938","梅幸茶","#887938"],
["#fff","#6a5d21","璃寛茶","#6a5d21"],
["#000","#918754","黄海松茶","#918754"],
["#000","#a69425","菜種油色","#a69425"],
["#000","#ada250","青朽葉","#ada250"],
["#000","#938b4b","根岸色","#938b4b"],
["#000","#8c8861","鶸茶","#8c8861"],
["#000","#a1a46d","柳茶","#a1a46d"],
["#fff","#726d40","海松色","#726d40"],
["#000","#928c36","鶯色","#928c36"],
["#000","#dccb18","緑黄色","#dccb18"],
["#000","#d7cf3a","鶸色","#d7cf3a"],
["#000","#c5c56a","抹茶色","#c5c56a"],
["#000","#c3d825","若草色","#c3d825"],
["#000","#b8d200","黄緑","#b8d200"],
["#000","#e0ebaf","若芽色","#e0ebaf"],
["#000","#d8e698","若菜色","#d8e698"],
["#000","#c7dc68","若苗色","#c7dc68"],
["#000","#99ab4e","青丹","#99ab4e"],
["#000","#7b8d42","草色","#7b8d42"],
["#000","#69821b","苔色","#69821b"],
["#000","#aacf53","萌黄","#aacf53"],
["#000","#b0ca71","苗色","#b0ca71"],
["#000","#b9d08b","若葉色","#b9d08b"],
["#000","#839b5c","松葉色","#839b5c"],
["#000","#cee4ae","夏虫色","#cee4ae"],
["#000","#82ae46","鶸萌黄","#82ae46"],
["#000","#a8c97f","柳色","#a8c97f"],
["#000","#9ba88d","青白橡","#9ba88d"],
["#000","#c8d5bb","柳鼠","#c8d5bb"],
["#000","#c1d8ac","裏葉柳","#c1d8ac"],
["#000","#a8bf93","山葵色","#a8bf93"],
["#000","#769164","老竹色","#769164"],
["#000","#d6e9ca","白緑","#d6e9ca"],
["#000","#93ca76","淡萌黄","#93ca76"],
["#000","#93b881","柳染","#93b881"],
["#000","#badcad","薄萌葱","#badcad"],
["#000","#97a791","深川鼠","#97a791"],
["#000","#98d98e","若緑","#98d98e"],
["#000","#88cb7f","浅緑","#88cb7f"],
["#000","#69b076","薄緑","#69b076"],
["#000","#6b7b6e","青鈍","#6b7b6e"],
["#000","#bed2c3","青磁鼠","#bed2c3"],
["#000","#93b69c","薄青","#93b69c"],
["#000","#a6c8b2","錆青磁","#a6c8b2"],
["#000","#47885e","緑青色","#47885e"],
["#fff","#316745","千歳緑","#316745"],
["#000","#68be8d","若竹色","#68be8d"],
["#000","#3eb370","緑","#3eb370"],
["#000","#007b43","常磐色","#007b43"],
["#000","#bed3ca","千草鼠","#bed3ca"],
["#000","#92b5a9","千草色","#92b5a9"],
["#000","#7ebea5","青磁色","#7ebea5"],
["#000","#7ebeab","青竹色","#7ebeab"],
["#000","#028760","常磐緑","#028760"],
["#000","#3b7960","木賊色","#3b7960"],
["#fff","#2f5d50","天鵞絨","#2f5d50"],
["#fff","#3a5b52","虫襖","#3a5b52"],
["#fff","#475950","革色","#475950"],
["#fff","#00552e","深緑","#00552e"],
["#fff","#005243","鉄色","#005243"],
["#fff","#96514d","小豆色","#96514d"],
["#fff","#8d6449","枯茶","#8d6449"],
["#000","#deb068","饴色","#deb068"],
["#000","#bf794e","骆驼色","#bf794e"],
["#000","#bc763c","土色","#bc763c"],
["#000","#b98c46","黄唐色","#b98c46"],
["#000","#b79b5b","桑染","#b79b5b"],
["#000","#b77b57","栌色","#b77b57"],
["#000","#b68d4c","黄橡","#b68d4c"],
["#000","#ad7d4c","丁字染","#ad7d4c"],
["#000","#ad7d4c","香染","#ad7d4c"],
["#000","#ae7c4f","枇杷茶","#ae7c4f"],
["#000","#ad7e4e","芝翫茶","#ad7e4e"],
["#000","#ae7c58","焦香","#ae7c58"],
["#000","#a86f4c","胡桃色","#a86f4c"],
["#000","#946243","渋纸色","#946243"],
["#000","#917347","朽葉色","#917347"],
["#000","#956f29","桑茶","#956f29"],
["#000","#8c7042","路考茶","#8c7042"],
["#fff","#7b6c3e","国防色","#7b6c3e"],
["#000","#d8a373","伽羅色","#d8a373"],
["#000","#cd8c5c","江戸茶","#cd8c5c"],
["#000","#cd5e3c","樺色","#cd5e3c"],
["#000","#cb8347","紅鬱金","#cb8347"],
["#000","#c37854","土器色","#c37854"],
["#000","#c38743","狐色","#c38743"],
["#000","#c39143","黄土色","#c39143"],
["#000","#bf783a","琥珀色","#bf783a"],
["#fff","#bb5535","赤茶","#bb5535"],
["#fff","#bb5520","代赭","#bb5520"],
["#fff","#b55233","煉瓦色","#b55233"],
["#fff","#aa4f37","雀茶","#aa4f37"],
["#fff","#9f563a","団十郎茶","#9f563a"],
["#fff","#9f563a","柿渋色","#9f563a"],
["#fff","#9a493f","紅鳶","#9a493f"],
["#fff","#98623c","灰茶","#98623c"],
["#fff","#965042","茶色","#965042"],
["#fff","#965036","檜皮色","#965036"],
["#fff","#95483f","鳶色","#95483f"],
["#fff","#954e2a","柿茶","#954e2a"],
["#fff","#8f2e14","弁柄色","#8f2e14"],
["#fff","#8a3319","赤錆色","#8a3319"],
["#fff","#8a3b00","褐色","#8a3b00"],
["#fff","#852e19","栗梅","#852e19"],
["#fff","#7b4741","紅檜皮","#7b4741"],
["#fff","#773c30","海老茶","#773c30"],
["#fff","#783c1d","唐茶","#783c1d"],
["#fff","#762f07","栗色","#762f07"],
["#fff","#752100","赤銅色","#752100"],
["#fff","#6c3524","錆色","#6c3524"],
["#fff","#683f36","赤褐色","#683f36"],
["#fff","#664032","茶褐色","#664032"],
["#fff","#6d3c32","栗皮茶","#6d3c32"],
["#fff","#583822","黒茶","#583822"],
["#fff","#6c2c2f","葡萄茶","#6c2c2f"],
["#fff","#640125","葡萄色","#640125"],
["#000","#f8b862","萱草色","#f8b862"],
["#000","#f6ad49","柑子色","#f6ad49"],
["#000","#f39800","金茶","#f39800"],
["#000","#f08300","蜜柑色","#f08300"],
["#000","#ec6d51","鉛丹色","#ec6d51"],
["#000","#ee7948","黄丹","#ee7948"],
["#000","#ed6d3d","柿色","#ed6d3d"],
["#000","#ec6800","黄赤","#ec6800"],
["#000","#ec6800","人参色","#ec6800"],
["#000","#ee7800","橙色","#ee7800"],
["#000","#eb6238","照柿","#eb6238"],
["#000","#ea5506","赤橙","#ea5506"],
["#000","#ea5506","金赤","#ea5506"],
["#000","#eb6101","朱色","#eb6101"],
["#000","#e49e61","小麦色","#e49e61"],
["#000","#e45e32","丹色","#e45e32"],
["#000","#e17b34","黄茶","#e17b34"],
["#000","#dd7a56","肉桂色","#dd7a56"],
["#000","#db8449","赤朽葉色","#db8449"],
["#000","#d66a35","黄櫨染","#d66a35"],
["#000","#ffd900","蒲公英色","#ffd900"],
["#000","#ffd900","黄色","#ffd900"],
["#000","#ffea00","中黄","#ffea00"],
["#000","#ffec47","菜の花色","#ffec47"],
["#000","#fef263","黄檗色","#fef263"],
["#000","#fcd575","卵色","#fcd575"],
["#000","#fbd26b","花葉色","#fbd26b"],
["#000","#f5e56b","刈安色","#f5e56b"],
["#000","#eec362","玉蜀黍色","#eec362"],
["#000","#ebd842","金糸雀色","#ebd842"],
["#000","#ffdb4f","黄支子色","#ffdb4f"],
["#000","#fbca4d","支子色","#fbca4d"],
["#000","#fcc800","向日葵色","#fcc800"],
["#000","#f8b500","山吹色","#f8b500"],
["#000","#fabf14","鬱金色","#fabf14"],
["#000","#f7c114","藤黄","#f7c114"],
["#000","#e6b422","金色","#e6b422"],
["#000","#fdeff2","薄桜","#fdeff2"],
["#000","#e9dfe5","桜鼠","#e9dfe5"],
["#000","#e4d2d8","鸨鼠","#e4d2d8"],
["#000","#f6bfbc","虹色","#f6bfbc"],
["#000","#f5b1aa","珊瑚色","#f5b1aa"],
["#000","#f5b199","一斤染","#f5b199"],
["#000","#efab93","宍色","#efab93"],
["#000","#f2a0a1","红梅色","#f2a0a1"],
["#000","#f0908d","薄红","#f0908d"],
["#000","#ee827c","甚三红","#ee827c"],
["#000","#f09199","桃色","#f09199"],
["#000","#f4b3c2","鸨色","#f4b3c2"],
["#000","#eebbcb","撫子色","#eebbcb"],
["#000","#e8d3c7","灰梅","#e8d3c7"],
["#000","#e8d3d1","灰桜","#e8d3d1"],
["#000","#e6cde3","淡红藤","#e6cde3"],
["#000","#e5abbe","石竹色","#e5abbe"],
["#000","#e597b2","薄红梅","#e597b2"],
["#000","#e198b4","桃花色","#e198b4"],
["#000","#e4ab9b","水柿","#e4ab9b"],
["#000","#e09e87","ときがら茶","#e09e87"],
["#000","#d69090","退红","#d69090"],
["#000","#d4acad","薄柿","#d4acad"],
["#000","#c97586","长春色","#c97586"],
["#000","#c099a0","梅鼠","#c099a0"],
["#000","#b88884","鸨浅葱","#b88884"],
["#000","#b48a76","梅染","#b48a76"],
["#000","#a86965","苏芳香","#a86965"],
["#000","#a25768","浅苏芳","#a25768"],
["#000","#ec6d71","真朱","#ec6d71"],
["#000","#eb6ea5","赤紫","#eb6ea5"],
["#000","#e95295","躑躅色","#e95295"],
["#000","#e7609e","牡丹色","#e7609e"],
["#000","#d0576b","今样色","#d0576b"],
["#000","#c85179","中红","#c85179"],
["#000","#e9546b","蔷薇色","#e9546b"],
["#000","#e95464","韩红","#e95464"],
["#000","#c85554","银朱","#c85554"],
["#000","#c53d43","赤红","#c53d43"],
["#000","#e83929","红緋","#e83929"],
["#000","#e60033","赤","#e60033"],
["#000","#e2041b","猩緋","#e2041b"],
["#000","#d7003a","红","#d7003a"],
["#000","#c9171e","深緋","#c9171e"],
["#000","#d3381c","绯色","#d3381c"],
["#000","#bf242a","桜色","#bf242a"],
["#fff","#ce5242","赤丹","#ce5242"],
["#fff","#d9333f","红赤","#d9333f"],
["#fff","#b94047","胭脂","#b94047"],
["#fff","#ba2636","朱緋","#ba2636"],
["#fff","#b7282e","茜色","#b7282e"],
["#fff","#a73836","深海老茶","#a73836"],
["#fff","#9e3d3f","苏芳","#9e3d3f"],
["#fff","#a22041","真红","#a22041"],
["#fff","#a22041","浓红","#a22041"],
["#000","#f8f4e6","象牙色","#f8f4e6"],
["#000","#ede4cd","练色","#ede4cd"],
["#000","#e9e4d4","灰白色","#e9e4d4"],
["#000","#ede1a9","蒸栗色","#ede1a9"],
["#000","#f2f2b0","女郎花","#f2f2b0"],
["#000","#e4dc8a","枯草色","#e4dc8a"],
["#000","#f8e58c","淡黄","#f8e58c"],
["#000","#ddbb99","白茶","#ddbb99"],
["#000","#d7a98c","赤白橡","#d7a98c"],
["#000","#f2c9ac","洗柿","#f2c9ac"],
["#000","#fff1cf","鸟の子色","#fff1cf"],
["#000","#fddea5","蜂蜜色","#fddea5"],
["#000","#fce2c4","肌色","#fce2c4"],
["#000","#fde8d0","薄卵色","#fde8d0"],
["#000","#f9c89b","雄黄","#f9c89b"],
["#000","#f7bd8f","洒落柿","#f7bd8f"],
["#000","#f6b894","赤香","#f6b894"],
["#000","#f4dda5","砥粉色","#f4dda5"],
["#000","#f1bf99","肉色","#f1bf99"],
["#000","#f1bf99","人色","#f1bf99"],
["#000","#efcd9a","丁子色","#efcd9a"],
["#000","#efcd9a","香色","#efcd9a"],
["#000","#f0cfa0","薄香","#f0cfa0"],
["#000","#edd3a1","浅黄","#edd3a1"],
["#000","#e0c38c","枯色","#e0c38c"],
["#000","#f3bf88","淡香","#f3bf88"],
["#000","#f7b977","杏色","#f7b977"],
["#000","#f19072","东云色","#f19072"],
["#000","#f19072","曙色","#f19072"],
["#000","#ee836f","珊瑚朱色","#ee836f"],
["#000","#eb9b6f","深支子","#eb9b6f"],
["#000","#e0815e","纁","#e0815e"],
["#000","#df7163","浅绯","#df7163"],
["#000","#d57c6b","真赭","#d57c6b"],
["#000","#d0826c","洗朱","#d0826c"],
["#000","#ca8269","遠州茶","#ca8269"],
["#000","#bb5548","红桦色","#bb5548"],
["#000","#ab6953","赭","#ab6953"]
];

  var grid = document.getElementById('tcGrid');
  var searchInput = document.getElementById('tcSearch');
  var statsEl = document.getElementById('tcStats');
  var emptyEl = document.getElementById('tcEmpty');
  var toastEl = document.getElementById('tcToast');

  function showToast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add('show');
    setTimeout(function() { toastEl.classList.remove('show'); }, 1500);
  }

  function renderColors(list) {
    grid.innerHTML = '';
    for (var i = 0; i < list.length; i++) {
      var c = list[i];
      var textColor = c[0], bgColor = c[1], name = c[2], hex = c[3];
      var card = document.createElement('div');
      card.className = 'tc-card';
      card.setAttribute('data-hex', hex);
      card.innerHTML =
        '<div class="tc-swatch" style="background:' + bgColor + ';color:' + textColor + '">' +
          '<span class="tc-swatch-hex">' + hex + '</span>' +
        '</div>' +
        '<div class="tc-info">' +
          '<p class="tc-name">' + name + '</p>' +
          '<div class="tc-hex-label">' + hex + '</div>' +
        '</div>';
      card.addEventListener('click', function() {
        var h = this.getAttribute('data-hex');
        if (navigator.clipboard) {
          navigator.clipboard.writeText(h).then(function() { showToast('已复制 ' + h); });
        } else {
          var ta = document.createElement('textarea');
          ta.value = h;
          document.body.appendChild(ta);
          ta.select();
          document.execCommand('copy');
          document.body.removeChild(ta);
          showToast('已复制 ' + h);
        }
      });
      grid.appendChild(card);
    }
    statsEl.textContent = list.length + ' / ' + COLORS.length + ' colors';
    emptyEl.style.display = list.length === 0 ? '' : 'none';
  }

  searchInput.addEventListener('input', function() {
    var q = this.value.toLowerCase().trim();
    if (!q) { renderColors(COLORS); return; }
    var filtered = COLORS.filter(function(c) {
      return c[2].toLowerCase().indexOf(q) !== -1 || c[3].toLowerCase().indexOf(q) !== -1;
    });
    renderColors(filtered);
  });

  renderColors(COLORS);
})();
</script>

HTML Body

HTML Foot

JS After HTML Body