以下是来自 Tyler Sticka 的客座文章。 Tyler 创建了一个名为 Colorpeek 的工具。 在这篇文章中，他将向您介绍这个 Web 应用程序的作用以及原因，以及 Chrome 扩展程序如何扩展该功能。 然后 _明天_，请继续关注，因为 Tyler 将向我们展示他是如何构建 Chrome 扩展程序的。
前段时间，我发现自己参与了一项大多数设计师都会遇到的单调任务。 在我当天喜欢的任何设计应用程序中仔细选择了调色板后，是时候与我的合作者分享这些颜色值了。
我可以将一堆 十六进制三元组 放入电子邮件中，然后称之为完成。 但在我们所有人开始培养对 RGB 颜色模型的百科全书式的知识之前，最好还是包含某种图像。
因此，我老老实实地拿出 Photoshop，做了类似这样的东西，感觉像是做了上千次了
这更好。 但它也不可能从其中复制文本，并且更新起来很繁琐。 然而，我们继续手动创建这些简单的调色板模型 一遍又一遍。
颜色科学领域的顶级研究人员估计，每年大约有 30 亿个新的颜色应用程序面世。 [需要引用] 其中很多真的很酷。 但其余的都很复杂，没有一个完全符合我的要求。
因此，在我的闲暇时间，我制作了一个名为 Colorpeek 的 Web 应用程序。
了解 Colorpeek
Colorpeek 可以帮助您快速查看和分享您正在使用的任何 CSS 表示法中的颜色。 它支持十六进制、RGB(a)、HSL(a)、命名颜色，甚至一些非标准的 品牌颜色。 它们全部以简单、响应式的布局显示。
一些示例
- 十六进制：colorpeek.com/#a899f2
- 带有 alpha 的 RGB：colorpeek.com/#rgba(221,78,133,0.5)
- 颜色关键字：colorpeek.com/#lightcoral
- 多种颜色（混合格式）：colorpeek.com/#hotpink,rgb(77,196,94),hsl(212,73,67)
- 一些品牌颜色：colorpeek.com/#facebook,twitter,youtube
如果您更喜欢视觉思维，并且您的浏览器支持 拖放 和 文件 API，您可以通过将图像直接拖放到 Colorpeek 中来添加颜色。 由于 Lokesh Dhakar 的神奇的 Color Thief 脚本，它将获取最突出的颜色。
创建 Colorpeek 调色板后，您可以通过点击或单击 
按钮来设置其表示法。 
按钮允许您共享页面或“导出”为几种格式（纯文本、JSON、LESS、SCSS 或 Stylus）。
问题解决了！（几乎…）
我在 5 月份发布了 Colorpeek，但很快发现了一个问题。 Colorpeek 使_分享_颜色变得更容易，但它对_接收_颜色没有太大帮助。 我仍然看到这样的邮件
以下是我们正在使用的颜色
蓝色：#2b95d2
绿色：#2cc96b
红色：#ed4d55
深蓝色：#20303c
（向我在这条消息中消极被动地公开羞辱的无名现实生活中的朋友表示歉意。 你应该更清楚。）
我的第一反应是使用 Cerebro 来心灵感应地确保 Colorpeek 在所有现在和未来合作者的脑海中无处不在。 我缺乏心灵感应能力，再加上令人沮丧的认识到 X 战警是虚构的，迅速使这些计划破产。
因此，我制作了一个 Chrome 扩展程序。
安装后，您可以
- 从文本选择中创建调色板（例如前面的电子邮件示例）；
- 查看网页上的所有 CSS 颜色；
- 以及从页面中嵌入的图像中获取最突出的颜色。
此扩展程序是免费的，并且 现在可从 Chrome 网上应用店获取。 以下是如果您想看看它实际运行的快速视频演示
接下来是什么
我为自己制作了 Colorpeek。 我保持了它的范围很小，这样我就可以快速使用它。 从这个意义上说，该项目是“完成”的。 但我是一个有无数想法的修补匠。 如果有受众，我非常希望让颜色分享和协作变得更加容易。
如果您想了解未来会发生什么，可以关注 Twitter 上的 @Colorpeek。
感谢 Tyler，
非常优雅的 Web 应用程序和 Chrome 扩展程序，更不用说也很有用。 我将尝试将其整合到我的工作流程中。
期待明天关于您如何构建 Chrome 扩展程序的文章。
真是个好产品。 这应该可以为每个人节省大量时间。 我不得不说，我更希望它是一个 Firefox 扩展程序，因为那是我的首选开发环境，我只是更喜欢 Firebug，但我认为我会经常使用它。 好样的，Tyler。 标志也很棒。
这真的很好——是的，标志太棒了！ 感谢分享。 我现在正在下载扩展程序。
这看起来很棒——而且非常有用，对我来说也是恰逢其时 :)
我会现在就试试——谢谢！ :)
识别页面上的所有颜色真的很酷。 我一直在使用更书呆子的 Chrome 开发工具片段 AllColors.js 来做类似的事情 http://bgrins.github.io/devtools-snippets/
我一直使用 http://colorto.me 来与他人分享调色板。 该网站甚至提供了一种方法来下载简单的颜色色板图像，设计师可以将其导入 Illustrator 或 Photoshop 中。
到 Marc Roman (conceived.nl) 的链接不起作用。
它产生了一些很棒的匹配颜色。 非常好，而且很有帮助
说真的，我喜欢您分享色调的概念，很棒的 Web 应用程序。 我会在我的下一个设计中查看您的颜色库，我相信它会非常有用。
感谢，Tyler，干杯。
很棒的工具！ 我喜欢它 :) 非常感谢您创建它！ 我希望您继续开发这个方便的工具，而且……您免费制作它真是太棒了！
不错的工具。 我会将其添加到我的 Chrome 中，看看它的效果。 到目前为止，我一直在使用 ColorZilla，它做得很好。 您的工具更多，我认为我会开始使用它。 谢谢！
这看起来很棒！ 我现在要安装并尝试一下。 太棒了，谢谢！ :)
真是个很棒的工具！ 非常非常有用……感谢您写这篇很棒的文章，Tyler！
看起来它不是 100% 准确。并非所有颜色都被选中。我对 css-tricks.com 网站首页进行了实验。对于红色，它显示为 #FF0000，但实际上它根本不是 #FF0000，页面上还有许多其他红色变体（某些文本框的标题，广告中的红色：WUFOO，Foxycart）。或者这个工具可能在做一些对我来说不太明显的事情。
顺便说一句，我喜欢这个概念。如果它可以像 Illustrator 的吸管工具一样选择单色，那就太好了。也许有其他工具，但我通常会截取包含所需颜色的区域的屏幕截图，将图像放入 Illustrator 文档中，创建任何形状，选择吸管工具并将该颜色分配给形状。我认为你的工具在 Illustrator 之外执行相同操作。
太棒了，我最近用它做了一个模拟 ;)
Topstyle 编辑器（不幸的是仅限 Windows）有一个很棒的功能，其他编辑器都没有。对于一个打开的 CSS 文件，你可以启用一个窗口，列出文件中的每种颜色及其色样。对于这篇博文中的问题，你可以简单地编写一个基本的 CSS 文件，列出所有颜色，它会创建色样。然后你可以将该文件传递给开发人员，他们可以使用它作为起点。
它还会列出每种颜色的数量和选择器，所以当你继承一个凌乱的网站时也非常有用。开发人员可能会对类似的颜色进行错误采样，因此你可以合并它们，非常轻松地减少颜色数量。
它还可以作为锚点列表跳到特定选择器，当你需要更改配色方案时非常有用，尤其是在网站很复杂的情况下。例如，购物车通常定义了大量颜色，但很难在实际网站中找到它们（网站页面/路径太多），如果你不熟悉它的话。
太棒了，视频中的解释很棒，我立刻安装了 Chrome 扩展程序。感谢开发这个方便的工具！
谢谢！太棒了！
很棒的工具！我唯一总是想做的事情是点击颜色并获得颜色选择器。是的，我可以在开发工具中做到这一点，但对我来说，这是一个不错的功能。
很棒的网络应用。我肯定会使用它。
未来请求：能够对颜色进行注释。“这是边框”、“这是选项卡”、“主链接颜色”、“悬停链接颜色”等等。这样我们就可以将其用作网站的完整参考表。
颜色拖放排序。
还可以保存调色板（对于已登录用户），并可以为调色板命名（可能还有 URL）例如：http://colorpeek.com/#myspecialsideprojectaleternatecolorshceme
太棒了！很棒的工具