HTML中实现马卡龙配色需用CSS自定义属性定义低饱和高明度色值，如--macaron-pink: #f8d7da；须校验WCAG对比度≥4.5:1，并优先使用hsl()动态调控色相/饱和度/明度以保障可读性与适配性。
HTML 本身没有“马卡龙配色”这个功能，配色靠的是 color、background-color 等 CSS 属性手动设置；所谓“马卡龙色系”，只是对一组低饱和、高明度、带轻微粉/蓝/绿/紫调的柔和颜色的习惯叫法，不是标准色卡，也没有内置 API。
怎么在 HTML/CSS 里用马卡龙色？直接填十六进制或 RGB
马卡龙色不是预设关键词（比如 red 或 lightblue），必须用具体值。常见做法是选 4–6 个主色，定义为 CSS 自定义属性，方便复用和换肤：
:root {
--macaron-pink: #f8d7da;
--macaron-mint: #d1f2eb;
--macaron-lavender: #d9d0ff;
--macaron-peach: #ffeaa7;
}
然后在元素中使用：
button { background-color: var(--macaron-mint); color: #333; }
注意：#f8d7da 这类浅粉看似柔和，但对比度可能低于 WCAG 4.5:1（尤其配浅灰文字），实际项目中建议用 WebAIM 对比度检查器 验证可读性。
哪些颜色算“马卡龙”？避开高饱和和冷灰陷阱
典型马卡龙色有共性：明度（L）在 85–95 之间、饱和度（S）通常低于 20%（HSL 模型下）。容易误选的“伪马卡龙”包括：
-
#ff6b6b—— 太艳，饱和度 100%，是珊瑚红，不是马卡龙粉 -
#c0c0c0—— 灰度高、无色调倾向，属于中性灰，缺乏马卡龙的微妙暖/冷调 -
#e6f7ff—— 接近，但偏冷且过亮，易显“荧光”，加一点hsl(198, 12%, 92%)的淡青感更稳妥
推荐起手组合（已校验文本对比度 ≥ 4.5:1，配深灰 #333）：
--macaron-rose: #f4dada｜--macaron-sky: #d6f0ff｜--macaron-butter: #fff8e6｜--macaron-thistle: #e5d9ff
用 CSS hsl() 动态调出马卡龙感，比死记 HEX 更灵活
固定 HEX 值难适配不同背景，而 hsl() 可以基于同一色相微调明度/饱和度，快速生成协调变体。例如统一用 hsl(340, 14%, 92%) 作基底粉，改明度得按钮悬停态：hsl(340, 14%, 88%)，改饱和度得边框：hsl(340, 8%, 92%)。
关键参数区间参考：
- 粉/桃色调：色相
0–30，饱和度8–16%，明度90–95% - 蓝/紫调：色相
240–280，饱和度10–18%，明度91–94% - 避免用
hsl(0, 0%, x%)（纯灰）或hsl(x, 100%, y%)（荧光感），会破坏马卡龙的“柔雾感”
真正难的不是选色，而是让这些浅色在不同设备亮度、不同用户视觉偏好下仍保持可读、不发虚——所以别只盯着“好不好看”，先用 prefers-reduced-motion 和 prefers-color-scheme 做基础适配，再谈马卡龙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
