Alwane 免费网站色码分析工具,透过HTML 与CSS 抓取网站使用色系

Alwane 是一款可以直接抓取某个网站配色的免费线上工具,你只需要在网站当中,输入你想要查询的网站网址,他就可以快速的抓取该网站所采用的所有色码,并且在画面中详细的将所有运用的颜色进行色系的分配,让你能够一目了然,并且附上所有色码的代号,让你可以快速的复制与取得这些颜色的代码,方便使用。

image-20220201223345818

今天介绍的「Alwane」与普通的色码抓取工具不同,他可以直接分析目标网站所使用到的所有颜色,并且以视觉化的方式呈现出来,并且还会将所有相同色系的颜色进行分组,让你一目了然。同时,他也提供CSS 与SASS(CSS 预处理器)两种显示模式,可以让你直接复制所有颜色的代码进行使用。

从任何网站提取/重新组合/订购颜色·Alwane

https://alwane.io/

简介教学

输入分析网址

进入网站之后,首先在「Website」栏位中输入要抓取的网址,接着点选Extrat Colors按钮,就可以马上分析出该网站所使用的所有颜色:

image-20220201223526780

预设会从HTML 与CSS 档案中进行分析,如果你还想更近一步的去查找JavaScript 当中所采用的颜色,可以点选「Advenced」就能显示「HTML」、「CSS」与「JavaScript」的选项,你就可以根据想要抓取得来源进行选择:

image-20220201223602221

设置群组与索引

接着在下方,你可以选择是否要将抓取出来的代码进行分组或索引的设定,最后还可以选择所显示的颜色代码是要采用CSS 或是SASS 的语法进行显示:

image-20220201223632329

切换颜色代码

在颜色抓取后的上方,你可以透过「Palette」与「Code」两者进行切换,分别是显示调色盘与颜色代码。在颜色代码的部分,会根据左下角的「Language」所选择的方式,来显示CSS 或是SASS 的代码:

image-20220201223728312

可以看到,在代码显示的方式中,除了会显示颜色代码之外,他的背景也会自动帮你显示该代码所代表的颜色,对于我们要复制来说,是非常直觉且方便的。此外,你也可以直接透过右上角的「Copy」按钮,将所有的代码复制并贴至你的颜色表当中进行使用。

© 版权声明
THE END
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容