Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

LT;DR

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

モチベーション

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

さてやってみる

まず何が欲しい?

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

すでにある?

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

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

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

68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f732f72753933357363687a6b67776e31632f53637265656e73686f74253230323031342d31302d313725323031362e32372e32352e706e673f646c3d30 471×301 ピクセル

とすると

68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f732f36626f6d67336f6a326e36337275302f53637265656e73686f74253230323031342d31302d323325323030392e33312e35312e706e673f646c3d30 824×297 ピクセル

となる。素敵。

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のところに名前を記入して完成。
ss_sketch_solarized.png

https://github.com/ngtk/solarized-sketch-color-palette

この後やりたいこと

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

ngtk
Rubyが好きです。
http://ngtk.co
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away