12

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

 3 years ago
source link: https://www.uisdc.com/tailwind-ink
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

如果平常的工作和设计有关,对于色彩应该也会有一定的敏感度,若对颜色没那么熟悉,其实网络上有不少配色工具可以使用,通常会以不同方式产生调色盘,让使用者在各种颜色里快速选择取用色码,有助于降低色彩选择的难度和时间。之前推荐过一些以特定主题收录的色码表,像是 NIPPON COLORS 就有代表日本传统的 250 种颜色:

BrandColors 收录世界知名品牌使用的颜色信息:

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

qA7Fzq7.jpg!mobile

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

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

Tailwind.ink

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

使用教学

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

FfIvqe.jpg!mobile

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

EFZRvau.jpg!mobile

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

bu2UVzF.jpg!mobile

值得一试的三个理由:

  • 使用 AI 类神经网络、依照主颜色产生 100 种相关颜色
  • 依照深浅和不同色调直接在网页上预览比较
  • 产生 HEX 色码可复制后取用颜色

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK