如何快速获取网页中的 HTML 颜色代码格式 ?Chrome 扩充外挂推荐 ColorPick Eyedropper

文章最后更新于 April 7, 2021

当我还没接触到 ColorPick Eyedropper 扩充插件时,我当初想调颜色的做法可以说是非常的傻 XD 。比如说预设的 HTML 颜色代码是 #FFFF00,我就会随机替换代码,直到找到适合的颜色位置,像 #FFFF03 ,#FFFF20,#FFCB00。。。。。

再后来进阶一点,我会在 Google 搜索 HTML Color Codes,然后在 HTML Color Codes 里面调出最适合的颜色,然后才复制起来,贴到我的网页。以上纯粹是我个人的新手小白经验之路,非常的狼狈,哈哈哈。

但是有一次观看 Youtube 时,无意中看到有人介绍这款 ColorPick Eyedropper 的扩充外挂感觉不错,非常的实用,而且是免费的 !

什么是 ColorPick Eyedropper ?

ColorPick Eyedropper Logo

ColorPick Eyedropper 是一款 Chrome 扩充外挂,它能够简单且轻松的获取网页颜色代码 !无论你在那一个网页中,相中了其中的颜色,你都可以实用这款扩充外挂,取得颜色的 HEX ,RGB,或 HSL 的代码。

为了取得网页里更细节的颜色,它也会自动把颜色的区域放大,让你能够更精准的获得更细节的颜色。另外,每当你取得颜色时,他也会自动保留获取颜色的记录,如果我们日后想要获取同样的颜色就可以直接从 ColorPick Eyedropper 的历史记录取得就好。

除了取色功能以外,它还有一个功能也就是 Color Palette (调色板),能够调出 9 种不同的调色板 。简单来说它是一种颜色的组合,一般的 UI (User Interface) 设计员都会使用这一个颜色组合来设计用户界面。Color Palette 只要使用恰当,颜色就会达到平衡状态,大大提升用户视觉的愉悦度。

名字:ColorPick Eyedropper
下载网址:Chrome Web Store
使用人数:1,000,000 +

RGB, HEX 和 HSL 有什么差别?

RGB

RGB 颜色

RGB 其实就是 Red,Green,Blue 的缩写,也就是红,青,蓝颜色。相信如果上过美术课的朋友,应该知道这三个颜色混在一起就能够生产出许多颜色。另外如果你在数值后面添加多一个数字,像 rgba(255,0,0,.5) 颜色就会变半透明(背后的 A 代表 Alpha Channel, 只限于 0 到 1 的数值之间)。

例子:

  • rgb(0,0,0) – 黑色
  • rgb(255,255,255) – 白色
  • rgb(255,0,0) – 红色
  • rgb(0,255,0) – 青色
  • rgb(0,0,255) – 蓝色

HEX

HEX 颜色代码

HEX 也是 RGB 另一种写法,但是 HEX 运用了 16 进制的算法去判断 RGB 的颜色。例如一个橘色的 HEX 代码是 #FFEFD7,这个代码就会运用16 进制的算法直接映射 rgb(255,190,95) 的颜色。

HSL

HSL 颜色

HSL 代表 Hue,Saturation,Lightness 也就是色调,饱和度,亮度。色调(Hue)部分它是 3 种主要颜色(红,青,蓝)形成的 360 度圆形,红色是 0 度,青色是 120 度,而蓝色则是 240 度,以此类推。

饱和度(Saturation)也可以算是鲜艳度,如果颜色的饱和度越高,图片就会呈现出非常的显眼,然而如果饱和度越低,图片就会呈现出灰淡的颜色,毫无色泽。这里的饱和度是根据百分比来调整,也就是 0 – 100 % 。

亮度(Lightness)应该大部分人都知道它的作用,就是用来调整颜色的亮度。通常颜色在 50 % 亮度是最为准确,最低(0%)或最高(100%)的百分比都会使颜色变成黑色或白色。

如何使用 ColorPick Eyedropper ?

其实整个使用过程都是非常的轻松简单,在接下来的教学部分我会大致上解释它的功能。

启用扩充快挂

ColorPick Eyedropper 扩充外挂
ColorPick Eyedropper 扩充外挂

前往下载扩充外挂的下载页面,点击 Add to Chrome 下载外挂。使用 Microsoft Edge 浏览器的朋友同样也是可以使用该功能,不过前提是你需要打开 Microsoft Edge 的扩充外挂许可证,让浏览器能够使用 Chrome 的扩充外挂。

Edge Extensions Allow
Microsoft Edge 浏览器
FireFox Add Ons
FireFox 浏览器

使用 Mozilla Firefox 的用户,同样也是可以在 Add-Ons 的设定搜索 ColorPick Eyedropper。外挂下载完成后,就可以点击 Add Extension 把扩充外挂加入到你的浏览器当中。

使用步骤

ColorPick Eyedropper 使用步骤

扩充外挂添加完成后,你就可以在浏览器的右上角点击五颜六色的圆形图案。点击后,你就可以随机移动你的鼠标,并且移动到你先获取的颜色编码。确认想要的颜色后,点下左键你就可以把颜色的 HEX 或 RGB 编码复制起来,贴到你的网页。

ColorPick Eyedropper 4

功能介绍:

  1. HEX 颜色编码
  2. 历史记录 (History)
  3. 调色板(Palette)
  4. 取消(按下 Esc 也能取消 ColorPick 功能)
  5. RGB 颜色编码

注意:如果你想要开启显示 HSL 颜色的代码,可以注意我接下来的设定界面介绍。

设定界面

ColorPick Eyedropper 设定界面

在设定界面中,基本上我们不用更改任何设定,使用预设的设定就好。左上方就是我们获取颜色的历史记录(History),每当我们获取颜色,它都会把颜色的代码记录下来。

右手边就是我们的调色板(Palette),它的功能主要是根据你获取的颜色,生成出多种的调色板类型,像是 Complement,Analogous 等等的。

可以尝试玩下这个功能,调出你喜欢的颜色。也别忘了,如果你想要获取颜色代码时,显示 HSL 代码,可以在 History 的下方把 Show HSL 打钩,然后点击 Save Options

常见问题

注意事项

  • 如果使用时,发生各种错误,尝试重载页面或重新下载扩充外挂
  • 颜色的准确度可能会稍微有一点差别
  • Microsoft Edge 和 Mozilla Firefox 浏览器也能够使用

结尾

以上都是我的使用 ColorPick Eyedropper 个人经验,可能有些比较进阶的设定我没有解释,在这里深感抱歉,因为我不是设计师 ,我最多只会复制颜色代码,然后贴到我的 WordPress 网站,进行小部分的颜色修改,就这样而已 :3 !

我个人是觉得这扩充外挂是蛮不错的,而且简单方便,看见网站的设计风格很独特,就会参考并且使用 ColorPick Eyedropper 去获取他们配的色调,更何况我完全对设计这方便可以说是比较差的 QQ

关于 NeedyApps.com

如果你对这篇文章有任何问题,欢迎你在下方留言让我知道 !如果你喜欢这篇文章也别忘了分享,让更多人看见我写的文章 !

本站与部分商家有合作的关系,所以正在阅读文章的你,如果透过我的连结购买产品,我将会获得少数的佣金,让我继续经营下去 !

感谢您支持 !Wishing You Good Health and Happiness !

Default image
Kendall
讨厌墨守成规的理念! 热爱天马行空的想法,热爱冒险,喜欢尝试生活上各种不一样的事!

订阅 NeedyApps

完成订阅即可在第一时间内获得文章的最新通知!

如有任何疑问,欢迎在评论区这里留言!