中国风配色需用CSS精准控制，主色推荐#9E3D2D（朱砂）、#D4B683（秋香）、#2C3E3F（石青）、#C19A6B（檀色），须语义化命名、集中管理、注重对比度与留白节奏。
HTML 本身不决定配色，真正起作用的是 CSS 中的 color、background-color 等属性；所谓“中国风配色”，本质是用 CSS 选对一组符合传统东方审美的颜色值，并合理应用在结构上。
哪些 HEX 色值算真正可用的中国风主色
别直接搜“中国红”就抄 #FF0000——太艳、太西式，缺乏绢本或矿物颜料的沉着感。实际古画与器物中常见的是：
-
#9E3D2D（朱砂偏褐，适合标题/按钮，耐看不刺眼） -
#D4B683（秋香色，仿宣纸底色或竹简质感，适合背景） -
#2C3E3F（石青深灰，比纯黑柔和，适合正文文字） -
#C19A6B（檀色，用于边框、分割线，带暖调但不甜腻） - 慎用
#E63946或#FF6B6B：这是现代设计里的“番茄红”，宋代《营造法式》彩画谱里没有这种饱和度。
怎么用 CSS 把这些颜色自然地铺进 HTML 结构
光有颜色不够，得匹配语义和层级。比如 <h1> 用朱砂色可以，但 <p> 全部套上去会像海报，不是网页。
- 标题（
<h1>~<h3>）用#9E3D2D，字号略大但避免加粗过度——宋体/思源宋体更贴合气质 - 正文（
<p>、<li>）用#2C3E3F，行高设为1.7模拟册页疏朗感 - 背景统一用
#D4B683，再叠一层opacity: 0.03的水墨纹理图（background-image: url(ink-bg.png)），比纯色更有厚度 - 链接（
<a>）默认用#C19A6B，:hover可加下划线但不用变色——古人题跋也不突兀跳色
为什么 inline-style 或随意 class 命名会破坏中国风效果
配色崩坏往往不是颜色选错，而是应用失控。比如写成 <div style="color:#9E3D2D;background:#D4B683">，后续维护时极易被覆盖或重复定义。
立即学习“前端免费学习笔记（深入）”；
- 推荐用语义化类名：
class="title-vermilion"、class="text-inkstone"，而非class="red-text"——后者下次换色时还得改 HTML - 避免在多个地方重复写
color: #9E3D2D，应集中到 CSS 文件的 :root 或单独 palette 部分，方便全局调整 - 如果用了 Tailwind，别用
text-red-600，而是自定义text-vermilion并映射到#9E3D2D，否则主题无法沉淀 - 注意 contrast ratio：用
#2C3E3F文字配#D4B683背景，AA 级可读性刚好达标（4.6:1），再浅就过不了无障碍检测
最易被忽略的其实是「留白节奏」——中国风不是堆颜色，是靠色块面积、间距、字体粗细共同呼吸。一个 <hr> 用 #C19A6B 细线 + 上下 2rem 空隙，有时比加个烫金 div 更有味道。
