我们构建了一个从网站 URL 识别颜色并生成 CSS/Sass 代码调色板的工具
我们构建了一个从网站 URL 识别颜色并生成 CSS/Sass 代码调色板的工具
alwane.io
作为前端开发人员，我总是问如何在不使用开发工具的情况下获得网站的代码调色板，因此我尝试了多个浏览器扩展，但结果不正确。我们决定和我的工作伙伴一起构建该工具。所以我们花了 14天 从原型到制作 https://alwane.io .
alwane.io 是一个基于 Web 的工具，使您能够从网站 URL 或现有 CSS 代码中提取颜色、重新组合/排序颜色，然后生成包含 CSS/Sass 文件的调色板。一个简单方便的工具，用于构建下一个项目的颜色、获取灵感并检查您网站的调色板。
an example of extracting colors values from spotify.com
工具说明
这是一个简单的 Web 应用程序，可帮助您为项目生成调色板。它使用颜色排序算法从网站的 CSS 或任何其他现有 CSS 代码中收集颜色，并将它们重新组合成颜色类。
然后，您可以订购这些颜色，生成 CSS 或 SASS 代码，并开始在您的项目中使用它。该工具还提供了一些其他有用的功能：
- 颜色可以从现有的 CSS 代码（网站使用的代码）或任何其他 CSS 代码中提取。
- 颜色可以从十六进制代码列表中排序和重新组合。
- 颜色可以成组保存：因此，您可以创建多个颜色列表，以便轻松管理它们。
当每组包含来自不同网站或项目的颜色并且您希望单独跟踪所有内容时，这非常方便。 - 您可以完全控制托盘，您可以在其中移除一种颜色或一组颜色。
以及我们如何处理颜色分类
我们首先通过分析代码和拉取代码来提取代码 十六进制/rgb/rgba 代码；作为起点，每种颜色之间的差异是使用 Delta 和 CIE 2000 算法尽可能地匹配颜色列表。
我们使用 Delta E 作为定义色差的公式，它根据 CIELAB 或 CIELUV 等感知色彩空间中的坐标测量两种颜色之间的距离；我们用它来量化两种颜色的不同程度。它定义为：
ΔE = (ΔL / Δa)² + (ΔC / Δb)²
在哪里：
ΔL = Δa = Δc = 在整个色域中，从一个样本到下一个样本的亮度变化。
我希望你喜欢这个工具。我很乐意回答任何问题，也欢迎您的反馈。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
