如何提取任意网站配色 — 5秒扒出主色与渐变

看到好网站想抄配色？别用取色器一个个点。主色、辅助色、渐变、字体可以一次扒完，直接生成代码。

这篇讲三层方法：肉眼判断、工具提取、代码落地。

核心结论

✓结构：1 主色 + 1 深色 + 1 强调色 + 中性灰，最耐看
✓渐变：同系深浅过渡比撞色更高级
✓落地：Tailwind config 一处管全局
✓检查：正文对比度至少 4.5:1

提取：三步拿到全套

·看首屏：主按钮、标题、渐变背景定主色
·看页脚和卡片：找深色和中性灰
·用 WebTagr Palette 一键导出 hex + 字体栈

Tailwind 落地代码

export default {
  theme: {
    extend: {
      colors: {
        brand: "#6D28D9",
        ink: "#09090B",
        accent: "#F59E0B"
      }
    }
  }
};

CSS 变量版

:root {
  --brand: #6D28D9;
  --ink: #09090B;
  --accent: #F59E0B;
  --bg: #F7F6F3;
}

避坑

·超过 5 个主色必乱，先删后加
·渐变只用在装饰和 CTA，别铺正文
·深色模式单独调一版对比度

上线前检查清单

01主色/深色/强调色是否成体系
02正文对比度是否达标
03配色是否已进配置文件
04深色模式是否验证
05品牌色是否有水印/徽章复用

常见问题

直接抄大厂配色侵权吗？

颜色本身不受保护，但别连 Logo、字体、文案一起搬。

渐变怎么配不土？

同色系深浅过渡 + 低透明度用在背景，CTA 用实色。

深色站怎么定配色？

先定深底和主按钮色，再反推文字灰阶，保证对比度。