HTML怎么做颜色系统设计_html网站颜色系统设计方法【小技巧】-html教程-PHP中文网

真正可维护的颜色系统需用css自定义属性组织，通过:root定义语义化变量（如--text-primary、--bg-surface），禁止硬编码颜色值，深色模式须整套重置变量，透明度优先用8位十六进制或hsla。

html怎么做颜色系统设计_html网站颜色系统设计方法【小技巧】

background-color 和 color 不是颜色系统，只是两个 CSS 属性。真正可维护的颜色系统，得靠 CSS 自定义属性（即 CSS 变量）来组织。

用 `:root` 定义统一色板

把所有主色、辅色、中性色集中声明在 :root 里，后续所有组件都复用这些变量，而不是散落各处写 #3498db 或 rgb(52, 152, 219)。

常见错误是只定义几个“主题色”，却漏掉语义化层级：比如 --text-primary、--text-secondary、--border-divider、--bg-surface 这类用途明确的变量，比 --blue-500 更易维护。

示例：

/* 推荐：按用途命名 */
:root {
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --bg-surface: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.04);
  --border-divider: #e0e0e0;
  --brand-primary: #3498db;
  --brand-success: #2ecc71;
  --brand-warning: #f39c12;
}

避免硬编码十六进制值在组件内部

一旦在某个 .button 的样式里直接写 background-color: #3498db;，就等于绕过了整个颜色系统——改主题时你得满项目搜 #3498db，还容易漏掉。

应该始终通过变量引用：

.button {
  background-color: var(--brand-primary);
  color: var(--text-on-primary, white); /* 提前约定 fallback */
}

注意两点：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

var() 支持第二个参数作为降级值，比如 var(--text-on-primary, white)，防止变量未定义时样式崩坏
别省略单位或括号——var(--spacing-md) 是合法的，但 var --spacing-md 会报错

支持深色模式时，`@media (prefers-color-scheme: dark)` 必须重置全部变量

很多人只改了 --bg-surface，结果 --text-primary 在深色背景下还是深灰，文字几乎看不见。

正确做法是整套变量覆盖，而非局部修补：

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --bg-surface: #2c3e50;
    --bg-overlay: rgba(255, 255, 255, 0.06);
    --border-divider: #34495e;
  }
}

关键点：