ColorZilla

在网页设计或前端开发中，经常需要快速获取某个网页元素的颜色值。比如看到某个网站的按钮颜色很好看，想用到自己的项目里；或者老板指着屏幕说要把这个蓝色调深一点，你需要在代码里改色号。用QQ截图或者第三方软件去取色，不仅要切窗口，还因为缩放导致数据不准。

ColorZilla直接集成在浏览器里，操作起来很顺手。它就像一个悬浮在屏幕上的“放大镜吸管”。安装后，你可以点击插件图标启动取色器，然后把鼠标移动到网页任意位置，它会实时放大显示当前像素点，并显示这个点的颜色数值。点击鼠标，这个颜色就被复制到剪贴板了，回到代码编辑器里直接粘贴就能用。

这款工具最早发布于2004年，算是浏览器插件界的老牌选手，一直持续更新到现在。它不仅仅是一个吸管，还包含了一个类似Photoshop的专业颜色选择器面板，以及一个可视化创建CSS3渐变的工具。如果你做网页设计，或者偶尔需要改一下博客的主题色，ColorZilla是一个很趁手的小工具。

官网入口地址

https://www.colorzilla.com/zh-cn/

下载地址

可以在Chrome网上应用店、Edge扩展商店或Firefox附加组件网站中搜索“ColorZilla”进行安装。也可以从官网首页直接点击对应的商店链接跳转。

功能介绍

核心取色器
这是最常用的功能。点击插件图标后进入取色模式，鼠标移动时会有高倍放大镜效果，帮助你精准定位到像素边缘。状态栏会实时显示当前颜色的Hex（十六进制）、RGB、HSL等格式。点击即复制，不用手动输入，能避免抄错色号。

高级颜色选择器
提供了一个类似Photoshop的调色盘窗口。你可以通过拖动滑块、输入数值或拾取屏幕颜色，精细调整颜色，并自动计算出互补色、相似色等。它支持多种颜色模型（HSB、RGB、Lab等），适合在做设计图或调色时进行专业选色。

CSS渐变生成器
这个功能可以让你不需要手写复杂的CSS代码，通过可视化界面拉拽渐变条，添加、删除色标，调整角度和位置，实时预览效果。它支持linear-grant（线性渐变）和radial-grant（径向渐变），设置好后点击复制代码，直接粘贴到CSS文件里就能用。

网页色彩分析器
打开任何网页，点击这个功能，它会分析当前网页中使用了哪些主要的颜色，并自动生成一个调色板。这个功能适合用来分析竞品网站的色彩搭配方案，或者快速提取一个网站的配色灵感。

调色板浏览器与管理
内置了多套预设调色板（比如“四季色”、“Web安全色”），支持自定义调色板。你可以把项目中经常用到的品牌色、主题色保存下来，下次直接调用，不用重复吸取。

元素信息查看器
在取色的同时，插件还能显示当前鼠标所指的HTML元素的详细信息，包括标签名、Class类名、ID、宽度、高度等。对于前端开发者来说，这是一个辅助定位元素的好帮手，不用频繁打开浏览器开发者工具。

历史记录与快捷键
所有吸取过的颜色都会保存在历史列表里，方便回溯。支持快捷键操作，比如快速隐藏/显示取色窗口，或者快速复制颜色值，提高连续工作的效率。

应用场景

前端开发还原设计稿
开发者在写CSS时，需要对照设计稿给文字、背景上色。用ColorZilla直接在浏览器里吸取设计稿预览图或竞品网站的颜色，比用本地画图软件打开取色要方便快捷得多。

设计师灵感收集
浏览网页时看到一个喜欢的配色方案，用“网页色彩分析器”一键提取整个页面的颜色代码，保存到本地调色板里，作为自己下次设计的灵感库。

品牌色规范管理
公司的官网有一套品牌色（比如主色调#00A1D6）。用ColorZilla把颜色吸取出来，保存在自定义调色板里，以后不管是做PPT还是修图，随时都能调出这个色值，保证视觉统一。

网页数据可视化配色
数据分析师或前端在做ECharts图表时，需要指定一组视觉效果好的颜色。可以用ColorZilla吸取一些著名数据新闻网站的颜色搭配，或者直接用渐变生成器生成一组渐变色。

非技术背景人员的协作
产品经理或运营人员在反馈网页Bug时，可以说“左侧栏的背景色不对，应该是#F5F5F5”。他们可以直接用ColorZilla吸一下告诉开发具体色号，而不是说“那个灰白色”，沟通效率更高。

定价及支持

定价策略
ColorZilla是一款免费增值产品。基础颜色吸取和大多数日常功能是免费的，足够大部分用户使用。它有一个付费的Pro版本（通过在线销售），主要解锁高级渐变控制、更强大的颜色分析器以及一些批量导出功能。对于普通设计师和开发者的日常工作，免费版已经很够用了。

开发者背景
由一家名为“ColorZilla”的软件公司（Iosif）开发，是一款非常老牌的浏览器工具，拥有接近二十年的发展历史，在国内外用户中都很有口碑。

语言与支持
该插件支持包括简体中文在内的数十种语言界面，深受用户欢迎。