<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zhongguose - 传统颜色</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
body {
background-color: #f8f4ed;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
padding: 40px 0;
}
.logo {
font-size: 2.5em;
font-weight: bold;
color: #2b1216;
}
.subtitle {
font-size: 1.2em;
color: #5c2223;
margin-top: 10px;
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
padding: 20px 0;
}
.color-card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.color-swatch {
height: 150px;
background-color: #ddd; /* 需替换为实际颜色 */
}
.color-info {
padding: 20px;
text-align: center;
}
.color-name {
font-size: 1.1em;
font-weight: 500;
color: #2b1216;
margin-bottom: 5px;
}
.color-code {
font-size: 0.9em;
color: #666;
background-color: #f8f4ed;
padding: 4px 8px;
border-radius: 4px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">zhongguose</div>
<div class="subtitle">传统颜色</div>
<div class="english-subtitle">Chinese Colors</div>
</div>
<div class="color-grid">
<!-- 暗玉紫 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #5c2223;"></div>
<div class="color-info">
<div class="color-name">暗玉紫</div>
<div class="color-code">anyuzi</div>
<div class="hex-code">#5c2223</div>
</div>
</div>
<!-- 牡丹粉红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #eea2a4;"></div>
<div class="color-info">
<div class="color-name">牡丹粉红</div>
<div class="color-code">mudanfenhong</div>
<div class="hex-code">#eea2a4</div>
</div>
</div>
<!-- 栗紫 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #5a191b;"></div>
<div class="color-info">
<div class="color-name">栗紫</div>
<div class="color-code">lizi</div>
<div class="hex-code">#5a191b</div>
</div>
</div>
<!-- 香叶红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #f07c82;"></div>
<div class="color-info">
<div class="color-name">香叶红</div>
<div class="color-code">xiangyehong</div>
<div class="hex-code">#f07c82</div>
</div>
</div>
<!-- 葡萄酱紫 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #5a1216;"></div>
<div class="color-info">
<div class="color-name">葡萄酱紫</div>
<div class="color-code">putaojiangzi</div>
<div class="hex-code">#5a1216</div>
</div>
</div>
<!-- 艳红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #ed5a65;"></div>
<div class="color-info">
<div class="color-name">艳红</div>
<div class="color-code">yanhong</div>
<div class="hex-code">#ed5a65</div>
</div>
</div>
<!-- 玉红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #c04851;"></div>
<div class="color-info">
<div class="color-name">玉红</div>
<div class="color-code">yuhong</div>
<div class="hex-code">#c04851</div>
</div>
</div>
<!-- 茶花红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #ee3f4d;"></div>
<div class="color-info">
<div class="color-name">茶花红</div>
<div class="color-code">chahuahong</div>
<div class="hex-code">#ee3f4d</div>
</div>
</div>
<!-- 高粱红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #c02c38;"></div>
<div class="color-info">
<div class="color-name">高粱红</div>
<div class="color-code">gaolianghong</div>
<div class="hex-code">#c02c38</div>
</div>
</div>
<!-- 满江红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #a7535a;"></div>
<div class="color-info">
<div class="color-name">满江红</div>
<div class="color-code">manjianghong</div>
<div class="hex-code">#a7535a</div>
</div>
</div>
<!-- 鼠鼻红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #e3b4b8;"></div>
<div class="color-info">
<div class="color-name">鼠鼻红</div>
<div class="color-code">shubihong</div>
<div class="hex-code">#e3b4b8</div>
</div>
</div>
<!-- 合欢红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #f0a1a8;"></div>
<div class="color-info">
<div class="color-name">合欢红</div>
<div class="color-code">hehuanhong</div>
<div class="hex-code">#f0a1a8</div>
</div>
</div>
<!-- 春梅红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #f1939c;"></div>
<div class="color-info">
<div class="color-name">春梅红</div>
<div class="color-code">chunmeihong</div>
<div class="hex-code">#f1939c</div>
</div>
</div>
<!-- 苋菜红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #a61b29;"></div>
<div class="color-info">
<div class="color-name">苋菜红</div>
<div class="color-code">xiancaihong</div>
<div class="hex-code">#a61b29</div>
</div>
</div>
<!-- 烟红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #894e54;"></div>
<div class="color-info">
<div class="color-name">烟红</div>
<div class="color-code">yanhong</div>
<div class="hex-code">#894e54</div>
</div>
</div>
<!-- 莓红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #c45a65;"></div>
<div class="color-info">
<div class="color-name">莓红</div>
<div class="color-code">meihong</div>
<div class="hex-code">#c45a65</div>
</div>
</div>
<!-- 鹅冠红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #d11a2d;"></div>
<div class="color-info">
<div class="color-name">鹅冠红</div>
<div class="color-code">eguanhong</div>
<div class="hex-code">#d11a2d</div>
</div>
</div>
<!-- 枫叶红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #c21f30;"></div>
<div class="color-info">
<div class="color-name">枫叶红</div>
<div class="color-code">fengyehong</div>
<div class="hex-code">#c21f30</div>
</div>
</div>
<!-- 唐菖蒲红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #de1c31;"></div>
<div class="color-info">
<div class="color-name">唐菖蒲红</div>
<div class="color-code">tangchangpuhong</div>
<div class="hex-code">#de1c31</div>
</div>
</div>
<!-- 枣红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #7c1823;"></div>
<div class="color-info">
<div class="color-name">枣红</div>
<div class="color-code">zaohong</div>
<div class="hex-code">#7c1823</div>
</div>
</div>
<!-- 猪肝紫 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #541e24;"></div>
<div class="color-info">
<div class="color-name">猪肝紫</div>
<div class="color-code">zhuganzi</div>
<div class="hex-code">#541e24</div>
</div>
</div>
<!-- 葡萄紫 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #4c1f24;"></div>
<div class="color-info">
<div class="color-name">葡萄紫</div>
<div class="color-code">putaozi</div>
<div class="hex-code">#4c1f24</div>
</div>
</div>
<!-- 暗紫苑红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #82202b;"></div>
<div class="color-info">
<div class="color-name">暗紫苑红</div>
<div class="color-code">anziyuanhong</div>
<div class="hex-code">#82202b</div>
</div>
</div>
<!-- 殷红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #82111f;"></div>
<div class="color-info">
<div class="color-name">殷红</div>
<div class="color-code">yanhong</div>
<div class="hex-code">#82111f</div>
</div>
</div>
<!-- 草茉莉红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #ef475d;"></div>
<div class="color-info">
<div class="color-name">草茉莉红</div>
<div class="color-code">caomolihong</div>
<div class="hex-code">#ef475d</div>
</div>
</div>
<!-- 酱紫 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #4d1018;"></div>
<div class="color-info">
<div class="color-name">酱紫</div>
<div class="color-code">jiangzi</div>
<div class="hex-code">#4d1018</div>
</div>
</div>
<!-- 山茶红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #ed556a;"></div>
<div class="color-info">
<div class="color-name">山茶红</div>
<div class="color-code">shanchahong</div>
<div class="hex-code">#ed556a</div>
</div>
</div>
<!-- 锌灰 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #7a7374;"></div>
<div class="color-info">
<div class="color-name">锌灰</div>
<div class="color-code">xinhui</div>
<div class="hex-code">#7a7374</div>
</div>
</div>
<!-- 海棠红 -->
<div class="color-card">
<div class="color-swatch" style="background-color: #f03752;"></div>
<div class="color-info">
<div class="color-name">海棠红</div>
<div class="color-code">haitanghong</div>
<div class="hex-code">#f03752</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
index.html