前端必备！ColorZilla这插件真是封神了！

今天咱们来聊聊一个前端开发必备的小工具——ColorZilla。我这几年写页面、调样式，遇到过无数次“颜色对不上”的场景，ColorZilla真的是救过我无数次。下面我给你拆开讲讲：

1）ColorZilla 是个啥？

一句话总结：浏览器取色神器。

它最早是 Firefox 的插件，现在 Chrome 上也有，安装量几百万级别。主要功能：

1. 页面取色（Eyedropper）：直接在网页上点一点，立马给你十六进制颜色值。
2. 颜色历史记录：取过的颜色自动保存，不用你每次复制粘贴。
3. 渐变生成器（Gradient Generator）：写 CSS 渐变的时候，不用自己调半天，直接图形化生成。
4. CSS颜色分析：可以直接查看页面里用到的 CSS 颜色列表。

我记得我第一次用的时候是在调 UI 设计师的稿子，明明给了 Figma 文件，但我懒得打开，每次就用 ColorZilla 直接从网页或者截图页面上取色，舒服到爆。

2）安装和使用方法

安装：

• Chrome 用户直接去 Chrome Web Store 搜 ColorZilla 安装。
• Firefox 用户在附加组件里搜就行。

使用场景：

1. 打开插件，选择“取色工具（Pick Color From Page）”。
2. 鼠标放到网页上某个元素，比如按钮、背景、文字。
3. 点击一下，颜色值就复制到剪贴板了，比如 #1a73e8。
4. 粘到 VSCode、F12 控制台或者设计软件里就能直接用了。

很多时候调 UI 的细节，比如 hover 的按钮颜色，手动扒 CSS 很麻烦，直接取色就行。

3）ColorZilla 的亮点

我觉得它几个点真是封神：

1. 精度很高你鼠标移到像素点，它就能精确到那个点的颜色，不会差一丢丢。

2. 跨工具通用有时候设计师只给了网页，不给源文件，你直接用它取色就能还原。

3. 渐变生成牛逼手写 linear-gradient 很容易错参数，ColorZilla 提供一个 UI 面板调，最后一键复制代码。

4. 比开发者工具还快虽然 Chrome DevTools 也能取色，但要打开、点元素、切换样式，步骤多。ColorZilla 就一键点，速度直接爆了。

   

4）我踩过的坑

说实话，这玩意也不是没有坑：

1. 高分屏有时会有偏差在我 MacBook Pro M1 上，某些缩放状态下取的颜色和实际 CSS 值差一点。后来发现最好放大 100%，就不会有问题。

2. 取不到伪元素颜色比如 ::before、::after 里的颜色，有时候插件直接取不到，这种得配合 DevTools。

3. 渐变工具代码太长它生成的 CSS 代码会兼容各种老旧浏览器（加一堆 -webkit-、-moz- 前缀），但现在基本用不上，看起来臃肿，我一般手动简化。

   

5）有没有替代方案？

ColorZilla 虽然经典，但不是唯一选择：

1. Chrome DevTools： 内置取色器，点开元素样式就能用。适合细调，但取整个页面颜色没 ColorZilla 快。

2. Figma / PS 自带取色器： 如果你本身就在用设计稿，直接在设计工具里取。

3. 系统级取色工具： macOS 有 Digital Color Meter，Windows 有 PowerToys 的 Color Picker。优点是全局都能取，不限浏览器。

感兴趣的朋友可以试试，有问题欢迎交流，我们下篇再见！