很多人做页面或海报，颜色全靠「感觉」：红配绿、荧光黄底色配白字……结果丑得一言难尽。其实配色有成熟的方法，不需要美术功底，用几个工具就能避开绝大多数坑。

下面这套流程，适合程序员、运营、自媒体等非设计岗同学。

一、从任意地方取色：颜色选择器

看到一张好看的图、一个喜欢的网站，想用它的颜色，但不知道色值？用 颜色选择器 在取色板上点一下，立刻得到 Hex、RGB 等数值。它还能让你直观感受颜色的明度和饱和度，比凭记忆调色准得多。

取色的第一步永远是「抄好看的」——先看别人怎么搭，再慢慢形成自己的判断。

二、不同格式互相转：颜色转换

开发里颜色格式五花八门：CSS 用 #RRGGBB 或 rgb()，设计稿可能给 hsl()，安卓用 #AARRGGBB。手动换算必出错。

颜色转换 在 Hex、RGB、HSL 之间一键互转，还能预览效果。写样式时随时查，避免「我在代码里写的是对的，为什么显示不对」这类低级问题。

三、最容易翻车的一步：对比度校验

白字配浅灰背景、黄字配白底——这种组合的「可读性」极差，弱视和老年用户基本看不清。更关键的是，很多国家把对比度写进了无障碍法规。

用 颜色对比度 输入前景和背景色，它会告诉你对比度比值是否达到 WCAG 标准（正文至少 4.5:1）。做正式产品前必查这一项，能避免上线后被吐槽「字看不清」。

四、不会配色？让工具给方案：调色板生成

「主色定了，辅助色和强调色怎么搭？」这是新手最头疼的。硬凑往往翻车。

调色板生成 基于色轮关系（互补、三角、类似色）给你一组协调的颜色。你选一个喜欢的主色，它补齐全套方案，直接拿去用。这是快速做出「不土」配色的最省事路径。

五、细节质感：阴影生成

扁平设计容易显得「平」。一点恰到好处的阴影，能让按钮和卡片「浮」起来，层次感立刻出来。

用 阴影生成 拖拽调节偏移、模糊、扩散和颜色，实时预览代码。复制生成的 CSS 直接粘进项目，比手写 box-shadow 猜参数高效得多。

一条龙配色流程

确定灵感色 → 颜色选择器提取 → 颜色转换统一格式 → 调色板生成补全配色方案 → 颜色对比度校验可读性 → 阴影生成加质感。

把这五步走完，哪怕零设计基础，产出的视觉效果也能稳稳过关。所有工具本地运行，配色方案不会泄露，做内部项目也放心。