没有“万能配色”，但有可复用的协调逻辑：主色定调性，辅色控节奏，强调色引动线，所有颜色须经对比度校验、语义化命名与集中管理。
直接说结论：没有“万能配色”，但有可复用的协调逻辑——主色定调性，辅色控节奏，强调色引动线，所有颜色必须通过对比度校验、语义化命名和集中管理才能真正协调。
怎么选主色才不翻车
主色不是挑你最喜欢的那个，而是挑最能承载页面功能与情绪的那个。比如企业官网常用深蓝#007BFF，不是因为它“好看”，而是它在多数设备上灰阶稳定、文字叠加可读性强、且用户心智中已绑定“专业/可信”信号。
- 避开纯黑
#000000和纯白#FFFFFF做主背景或主文字——它们对比过强，长时间阅读易疲劳；改用深灰#2C3E3F或米白#F5F5DC - 中国风模板慎用
#FF0000（标准红），它饱和度过高、缺乏传统颜料质感；换成#9E3D2D（朱砂褐）更耐看 - 绿色植物类主题别只盯
#00FF00，草绿#2E8B57带灰度，和米白#F5F5DC、深棕#8B4513搭在一起才显自然
CSS变量怎么管颜色才不乱
把颜色硬写进每个color或background-color里，等于埋雷。一旦要换品牌色，得全局搜索替换，极易漏掉或误改。
- 统一在
: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()或伪元素模拟） - 链接
ahover时别只改color，加text-decoration: underline比变色更克制，也更符合中国风“不抢戏”的节奏
最容易被忽略的一点：配色协调与否，80%取决于应用层级是否清晰。标题用--primary，正文用--text，卡片背景用--surface，三者之间明度差必须≥30，否则视觉会糊成一片。别指望调几个色值就万事大吉，得让每个颜色知道自己该在哪、干啥、不越界。
