• 登录
社交账号登录

找不到配色灵感?这个网站给你100种选择!

本文要介绍的「Tailwind.ink」是一个很有趣的色彩工具,以 AI 人工智能产生调色盘,依照说明,这个工具利用 Tailwindcss(CSS 框架)训练程序学习,当用户开启网站、选择特定色调,Tailwind.ink 就会依照该色码产生 100 种相关色,像是偏向特定颜色或是加入深浅的渐变色,全部列在网页中就能轻松找到更合适的色码。

找不到配色灵感?这个网站给你100种选择!

Tailwind.ink 也是一项开源项目,如果需要可下载源码,依照说明调整为更符合自己需求的色彩产生器。

对于在选色时可能会遇到「颜色再深一些」或「偏向黄绿一些」这类情境,Tailwind.ink 能让使用者在配色时有更多更为弹性的组合方式,如果你透过色彩工具依然找不到适合的颜色,总是会有一点点差异,可以试试看以类神经网络训练出来的配色服务,可能更容易击中你的需求。

Tailwind.ink

网站链接:https://tailwind.ink/

使用教学

开启 Tailwind.ink 预设会是蓝色为主要颜色,右侧会显示依照该颜色预测出来的调色盘。

找不到配色灵感?这个网站给你100种选择!

在左上角的调色工具选择你想使用的主颜色后右侧色彩会实时更新,每个颜色名称下方会有对应的十种深浅变化,当然你也可以直接输入特定色码,套用你输入的色码来看看 Tailwind.ink 会产生哪些颜色。

找不到配色灵感?这个网站给你100种选择!

蛮有趣的是这些颜色组合都呈现一定规则的变化,无论是从浅到深、或是不同的色系,都能在单一页面进行预览或是比较,点选左上角的「Aa」可以在色块上显示文字,检查该背景显示深浅文字是否有良好的可阅读性和辨识性。

找不到配色灵感?这个网站给你100种选择!

值得一试的三个理由:

  • 使用 AI 类神经网络、依照主颜色产生 100 种相关颜色

  • 依照深浅和不同色调直接在网页上预览比较

  • 产生 HEX 色码可复制后取用颜色

找不到配色灵感?这个网站给你100种选择!(图5)
收藏