Notionアイコンカラーパレットにマッチしたカスタムアイコン用画像をImagemagickを使って自動生成してみた #Notion

先日、NotionのアイコンにNotionの公式アイコンが追加されました。毎回公式提供の画像リソースをページアイコンに適用していた手間から開放されることを意味しますが、それと同時に各カラー設定も手軽になるわけです。

社内では公式提供の画像リソースに手作業で色つけしていた人もいたようで、白黒のままだった筆者には考えつかなかったところでした。

カスタムアイコンにNotionのアイコンカラーを手軽に適用したい場合に、手軽に行うにはどうすればよいか試してみて、それなりのコマンド化まで至ったので書いてみました。

必要なもの

Imagemagickを利用します。これ一つあれば済みます。Mac環境であればhomebrewからインストールしてください。他の環境はバイナリをダウンロードします。

brew install imagemagick

作り方

Imagemagickを使ってモノクロにし、黒地の部分をアイコンのパレットの色で塗り替えます。

一つのパレットに全アイコンカラーを入れると、塗替えが期待通りにならないケースを確認しているので、アイコンカラー毎にパレットを作成しています。

カラーコードのピックアップ

Notionアイコンカラーからカラーコードをピックアップし、パレット画像を作成します。システムのライトモードとダークモードで合計20パターンです。今回はMacに標準で入っているDigital Color Meterを利用しました。

画像の複製加工

Imagemagickの設定次第ではよりくっきりした画像が作れるかもしれませんが、とりあえず見た目が分かる程度にはなればよいでしょう。

例として、いらすとやの受付イラストに対して実行した結果は以下の通り。色味の弱めな手の部分が吹き飛んでいますが、それ以外は変換されています。やや髪型が変化していますが、彩度の淡い耳によるものです。

以下実行コードになります。

難点としては、画像やパレットの色次第でやや出来上がりに違いが出てくる点です。必要に応じて色設定を変えたり、-thresholdの閾値を調整しましょう。

sh change.sh kaisya_uketsuke_woman.png

#sh
cd `dirname $0`

mkdir -p dark/
mkdir -p light/

filename=$(basename ${1})
ex=${1##*.}
monochrome=${filename}_monochrome
basefile=$fmonochrome}.${ex}

# パレット作成
convert -size 60x60 xc:"rgb(102,100,96)" xc:"rgb(255,255,255)" +append palette_light_01.png
convert -size 60x60 xc:"rgb(175,171,163)" xc:"rgb(255,255,255)" +append palette_light_02.png
convert -size 60x60 xc:"rgb(168,121,100)" xc:"rgb(255,255,255)" +append palette_light_03.png
convert -size 60x60 xc:"rgb(208,156,70)" xc:"rgb(255,255,255)" +append palette_light_04.png
convert -size 60x60 xc:"rgb(222,128,49)" xc:"rgb(255,255,255)" +append palette_light_05.png
convert -size 60x60 xc:"rgb(89,142,113)" xc:"rgb(255,255,255)" +append palette_light_06.png
convert -size 60x60 xc:"rgb(74,139,178)" xc:"rgb(255,255,255)" +append palette_light_07.png
convert -size 60x60 xc:"rgb(155,116,183)" xc:"rgb(255,255,255)" +append palette_light_08.png
convert -size 60x60 xc:"rgb(199,95,150)" xc:"rgb(255,255,255)" +append palette_light_09.png
convert -size 60x60 xc:"rgb(217,95,89)" xc:"rgb(255,255,255)" +append palette_light_10.png

