没有“万能配色”，但有可复用的协调逻辑：主色定调性，辅色控节奏，强调色引动线，所有颜色须经对比度校验、语义化命名与集中管理。

直接说结论：没有“万能配色”，但有可复用的协调逻辑——主色定调性，辅色控节奏，强调色引动线，所有颜色必须通过对比度校验、语义化命名和集中管理才能真正协调。

怎么选主色才不翻车

主色不是挑你最喜欢的那个，而是挑最能承载页面功能与情绪的那个。比如企业官网常用深蓝#007BFF，不是因为它“好看”，而是它在多数设备上灰阶稳定、文字叠加可读性强、且用户心智中已绑定“专业/可信”信号。

• 避开纯黑#000000和纯白#FFFFFF做主背景或主文字——它们对比过强，长时间阅读易疲劳；改用深灰#2C3E3F或米白#F5F5DC
• 中国风模板慎用#FF0000（标准红），它饱和度过高、缺乏传统颜料质感；换成#9E3D2D（朱砂褐）更耐看
• 绿色植物类主题别只盯#00FF00，草绿#2E8B57带灰度，和米白#F5F5DC、深棕#8B4513搭在一起才显自然

CSS变量怎么管颜色才不乱

把颜色硬写进每个color或background-color里，等于埋雷。一旦要换品牌色，得全局搜索替换，极易漏掉或误改。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 统一在:root里定义：

  :root {
    --primary: #007BFF;
    --text: #2C3E3F;
    --bg: #F5F5DC;
    --border: #D4B683;
  }

• 所有组件用变量，不用具体值：color: var(--text);、background-color: var(--bg);
• 变量名必须语义化，禁用--blue1、--light-bg这类模糊命名；--primary代表品牌主色，--text代表正文文字，--surface代表卡片背景——名称即用途

为什么加了opacity还是显得廉价

很多人想让背景“柔和一点”，就给div加opacity: 0.95，结果整页发灰、层次塌陷。透明度是作用于整个元素及其子树的，不是调色。

• 真要弱化背景，用background-color: rgba(245, 245, 220, 0.95);——只影响背景层，文字保持100%不透明
• 想加纹理感，用background-image叠一层极淡水墨图：background-image: url(ink-bg.png); background-opacity: 0.03;（注意：CSS无background-opacity，需用rgba()或伪元素模拟）
• 链接a hover时别只改color，加text-decoration: underline比变色更克制，也更符合中国风“不抢戏”的节奏

最容易被忽略的一点：配色协调与否，80%取决于应用层级是否清晰。标题用--primary，正文用--text，卡片背景用--surface，三者之间明度差必须≥30，否则视觉会糊成一片。别指望调几个色值就万事大吉，得让每个颜色知道自己该在哪、干啥、不越界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！