splashy - 画像から色情報をピックアップ
デザインのカラーパレットを決める際に、別なものからインスピレーションを得たいと考えないでしょうか。格好良いロゴがあったなら、そこで使われている色情報をベースに、Webページを作れば雰囲気のよいものができあがりそうです。 今回紹介するsplashyは画像を読み込み、そこからメインとおぼしき色情報を抽出するソフトウェアです。
splashyの使い方
元ロゴとしてこのDevRel/Asia 2020のものを使ってみました。
抽出用のスクリプトは次のようになります。
(async () => {
const splashy = require('splashy')
const got = require('got')
const url = 'https://example.com/images/logo.png'
const { body } = await got(url, { responseType: 'buffer' })
const palette = await splashy(body)
console.log(palette)
})()
抽出された色の一覧です。特徴的な色合いでしょうか。
splashyはその画像を構成している色を6色抽出します。黒や白のような、全体的に使われている色は抽出されないようです。指定はBufferで渡すので、ローカルファイルでも外部のURL上のものでも問題ありません。デザインやスライド作成時に組み合わせると便利でしょう。
splashyはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
microlinkhq/splashy: Given an image, extract predominant & palette colors.