获取 HEX、RGB 和 HSL 颜色代码的最佳颜色选择器 Chrome 扩展

无论您是网页设计师(web designer)、艺术家,还是只想匹配颜色的人,Google Chrome都在(Google Chrome)Chrome 网上应用店中(Chrome Web Store)提供了几个可以提供帮助的插件。

使用颜色选择器Chrome扩展,您可以获得 Web 上所需的任何颜色的HEXRGBHSL值。只需(Simply)将光标指向颜色并获取匹配颜色所需的代码。

这里有 10 个Chrome颜色选择器扩展,从那些具有您可能喜欢的额外特性和功能的扩展开始。

1.拾色器工具——Geco(Color Picker Tool – Geco)

您可以使用Color Picker Tool – Geco(Color Picker Tool – Geco)获取您在网页上看到的任何颜色的颜色代码。

  1. 选择工具栏中的扩展按钮。
  2. 将光标指向您要识别的颜色。
  3. 单击(Click)以将颜色保存在扩展程序列表中。

然后,您将在扩展程序窗口的NewPicked部分中看到HEXRGBHSL代码。选择您之前识别的颜色,您将在“新建”(New)部分看到这些代码。

附加的功能:

  • 自动将HEX颜色代码复制到剪贴板,以便在需要的地方轻松粘贴。
  • 下载包含(Download)HEXRGBHSL代码的调色板的CSV文件。(CSV)
  • 调整(Adjust)复制到剪贴板、启用通知和使用右键单击的设置。

2.AKColor _(AKColor)

使用AKColor(AKColor)的吸管工具从您在网络上看到的任何网站获取颜色代码。

  1. 选择工具栏中的扩展按钮。
  2. 选择左侧的吸管(eyedropper)并将光标指向您要识别的颜色。
  3. 单击(Click)以查看颜色代码以及该区域最接近的颜色和平均颜色。

您将看到一个漂亮的弹出窗口,其中包含RGBRGBAHEXHSLHSLA的颜色代码。选择(Choose)任何代码将颜色值复制到剪贴板。然后,选择Pick AgainClose

附加的功能:

  • 使用扩展中内置的颜色转换器(Color Converter)渐变生成器。(Gradient Generator)
  • (Take)利用键盘快捷键快速轻松地识别颜色
  • 调整(Adjust)夜间模式、界面、像素放大镜大小、缩放级别等的设置。

3.选择颜色(Pick Color)

如果您正在寻找可以在其他位置(而不仅仅是网络)使用的颜色选择器,Pick Color就是您的工具。

  1. 选择工具栏中的扩展按钮。
  2. 选择选择您的颜色(Choose Your Color),然后选择吸管(eyedropper)
  3. 将光标指向您要识别的颜色。这可以在网站、桌面或其他应用程序中。
  4. 单击(Click)以将颜色保存在扩展中。

然后,您将在扩展程序的窗口中看到HEXRGBHSL颜色代码。(HSL)您可以通过选择右侧的复制图标来复制十六进制代码。(HEX)要复制RGBHSL值,请向下移动到下面的部分并使用这些复制图标。

奖励功能(Bonus Feature)

使用Pick Color,您可以快速识别网页上的颜色并将HEX代码复制到剪贴板,只需单击几下即可。

  1. 右键单击网页,然后从快捷菜单中选择在页面上选择颜色。(Pick a color on the page)
  2. 将光标移动到颜色上,您将看到附加的HEX代码。
  3. 单击(Click)以将颜色的十六进制(HEX)代码复制到剪贴板。

4.颜色选择器(Color Picker)(由 linangdata.com 提供)

对于另一个具有有用额外功能的 Chrome 扩展程序(Chrome extension with useful extra features),请查看来自 linangdata.com的Color Picker 。

  1. 选择工具栏中的扩展按钮,然后转到吸管(Eyedropper)选项卡。
  2. 选择吸管(Eyedropper)并将光标指向颜色。当您移动指针时,您会看到HEX代码出现。(HEX)
  3. 单击(Click)以将颜色保存在扩展程序列表中,同时将HEX代码复制到剪贴板。
  4. 使用工具栏按钮重新打开扩展程序,您将看到HEXRGBHSLHSVCMYK代码。选择任一代码右侧的复制图标,将其放在剪贴板上。

附加的功能:

  • 使用颜色选择器(Color Picker)选项卡显示原色及其颜色代码。
  • 尝试使用“色阶”选项卡查看不同的颜色(Color Scale )阴影及其颜色代码。
  • 查看颜色混合器(Color Blender)选项卡以增加、变暗、变亮和叠加颜色。

5.滴管(Eye Dropper)

