SketchでSolarizedカラーパレットを作ったよ

3990 ワード
sketch solarized solarized テキストリンク

Viibarアドベントカレンダー、本日12/8は@ngtkがゆるゆると書きます。

LT;DR

SketchでSolarizedカラーパレットを作ったよ

モチベーション

SketchでSolarizedのカラーパレットが欲しいとふと思った。
というのもSketchでterminal.appの絵を描く必要があったから。

さてやってみる

まず何が欲しい？

本当はパレットにカラーがセットされているというのが理想なんだけど、カラーパレットを管理する機能はSketchにないみたいだ。(あったらこっそり教えてっ！)
そこで、サンプルのオブジェクトがあってそのオブジェクトから色を参照できたら良いと考えた。

すでにある？

単純に需要がないからだと思うけどが、特にそれっぽいものは見当たらなかった。
公式も見てみたが勿論ない。

カラーサンプルを作るプラグイン

任意のカラーHEX配列からカラーサンプルを作るSwathesというプラグインが存在した。
どうやらこれを使えば求めるものが作れるようだ！

とすると

となる。素敵。

Solarized カラーテーブル

さて、となればあとはHEX配列を見つければ作れる！簡単。
公式より引用。

SOLARIZED HEX     16/8 TERMCOL  XTERM/HEX   L*A*B      RGB         HSB
--------- ------- ---- -------  ----------- ---------- ----------- -----------
base03    #002b36  8/4 brblack  234 #1c1c1c 15 -12 -12   0  43  54 193 100  21
base02    #073642  0/4 black    235 #262626 20 -12 -12   7  54  66 192  90  26
base01    #586e75 10/7 brgreen  240 #585858 45 -07 -07  88 110 117 194  25  46
base00    #657b83 11/7 bryellow 241 #626262 50 -07 -07 101 123 131 195  23  51
base0     #839496 12/6 brblue   244 #808080 60 -06 -03 131 148 150 186  13  59
base1     #93a1a1 14/4 brcyan   245 #8a8a8a 65 -05 -02 147 161 161 180   9  63
base2     #eee8d5  7/7 white    254 #e4e4e4 92 -00  10 238 232 213  44  11  93
base3     #fdf6e3 15/7 brwhite  230 #ffffd7 97  00  10 253 246 227  44  10  99
yellow    #b58900  3/3 yellow   136 #af8700 60  10  65 181 137   0  45 100  71
orange    #cb4b16  9/3 brred    166 #d75f00 50  50  55 203  75  22  18  89  80
red       #dc322f  1/1 red      160 #d70000 50  65  45 220  50  47   1  79  86
magenta   #d33682  5/5 magenta  125 #af005f 50  65 -05 211  54 130 331  74  83
violet    #6c71c4 13/5 brmagenta 61 #5f5faf 50  15 -45 108 113 196 237  45  77
blue      #268bd2  4/4 blue      33 #0087ff 55 -10 -45  38 139 210 205  82  82
cyan      #2aa198  6/6 cyan      37 #00afaf 60 -35 -05  42 161 152 175  74  63
green     #859900  2/2 green     64 #5f8700 60 -20  65 133 153   0  68 100  60

HEXだけかき集めるとこんな感じ。

#002b36, #073642, #586e75, #657b83, #839496, #93a1a1, #eee8d5, #fdf6e3, #b58900, #cb4b16, #dc322f, #d33682, #6c71c4, #268bd2, #2aa198, #859900

やるぞ

やりきった後の様子。
Color nameのところに名前を記入して完成。

この後やりたいこと

Material Design Color Paletteプラグインつくった - MOL みたいな感じでplugin化とかやってみたい。