デザインのカラーパレットを決める際に、別なものからインスピレーションを得たいと考えないでしょうか。格好良いロゴがあったなら、そこで使われている色情報をベースに、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.