零基础HTML配色应依赖工具或算法而非手动选色，推荐用Coolors等在线工具导出CSS变量，再通过var()调用；动态场景优先使用chroma.js处理色彩计算与对比度校验。
配色方案生成不是靠“选颜色”，而是靠算法或工具链
零基础做 HTML 配色，别从 color 属性开始试，那等于蒙眼调色。真正可复用、视觉协调的配色，得靠明确规则（比如互补、类比、单色）或已有工具输出结构化值（HEX / RGB / HSL）。手写 #ff6b6b 这种只是结果，不是方法。
浏览器本身不提供配色生成能力，所以必须引入外部逻辑：要么用现成在线工具导出 CSS 变量，要么用 JS 库动态计算，要么在构建阶段用 PostCSS 插件注入。三者里，对零基础最友好、最不容易翻车的是「在线工具 + 手动复制」组合。
用 Coolors 或 Adobe Color 导出可直接贴进 CSS 的变量
这类工具输入一个主色，自动给出 5 色组合（主色 + 辅助色 + 中性色），支持导出为 CSS、SCSS、JSON 等格式。关键不是“好看”，而是它帮你绕过了色相环计算和明度对比度校验——这两步人眼极难判断，尤其对色弱用户不友好。
- 打开
coolors.co，按空格键快速生成新方案，直到出现你认可的组合 - 点击右上角
Export→ 选CSS Variables，复制整个:root块 - 粘贴进你的
style.css或<style></style>标签内，例如：:root { --primary: #4cc9f0; --secondary: #4361ee; --accent: #3a0ca3; --light: #f8f9fa; --dark: #212529; } - 在 HTML 元素中用
color: var(--primary)或background-color: var(--accent)调用，别再硬写 HEX
注意：导出的变量名是通用命名（--primary、--accent），如果项目已有同名变量，会覆盖。建议先全局搜索 var(--primary) 确认没冲突。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
用 JavaScript 动态生成配色时，优先用 chroma.js 而不是手算 HSL
想让配色随用户选择变化（比如主题切换），就得用 JS 计算。但直接操作 hsl(240, 100%, 50%) 的三个参数极易出错：色相偏 10° 可能就变脏，饱和度超 80% 在 OLED 屏上会刺眼，亮度低于 20% 文字就不可读。这时候轮到 chroma.js 出场——它封装了专业色彩空间转换和无障碍对比度检测。
- 通过 CDN 引入：
<script src="https://unpkg.com/chroma-js@2.4.2/chroma.min.js"></script>
- 生成互补色示例：
const base = chroma('#4361ee'); const complement = base.set('hsl.h', '+180').hex(); // → #ee6143 - 检查文字可读性：
if (chroma.contrast('#4361ee', '#ffffff') < 4.5) { console.warn('深蓝底白字对比度不足 WCAG AA 标准'); }
别用原生 HSL 字符串拼接来模拟类似效果，chroma.js 内部做了 CIELAB 转换，人眼感知更准；而浏览器原生 HSL 是设备相关色域，同一组数值在不同显示器上差异明显。
别忽略系统级暗色模式适配，否则配色方案一夜间全失效
很多教程教完五色搭配就结束，但实际部署时，用户开了 macOS 的深色模式或 Windows 的“深色应用模式”，你的 --primary: #4cc9f0 可能变成蓝底蓝字，直接消失。这不是配色错了，是没声明响应式上下文。
- 用
@media (prefers-color-scheme: dark)包裹整套变量重定义，而不是只改一两个颜色 - 不要只反转明暗（比如把
#ffffff换成#000000），而要用工具重新生成一套符合暗色场景的配色（Coolors 有Dark Mode切换按钮） - 检查
background-color和color是否都用了变量，否则局部样式会脱离主题控制
最容易被忽略的一点：字体图标（如 Font Awesome）默认颜色常写死在 .fa 类里，不会响应 var(--text)。要么改用 SVG 图标，要么在暗色模式下额外加一条 .fa { color: var(--text) !important; }。
