Coolors 是一款以“快速出一套可用配色”为核心的在线配色生成工具。它把灵感获取、方案扩展、可读性校验和多格式导出连成一条工作流，适合做品牌视觉、海报KV、活动专题页、App/小程序界面、数据看板，以及电商主图的整体色调统一。
当你遇到这些问题时，Coolors 的价值会非常明显：客户只给了一个品牌主色；需要在短时间内产出 3-5 套备选色板；或者你已经有一张参考图，但不知道如何提取并扩展成“主色-辅色-强调色-中性色”的完整体系。
1）一键生成与锁定：在生成器里按空格即可不断刷新配色，你可以把满意的某个颜色“锁定”，再围绕它继续生成其它颜色，确保方案始终围绕品牌主色展开。
2）智能延展：同一主色可以快速延展出浅色/深色、背景色/描边色等，适合UI里做层级和状态（hover/active/disabled）。
3）对比度与可读性：配色好看不等于可用。做 UI 或海报文字时，必须关心文字与背景的对比度（可读性）。Coolors 内置的对比度检查可以帮助你避免“看起来高级但读不清”的翻车。
4）多格式导出：你可以导出为 CSS 变量、SVG/PNG 色板、以及部分设计软件可用的色彩格式，用于和团队协作、设计交付与开发落地。
第一步：先确定一个“锚点色”（通常是品牌主色或产品主色）。如果你只有参考图，可以先用取色/提取功能拿到 1-2 个关键色（主色 + 强调色）。
第二步：进入生成器，把锚点色锁定，然后刷新生成其它颜色。建议优先补齐：背景中性色（浅灰/米白）、正文文字色（深灰/近黑）、强调色（按钮/标签/高亮）。
第三步：用对比度检查快速过一遍主要组合：正文文字 vs 背景、按钮文字 vs 按钮底色、标签文字 vs 标签底色。把不合格的颜色微调到通过为止。
技巧A：主辅比例别平均。常用的视觉占比可以是 60% 背景/中性色 + 30% 主色系 + 10% 强调色。这样画面更稳定，重点更突出。
技巧B：UI场景要准备“状态色”。同一个按钮至少需要默认、hover、按下、禁用四个状态；你可以用同色相不同明度/饱和度来做，而不是每个状态换一个完全不同的色相。
技巧C：别忘了“中性色体系”。很多页面的高级感来自中性色：背景白不一定是纯白，黑也不一定是纯黑。准备 3-5 个层级的灰阶能显著提升排版与信息层级。
当你确定最终方案后，建议把颜色整理成变量命名：例如 --color-bg、--color-text、--color-primary、--color-primary-pressed、--color-accent 等。这样不管你在 Figma/Sketch 里做组件，还是前端用 CSS 变量，都能保证一致性，后续改版也只需要改变量而不是全局找色。
1）只顾“氛围感”忽略可读性：浅色文字配浅色背景、或高饱和底色配高饱和文字，都会让信息难以识别。
2）过度依赖单一鲜艳色：鲜艳色适合做强调，不适合大面积铺底。大面积底色建议用低饱和/高明度的色。
3）没有考虑不同屏幕：手机、低亮度屏幕、投影场景都会让对比度更差，建议在不同设备上快速预览。
Coolors：https://coolors.co
建议：如果你要做更偏“字体+色彩”的品牌规范，可以在确定色板后，把标题字体、正文字体的颜色与字号层级一起做成一页规范（Brand sheet），后续做海报、电商图和UI都会省很多时间。