Eye DropperChrome的一个不错的颜色选择选项,您可能会喜欢一些奖励。

  1. 选择工具栏中的扩展按钮。
  2. 选择从网页中选择颜色(Pick color from web page)并将光标移动到该颜色。当您移动指针时,您会在浏览器窗口的右下角看到HEXRGB值。(RGB)
  3. 单击(Click)颜色以将其保存到扩展程序列表中。
  4. 当您重新打开扩展程序时,您将在Selected color 部分 看到HEXHSLRGB颜色代码以及该颜色的名称。

附加的功能:

  • 使用颜色选择器(Color Picker)选项卡混合您自己的颜色。
  • (Export)将您的颜色历史记录导出为带有颜色代码的CSV文件。
  • 调整(Adjust)设置以复制到剪贴板、更改指针外观以及在移动光标时禁用颜色信息。

6.黑虾(Black-shrimp)

如果您想识别颜色然后对它们进行分组以便快速访问,请查看Black-shrimp

  1. 选择工具栏中的扩展按钮。这会在左侧打开插件的小窗口。
  2. 将光标指向您要识别的颜色并单击。
  3. 您将立即在窗口中看到HEX代码。(HEX)使用已识别颜色旁边的下拉框查看RGBHSL颜色代码。
  4. 要保存颜色,请选择窗口底部的加号。(plus sign)

附加的功能:

  • 使用文件夹(folder)图标添加一个组并将保存的颜色拖入其中。
  • 将保存的颜色导出(Export)ASE ( Adobe Swatch Exchange ) 文件。
  • 使用(Use)键盘快捷键添加颜色、创建组、删除或导出。

7.简单的颜色选择器(Easy Color Picker)

如果花哨的额外功能不适合您并且您想要一个简单的扩展,请查看Easy Color Picker

  1. 选择工具栏中的扩展按钮。
  2. 选择右上角的Pick按钮并将光标指向颜色。(Pick)当您移动指针时,您会在浏览器窗口的右下角看到HEXRGB值。(RGB)
  3. 单击(Click)所需的颜色,然后使用按钮重新打开扩展程序以查看HEXRGBHSL代码。

虽然颜色代码没有简单的复制选项,但如果需要将值粘贴到其他位置,您可以在每个框内右键单击并选择复制。(Copy)

8. Colorfly 拾色器(Colorfly Color Picker)

Easy Color Picker类似的是Colorfly Color Picker获取(Grab)颜色、查看代码并在需要时复制值。

  1. 选择工具栏中的扩展按钮。
  2. 选择Pick Color按钮并将光标指向颜色。移动光标时,您可以在浏览器窗口的右下角查看HEXRGB值。(RGB)
  3. 单击(Click)您想要的颜色,您将在扩展程序的窗口中看到HEXRGBHSL代码。(HSL)选择(Select)任何颜色代码将其复制到剪贴板。

9.颜色选择器(Color Picker)(由 kipelovvycheslav 提供)

另一个基本的Chrome 浏览器扩展(Chrome browser extension)与我们列表中的另一个名称相同,颜色选择器(Color Picker),这个来自 kipelovvycheslav。

  1. 选择工具栏中的扩展按钮。
  2. 将光标指向您要识别的颜色并单击。
  3. 重新打开扩展程序以查看HEXHSLRGB颜色代码。

10.智能颜色选择器(Smart Color Picker)

最后一个没有花里胡哨的简单Chrome扩展是(Chrome)Smart Color Picker

  1. 选择工具栏中的扩展按钮。
  2. 选择Pick Color按钮并将光标指向颜色。当您移动光标时,您会在浏览器窗口的右下角看到HEXRGB值。(RGB)
  3. 单击(Click)所需的颜色,然后使用按钮重新打开扩展程序以查看HEXRGBHSL代码。选择(Select)任何颜色代码将其复制到剪贴板。

希望这些Chrome(Chrome)扩展颜色选择器中的至少一个正是您所需要的。无论您喜欢额外的功能还是喜欢保持简单,它们都是不错的选择。

如需更多帮助,请查看如何在 Chrome 中安装或删除扩展程序(install or remove extensions in Chrome)



About the author

我是一名硬件工程师,专门从事iPhone、iPad等苹果产品的设计和开发。我在 iOS 和边缘设备以及 Git 和 Swift 等软件开发工具方面都有经验。我在这两个领域的技能使我对 Apple 设备操作系统 (OS) 如何与应用程序和数据源进行交互有了深刻的理解。此外,我在 Git 方面的经验使我能够处理代码版本控制系统,这有助于在开发软件时提高效率和生产力。



Related posts