basefile=${monochrome}_light
convert ${1}  -threshold 75% ${basefile}.${ex}
convert ${basefile}.${ex} -fill "rgb(102,100,96)" -opaque "rgb(0,0,0)" +dither -remap palette_light_01.png ${basefile}_01.${ex}
convert ${basefile}.${ex} -fill "rgb(175,171,163)" -opaque "rgb(0,0,0)" +dither -remap palette_light_02.png ${basefile}_02.${ex}
convert ${basefile}.${ex} -fill "rgb(168,121,100)" -opaque "rgb(0,0,0)" +dither -remap palette_light_03.png ${basefile}_03.${ex}
convert ${basefile}.${ex} -fill "rgb(208,156,70)" -opaque "rgb(0,0,0)" +dither -remap palette_light_04.png ${basefile}_04.${ex}
convert ${basefile}.${ex} -fill "rgb(222,128,49)" -opaque "rgb(0,0,0)" +dither -remap palette_light_05.png ${basefile}_05.${ex}
convert ${basefile}.${ex} -fill "rgb(89,142,113)" -opaque "rgb(0,0,0)" +dither -remap palette_light_06.png ${basefile}_06.${ex}
convert ${basefile}.${ex} -fill "rgb(74,139,178)" -opaque "rgb(0,0,0)" +dither -remap palette_light_07.png ${basefile}_07.${ex}
convert ${basefile}.${ex} -fill "rgb(155,116,183)" -opaque "rgb(0,0,0)" +dither -remap palette_light_08.png ${basefile}_08.${ex}
convert ${basefile}.${ex} -fill "rgb(199,95,150)" -opaque "rgb(0,0,0)" +dither -remap palette_light_09.png ${basefile}_09.${ex}
convert ${basefile}.${ex} -fill "rgb(217,95,89)" -opaque "rgb(0,0,0)" +dither -remap palette_light_10.png ${basefile}_10.${ex}
mv ${basefile}_*.png light/

# パレット作成
convert -size 60x60 xc:"rgb(194,194,194)" xc:"rgb(255,255,255)" +append palette_dark_01.png
convert -size 60x60 xc:"rgb(118,118,118)" xc:"rgb(255,255,255)" +append palette_dark_02.png
convert -size 60x60 xc:"rgb(157,109,90)" xc:"rgb(255,255,255)" +append palette_dark_03.png
convert -size 60x60 xc:"rgb(186,132,30)" xc:"rgb(255,255,255)" +append palette_dark_04.png
convert -size 60x60 xc:"rgb(199,111,34)" xc:"rgb(255,255,255)" +append palette_dark_05.png
convert -size 60x60 xc:"rgb(46,142,93)" xc:"rgb(255,255,255)" +append palette_dark_06.png
convert -size 60x60 xc:"rgb(46,116,193)" xc:"rgb(255,255,255)" +append palette_dark_07.png
convert -size 60x60 xc:"rgb(130,86,177)" xc:"rgb(255,255,255)" +append palette_dark_08.png
convert -size 60x60 xc:"rgb(185,61,113)" xc:"rgb(255,255,255)" +append palette_dark_09.png
convert -size 60x60 xc:"rgb(189,70,66)" xc:"rgb(255,255,255)" +append palette_dark_10.png

basefile=${monochrome}_dark
convert ${1} -threshold 75% ${basefile}.${ex}
convert ${basefile}.${ex} -fill "rgb(194,194,194)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_01.png ${basefile}_01.${ex}
convert ${basefile}.${ex} -fill "rgb(118,118,118)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_02.png ${basefile}_02.${ex}
convert ${basefile}.${ex} -fill "rgb(157,109,90)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_03.png ${basefile}_03.${ex}
convert ${basefile}.${ex} -fill "rgb(186,132,30)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_04.png ${basefile}_04.${ex}
convert ${basefile}.${ex} -fill "rgb(199,111,34)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_05.png ${basefile}_05.${ex}
convert ${basefile}.${ex} -fill "rgb(46,142,93)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_06.png ${basefile}_06.${ex}
convert ${basefile}.${ex} -fill "rgb(46,116,193)" -opaque "rgb(255,255,255)" +dither -remap palette_dark_07.png ${basefile}_07.${ex}
convert ${basefile}.${ex} -fill "rgb(130,86,177)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_08.png ${basefile}_08.${ex}
convert ${basefile}.${ex} -fill "rgb(185,61,113)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_09.png ${basefile}_09.${ex}
convert ${basefile}.${ex} -fill "rgb(189,70,66)" -opaque "rgb(0,0,0)" +dither -remap palette_dark_10.png ${basefile}_10.${ex}
mv ${basefile}_*.png dark/

あとがき

Imagemagickによる動作結果に振り回されますが、Notionのアイコン色味にた画像を自動作成できるのはなかなか便利です。

元画像ではぼやけがちな場合は、画像に境界線をつけて閾値に対して明確に拾い上げられるようにするとよいかもしれません。