Swatches for Sketch & Coolors — 颜色灵感的源泉


当我完成了一个界面的大致构想的时候,最让我为难的并不是将要使用的 Icon ,而是整套 UI 的配色方案。我也时常为一套 UI 的配色而感到为难,直到我将 Coolors 这款 App 和 Swatches 这款 Sketch Plugin 搭配使用之后 ......

Coolors

Coolors 这个 App 其实在 2015 年就在商店上架,在 2015 年末 Coolors 在不断完善算法和界面之后推出了 3.0 版本,体验也是非常不错,到今年为止用户量已经达到了 15 万,下载量也有 5 万之多。

你可以通过点击 「Generate」生成按钮,随机产生一组色卡,开发者考虑的相当周全,随机产生的色卡中可能有部分的颜色你很中意,而另外一部分你却不喜欢。于是,Coolor 为你提供了锁定部分色卡再次生成颜色的功能。

除了锁定色卡,你还可以自定义色卡。点击色卡,就可以进入编辑模式,Coolor 也很人性化的提供了 HEXHSBRGBCMYK 四种色彩模式。

底栏的四个 Icon 按钮的功能分别是:

  • 撤销:和 Sketch 一样在没有推出程序前,你可以无限的撤回直至最开始的色卡组合。
  • 导出:提供 URL、Email、PNG、PDF 四种导出方式。
  • 保存:在登陆了 Coolors 账号之后,可以将色卡保存到账号里,方便二次查看。
  • 菜单栏:包含了 「个人收藏」、「探索」

当随机产生不出自己想要的色卡组合的时候,不妨去 Browser 里看一下最热门的色卡找找灵感,或许就会有意想不到的收获。

值得一提的是,Coolors 提供了 Adobe Plugin Chrome Extension ,可是作者并没有提供 Sketch Plugin

同样,作为拥有色卡功能的 SwatchesCoolors 联动起来,会让你的颜色选择更加效率和精确。


Swatches for Sketch

Swatches 是一款色卡插件,更准确的来说,它是一个「色卡集」,在我看来这也是一款效率类的 Plugin

Swatches 插件一共只有 7 个功能按钮:

  • Menu
  • Search
  • Apply to Fill
  • Apply to Stroke
  • Add to Document Colors
  • Copy Color Code
  • Save to System Color Picker

Menu

Swatches 里包含的色卡种类十分齐全,一共有 36 种色卡组,包括了 Material、iOS、Web 等等,具体可以见 Swatches 的 Github 地址或着插件菜单。

Search

Swatches 的搜索范围不只是色彩的名称,比如搜索 Blue、Red、蕉红等等,而且插件提供搜索色值的搜索,注意搜索色值的时候请去掉「#」。

Apply to Fill

选择颜色,并直接填充到图层的功能。

Apply to Stroke

选择颜色,并填充 Border 。要使用此功能的前提是,你的图层已经具有一个 Border 。如果是一个只有 Fill 的图层也是可以使用此功能的 ( 在最新版本中作者已经修复需要切换颜色才可以填充的 Bug )。

Add to Document Colors

把颜色添加到 Document Colors 里,方便之后在其他界面或者图层中使用。

Copy Color Code

复制选中颜色的 HEX 值

Save to System Color Picker

选中颜色,并储存到 System Color Picker 里。储存后,需要重启 Sketch 在 View 里选择 Show Color 才可以看到储存的颜色

Swatches 可以和 Coolors 搭配使用,当你手机上找到你心仪的色彩组合的时候,可以再点开 Swatches 的相关设备推荐色卡进行略微调整,让整体色彩更相称,并且更加精确。


最后,感谢 Swatches 的作者 Ashung Hung 对文中出现的错误的及时纠正。

本文涉及到的相关链接:

Coolors Version v3.0.1
Swatches Version v1.0
Sketch Version 42 (36781)
Show your support

Clapping shows how much you appreciated MARTINWATERS’s story.