Files
2026-07-20 11:12:29 +08:00

530 lines
26 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover">
<title>中国传统色彩 - 移动端适配版</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 12px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 32px 20px;
text-align: center;
}
.header h1 {
font-size: 1.9rem;
margin-bottom: 8px;
font-weight: 500;
letter-spacing: -0.3px;
}
.header p {
font-size: 0.9rem;
opacity: 0.9;
}
/* 移动端选项卡优化 */
.tabs {
display: flex;
background: #f8f9fa;
border-bottom: 2px solid #e9ecef;
position: sticky;
top: 0;
z-index: 10;
background: white;
}
.tab {
flex: 1;
padding: 14px 8px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.95rem;
font-weight: 500;
color: #6c757d;
border: none;
background: none;
position: relative;
white-space: nowrap;
}
.tab.active {
color: #667eea;
font-weight: 600;
}
.tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 3px 3px 0 0;
}
.tab-content {
display: none;
padding: 20px 16px;
}
.tab-content.active {
display: block;
animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* 移动端:色彩网格改为2列布局,卡片更易点击 */
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
/* 针对小屏手机强制2列 */
@media (max-width: 480px) {
.color-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.header h1 {
font-size: 1.6rem;
}
.tab {
font-size: 0.85rem;
padding: 12px 4px;
}
}
/* 中等屏幕自动调整 */
@media (min-width: 481px) and (max-width: 768px) {
.color-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 769px) {
.color-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.color-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.color-card:active {
transform: scale(0.97);
transition: 0.05s;
}
.color-swatch {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 500;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
background-size: cover;
}
.color-info {
padding: 10px;
}
.color-name {
font-size: 0.85rem;
font-weight: 500;
color: #1e293b;
margin-bottom: 4px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.color-code {
font-size: 0.7rem;
color: #6c757d;
font-family: monospace;
}
/* Toast 提示优化 - 移动端居中底部 */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #1e293b;
color: white;
padding: 12px 24px;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 500;
opacity: 0;
transition: all 0.25s ease;
z-index: 1000;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
background: rgba(0, 0, 0, 0.85);
white-space: nowrap;
pointer-events: none;
}
@media (max-width: 480px) {
.toast {
white-space: normal;
max-width: 80%;
text-align: center;
padding: 10px 18px;
font-size: 0.85rem;
}
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 配色方案区域 - 移动端卡片布局优化 */
#palettes-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
@media (max-width: 640px) {
#palettes-container {
grid-template-columns: 1fr;
gap: 18px;
}
}
.palette-section {
margin-bottom: 0;
background: #fefefe;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: 0.2s;
}
.palette-title {
font-size: 0.95rem;
font-weight: 600;
color: #334155;
margin: 0;
padding: 12px 16px 8px 16px;
background: #fafcff;
border-bottom: 1px solid #eef2f6;
}
.color-palette {
display: flex;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 0 0 16px 16px;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.color-palette:active {
transform: scale(0.98);
}
.palette-color {
flex: 1;
min-width: 0; /* 防止flex溢出 */
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.7rem;
font-weight: 500;
transition: 0.1s;
}
/* 移动端让颜色代码折行更友好 */
.palette-color span:first-child {
font-size: 0.7rem;
font-family: monospace;
background: rgba(0,0,0,0.3);
padding: 2px 6px;
border-radius: 30px;
backdrop-filter: blur(2px);
}
.palette-color span:last-child {
font-size: 0.6rem;
opacity: 0.9;
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 20px;
}
/* 说明文字区域移动端优化 */
.palettes-desc {
background: #f1f5f9;
margin: 0 16px 16px 16px;
padding: 12px 14px;
border-radius: 20px;
font-size: 0.8rem;
color: #475569;
line-height: 1.4;
}
.palettes-desc strong {
color: #667eea;
}
/* 增加触摸反馈 */
.color-card, .color-palette {
cursor: pointer;
}
/* 滚动条隐藏但保持功能 (移动端美观) */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 中国传统色彩</h1>
<p>轻触颜色块,复制色值</p>
</div>
<div class="tabs">
<button class="tab active" data-tab="traditional">中国传统色</button>
<button class="tab" data-tab="chinese">中文色彩</button>
<button class="tab" data-tab="palettes">色彩搭配</button>
</div>
<div class="tab-content active" id="traditional">
<div class="color-grid" id="traditional-grid"></div>
</div>
<div class="tab-content" id="chinese">
<div class="color-grid" id="chinese-grid"></div>
</div>
<div class="tab-content" id="palettes">
<div class="palettes-desc">
💡 <strong>主色</strong>(第一色)品牌核心色 · <strong>辅助色</strong>(第二色)点缀强调 · <strong>中性色</strong>(第三色)文字/背景<br>
✨ 点击配色块,一键复制整套色彩代码(三个色值)。
</div>
<div id="palettes-container"></div>
</div>
</div>
<div class="toast" id="toast">🎨 颜色代码已复制</div>
<script>
// 原始数据保持不变(完全未修改接口/功能)
const traditionalColors = [
{ name: '蔚蓝', hex: '#70f3ff' }, { name: '蓝', hex: '#44cef6' }, { name: '碧蓝', hex: '#3eede7' }, { name: '石青', hex: '#1685a9' }, { name: '靛青', hex: '#177cb0' },
{ name: '靛蓝', hex: '#065279' }, { name: '花青', hex: '#003472' }, { name: '宝蓝', hex: '#4b5cc4' }, { name: '蓝灰色', hex: '#a1afc9' }, { name: '藏青', hex: '#2e4e7e' },
{ name: '藏蓝', hex: '#3b2e7e' }, { name: '黛', hex: '#4a4266' }, { name: '黛绿', hex: '#426666' }, { name: '黛蓝', hex: '#425066' }, { name: '黛紫', hex: '#574266' },
{ name: '紫色', hex: '#8d4bbb' }, { name: '紫酱', hex: '#815463' }, { name: '酱紫', hex: '#815476' }, { name: '紫檀', hex: '#4c221b' }, { name: '绀青', hex: '#003371' },
{ name: '紫棠', hex: '#56004f' }, { name: '青莲', hex: '#801dae' }, { name: '群青', hex: '#4c8dae' }, { name: '雪青', hex: '#b0a4e3' }, { name: '丁香色', hex: '#cca4e3' },
{ name: '藕色', hex: '#edd1d8' }, { name: '藕荷色', hex: '#e4c6d0' }, { name: '朱砂', hex: '#ff461f' }, { name: '火红', hex: '#ff2d51' }, { name: '朱膘', hex: '#f36838' },
{ name: '妃色', hex: '#ed5736' }, { name: '洋红', hex: '#ff4777' }, { name: '品红', hex: '#f00056' }, { name: '粉红', hex: '#ffb3a7' }, { name: '桃红', hex: '#f47983' },
{ name: '海棠红', hex: '#db5a6b' }, { name: '樱桃色', hex: '#c93756' }, { name: '酡颜', hex: '#f9906f' }, { name: '银红', hex: '#f05654' }, { name: '大红', hex: '#ff2121' },
{ name: '石榴红', hex: '#f20c00' }, { name: '绛紫', hex: '#8c4356' }, { name: '绯红', hex: '#c83c23' }, { name: '胭脂', hex: '#9d2933' }, { name: '朱红', hex: '#ff4c00' },
{ name: '丹', hex: '#ff4e20' }, { name: '彤', hex: '#f35336' }, { name: '酡红', hex: '#dc3023' }, { name: '炎', hex: '#ff3300' }, { name: '茜色', hex: '#cb3a56' },
{ name: '绾', hex: '#a98175' }, { name: '檀', hex: '#b36d61' }, { name: '嫣红', hex: '#ef7a82' }, { name: '枣红', hex: '#c32136' }, { name: '殷红', hex: '#be002f' },
{ name: '赫赤', hex: '#c91f37' }, { name: '银朱', hex: '#bf242a' }, { name: '赤', hex: '#c3272b' }, { name: '栗色', hex: '#60281e' }, { name: '玄色', hex: '#622a1d' },
{ name: '松花色', hex: '#bce672' }, { name: '柳黄', hex: '#c9dd22' }, { name: '嫩绿', hex: '#bddd22' }, { name: '柳绿', hex: '#afdd22' }, { name: '葱黄', hex: '#a3d900' },
{ name: '葱绿', hex: '#9ed900' }, { name: '豆绿', hex: '#9ed048' }, { name: '豆青', hex: '#96ce54' }, { name: '油绿', hex: '#00bc12' }, { name: '葱倩', hex: '#0eb83a' },
{ name: '葱青', hex: '#0eb83a' }, { name: '青葱', hex: '#0aa344' }, { name: '石绿', hex: '#16a951' }, { name: '松柏绿', hex: '#21a675' }, { name: '松花绿', hex: '#057748' },
{ name: '绿沈', hex: '#0c8918' }, { name: '绿色', hex: '#00e500' }, { name: '草绿', hex: '#40de5a' }, { name: '青翠', hex: '#00e079' }, { name: '青色', hex: '#00e09e' },
{ name: '翡翠色', hex: '#3de1ad' }, { name: '碧绿', hex: '#2add9c' }, { name: '玉色', hex: '#2edfa3' }, { name: '缥', hex: '#7fecad' }, { name: '艾绿', hex: '#a4e2c6' },
{ name: '碧色', hex: '#1bd1a5' }, { name: '青碧', hex: '#48c0a3' }, { name: '铜绿', hex: '#549688' }, { name: '竹青', hex: '#789262' }, { name: '墨灰', hex: '#758a99' },
{ name: '墨色', hex: '#50616d' }, { name: '鸦青', hex: '#424c50' }, { name: '黯', hex: '#41555d' }, { name: '樱草色', hex: '#eaff56' }, { name: '鹅黄', hex: '#fff143' },
{ name: '鸭黄', hex: '#faff72' }, { name: '杏黄', hex: '#ffa631' }, { name: '橙黄', hex: '#ffa400' }, { name: '橙色', hex: '#fa8c35' }, { name: '杏红', hex: '#ff8c31' },
{ name: '橘黄', hex: '#ff8936' }, { name: '橘红', hex: '#ff7500' }, { name: '藤黄', hex: '#ffb61e' }, { name: '姜黄', hex: '#ffc773' }, { name: '雌黄', hex: '#ffc64b' },
{ name: '赤金', hex: '#f2be45' }, { name: '缃色', hex: '#f0c239' }, { name: '雄黄', hex: '#e9bb1d' }, { name: '秋香色', hex: '#d9b611' }, { name: '金色', hex: '#eacd76' },
{ name: '牙色', hex: '#eedeb0' }, { name: '枯黄', hex: '#d3b17d' }, { name: '黄栌', hex: '#e29c45' }, { name: '乌金', hex: '#a78e44' }, { name: '昏黄', hex: '#c89b40' },
{ name: '棕黄', hex: '#ae7000' }, { name: '琥珀', hex: '#ca6924' }, { name: '棕色', hex: '#b25d25' }, { name: '茶色', hex: '#b35c44' }, { name: '棕红', hex: '#9b4400' },
{ name: '赭', hex: '#9c5333' }, { name: '驼色', hex: '#a88462' }, { name: '秋色', hex: '#896c39' }, { name: '棕绿', hex: '#827100' }, { name: '褐色', hex: '#6e511e' },
{ name: '棕黑', hex: '#7c4b00' }, { name: '赭色', hex: '#955539' }, { name: '赭石', hex: '#845a33' }, { name: '精白', hex: '#ffffff' }, { name: '银白', hex: '#e9e7ef' },
{ name: '铅白', hex: '#f0f0f4' }, { name: '霜色', hex: '#e9f1f6' }, { name: '雪白', hex: '#f0fcff' }, { name: '莹白', hex: '#e3f9fd' }, { name: '月白', hex: '#d6ecf0' },
{ name: '象牙白', hex: '#fffbf0' }, { name: '缟', hex: '#f2ecde' }, { name: '鱼肚白', hex: '#fcefe8' }, { name: '白粉', hex: '#fff2df' }, { name: '荼白', hex: '#f3f9f1' },
{ name: '鸭卵青', hex: '#e0eee8' }, { name: '素', hex: '#e0f0e9' }, { name: '青白', hex: '#c0ebd7' }, { name: '蟹壳青', hex: '#bbcdc5' }, { name: '花白', hex: '#c2ccd0' },
{ name: '老银', hex: '#bacac6' }, { name: '灰色', hex: '#808080' }, { name: '苍色', hex: '#75878a' }, { name: '水色', hex: '#88ada6' }, { name: '黝', hex: '#6b6882' },
{ name: '乌色', hex: '#725e82' }, { name: '玄青', hex: '#3d3b4f' }, { name: '乌黑', hex: '#392f41' }, { name: '黎', hex: '#75664d' }, { name: '黧', hex: '#5d513c' },
{ name: '黝黑', hex: '#665757' }, { name: '缁色', hex: '#493131' }, { name: '煤黑', hex: '#312520' }, { name: '漆黑', hex: '#161823' }, { name: '黑色', hex: '#000000' }
];
const chineseColors = [
{ name: '鸨色', hex: '#f7acbc' }, { name: '踯躅色', hex: '#ef5b9c' }, { name: '桜色', hex: '#feeeed' }, { name: '蔷薇色', hex: '#f05b72' }, { name: '韩红', hex: '#f15b6c' },
{ name: '珊瑚色', hex: '#f8aba6' }, { name: '红梅色', hex: '#f69c9f' }, { name: '桃色', hex: '#f58f98' }, { name: '薄柿', hex: '#ca8687' }, { name: '薄红梅', hex: '#f391a9' },
{ name: '曙色', hex: '#bd6758' }, { name: '红色', hex: '#d71345' }, { name: '赤丹', hex: '#d64f44' }, { name: '红赤', hex: '#d93a49' }, { name: '臙脂色', hex: '#b3424a' },
{ name: '真赭', hex: '#c76968' }, { name: '今様色', hex: '#bb505d' }, { name: '梅染', hex: '#987165' }, { name: '退红色', hex: '#ac6767' }, { name: '苏芳', hex: '#973c3f' },
{ name: '茜色', hex: '#b22c46' }, { name: '红', hex: '#a7324a' }, { name: '银朱', hex: '#aa363d' }, { name: '赤', hex: '#ed1941' }, { name: '朱色', hex: '#f26522' },
{ name: '洗朱', hex: '#d2553d' }, { name: '红桦色', hex: '#b4534b' }, { name: '红绯', hex: '#ef4136' }, { name: '桦色', hex: '#c63c26' }, { name: '铅丹色', hex: '#f3715c' },
{ name: '赭', hex: '#a7573b' }, { name: '绯色', hex: '#aa2116' }, { name: '丹', hex: '#b64533' }, { name: '土', hex: '#b54334' }, { name: '焦香', hex: '#853f04' },
{ name: '真红', hex: '#840228' }, { name: '绯', hex: '#7a1723' }, { name: '红海老茶', hex: '#a03939' }, { name: '浅苏芳', hex: '#8a2e3b' }, { name: '鸢色', hex: '#8e453f' },
{ name: '小豆色', hex: '#8f4b4a' }, { name: '弁柄色', hex: '#892f1b' }, { name: '栗梅', hex: '#6b2c25' }, { name: '海老茶', hex: '#733a31' }, { name: '深绯', hex: '#54211d' },
{ name: '赤铜色', hex: '#78331e' }, { name: '赤褐色', hex: '#53261f' }, { name: '金赤', hex: '#f15a22' }, { name: '赤茶', hex: '#b4533c' }, { name: '赤锖色', hex: '#84331f' },
{ name: '黄丹', hex: '#f47a55' }, { name: '赤橙', hex: '#f15a22' }, { name: '柿色', hex: '#f3704b' }, { name: '肉桂色', hex: '#da765b' }, { name: '炼瓦色', hex: '#ae5039' },
{ name: '锖色', hex: '#6a3427' }, { name: '桧皮色', hex: '#8f4b38' }, { name: '栗色', hex: '#8e3e1f' }, { name: '黄赤', hex: '#f36c21' }, { name: '代赭', hex: '#b4532a' },
{ name: '骆驼色', hex: '#b7704f' }, { name: '黄茶', hex: '#de773f' }, { name: '洗柿', hex: '#c99979' }, { name: '赤白橡', hex: '#deab8a' }, { name: '肌色', hex: '#fedcbd' },
{ name: '橙色', hex: '#f47920' }, { name: '灰茶', hex: '#905a3d' }, { name: '茶色', hex: '#8f4b2e' }, { name: '桦茶色', hex: '#87481f' }, { name: '枯茶', hex: '#5f3c23' },
{ name: '焦茶', hex: '#6b473c' }, { name: '柑子色', hex: '#faa755' }, { name: '杏色', hex: '#fab27b' }, { name: '蜜柑色', hex: '#f58220' }, { name: '褐色', hex: '#843900' },
{ name: '路考茶', hex: '#905d1d' }, { name: '饴色', hex: '#8a5d19' }, { name: '丁子色', hex: '#8c531b' }, { name: '丁子茶', hex: '#826858' }, { name: '黄栌', hex: '#64492b' },
{ name: '土器色', hex: '#ae6642' }, { name: '黄枯茶', hex: '#56452d' }, { name: '狐色', hex: '#96582a' }, { name: '黄橡', hex: '#705628' }, { name: '银煤竹', hex: '#4a3113' },
{ name: '涅色', hex: '#412f1f' }, { name: '胡桃色', hex: '#845538' }, { name: '香色', hex: '#8e7437' }, { name: '国防色', hex: '#69541b' }, { name: '练色', hex: '#d5c59f' },
{ name: '肉色', hex: '#cd9a5b' }, { name: '人色', hex: '#cd9a5b' }, { name: '土色', hex: '#b36d41' }, { name: '小麦色', hex: '#df9464' }, { name: '琥珀色', hex: '#b76f40' },
{ name: '木兰色', hex: '#ad8b3d' }, { name: '栀子色', hex: '#dea32c' }, { name: '朽叶', hex: '#d1923f' }, { name: '萱草色', hex: '#c88400' }, { name: '黄金', hex: '#c37e00' },
{ name: '金色', hex: '#c37e00' }, { name: '金茶', hex: '#e0861a' }, { name: '卵色', hex: '#ffce7b' }, { name: '山吹色', hex: '#fcaf17' }, { name: '黄土色', hex: '#ba8448' },
{ name: '朽叶色', hex: '#896a45' }, { name: '空五倍子色', hex: '#76624c' }, { name: '莺茶', hex: '#6d5826' }, { name: '向日葵色', hex: '#ffc20e' }, { name: '郁金色', hex: '#fdb933' },
{ name: '砂色', hex: '#d3c6a6' }, { name: '芥子色', hex: '#c7a252' }, { name: '淡黄', hex: '#dec674' }, { name: '亜麻色', hex: '#b69968' }, { name: '枯色', hex: '#c1a173' }
];
const palettes = [
{ title: '清新自然', colors: ['#FFFFCC', '#CCFFFF', '#FFCCCC'] }, { title: '雅致灰调', colors: ['#99CCCC', '#FFCC99', '#FFCCCC'] }, { title: '粉紫梦境', colors: ['#FF9999', '#996699', '#FFCCCC'] },
{ title: '大地色系', colors: ['#CC9999', '#FFFFCC', '#CCCC99'] }, { title: '柔和暖阳', colors: ['#FFCCCC', '#FFFF99', '#CCCCFF'] }, { title: '海蓝印象', colors: ['#0099CC', '#CCCCCC', '#FF6666'] },
{ title: '珊瑚橘粉', colors: ['#FF9966', '#FF6666', '#FFCCCC'] }, { title: '木质复古', colors: ['#CC9966', '#666666', '#CC9999'] }, { title: '翠绿春意', colors: ['#FF6666', '#FFFF66', '#99CC66'] },
{ title: '深海静寂', colors: ['#CC3333', '#CCCCCC', '#003366'] }, { title: '紫罗兰夜', colors: ['#993333', '#CCCC00', '#663366'] }, { title: '燕麦拿铁', colors: ['#CCCC99', '#666666', '#CC9999'] },
{ title: '柠檬水岸', colors: ['#FF6666', '#FFFF00', '#0066CC'] }, { title: '红黑经典', colors: ['#CC0033', '#333333', '#CCCC00'] }, { title: '森林与酒', colors: ['#336633', '#990033', '#FFCC99'] }
];
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = msg || '🎨 颜色代码已复制';
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 1800);
}
function copyToClipboard(text, customMsg) {
navigator.clipboard.writeText(text).then(() => {
showToast(customMsg || `✅ 已复制: ${text}`);
}).catch(() => {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showToast(customMsg || `📋 已复制: ${text}`);
});
}
function getContrastColor(hex) {
let r = parseInt(hex.slice(1, 3), 16);
let g = parseInt(hex.slice(3, 5), 16);
let b = parseInt(hex.slice(5, 7), 16);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 128 ? '#1e1e2f' : '#ffffff';
}
function createColorCard(color) {
const card = document.createElement('div');
card.className = 'color-card';
card.onclick = () => copyToClipboard(color.hex, `🎨 ${color.name} → ${color.hex}`);
const textColor = getContrastColor(color.hex);
card.innerHTML = `
<div class="color-swatch" style="background: ${color.hex}; color: ${textColor};">${color.hex}</div>
<div class="color-info">
<div class="color-name">${color.name}</div>
<div class="color-code">${color.hex}</div>
</div>
`;
return card;
}
function createPalette(palette) {
const section = document.createElement('div');
section.className = 'palette-section';
const title = document.createElement('div');
title.className = 'palette-title';
title.textContent = palette.title;
const paletteDiv = document.createElement('div');
paletteDiv.className = 'color-palette';
paletteDiv.onclick = () => {
const allCodes = palette.colors.join(' ');
copyToClipboard(allCodes, `🎨 配色方案「${palette.title}」已复制: ${allCodes}`);
};
const roles = ['主色', '辅色', '中性'];
palette.colors.forEach((color, idx) => {
const colorDiv = document.createElement('div');
colorDiv.className = 'palette-color';
colorDiv.style.background = color;
colorDiv.style.color = getContrastColor(color);
const codeSpan = document.createElement('span');
codeSpan.textContent = color;
const roleSpan = document.createElement('span');
roleSpan.textContent = roles[idx] || '';
colorDiv.appendChild(codeSpan);
colorDiv.appendChild(roleSpan);
paletteDiv.appendChild(colorDiv);
});
section.appendChild(title);
section.appendChild(paletteDiv);
return section;
}
function init() {
const traditionalGrid = document.getElementById('traditional-grid');
traditionalColors.forEach(c => traditionalGrid.appendChild(createColorCard(c)));
const chineseGrid = document.getElementById('chinese-grid');
chineseColors.forEach(c => chineseGrid.appendChild(createColorCard(c)));
const palettesContainer = document.getElementById('palettes-container');
palettes.forEach(p => palettesContainer.appendChild(createPalette(p)));
}
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
tab.classList.add('active');
const tabId = tab.dataset.tab;
document.getElementById(tabId).classList.add('active');
});
});
init();
</script>
</body>
</html>