指定したWebページから、PhotoshopやSketchのカラーパレットを生成できるChromeの機能拡張 -Site Palette
Post on:2018年4月9日
指定したWebページから、使用されているカラーを抽出し、カラーパレットを生成するChromeの機能拡張を紹介します。
Photoshop, Illustrator, Sketch用のスウォッチも作成できるので、かなり便利です。

コリスで試してみた
カラーパレット生成する機能拡張は、こちら。
「Site Palette」の名の通り、サイトのカラーパレットを生成します。

カラーパレットを作成するのは簡単、その模様をアニメーションgifにしました。
Webページを表示したら、「Site Palette」をクリックするだけでOKです。あとは、ページが自動でスクロールされ、カラーパレットが生成されます。
カラーパレットの生成
生成されたカラーパレットです。

URLを発行して、共有することも可能です。もちろん、発行しなくてもOKです。

生成したカラーパレットは、Photoshop, Illustrator, Sketchなどのアプリやオンラインサービスで利用することもできます。

カラーパレットの下から選択
同じカラーを使用したアートやカルチャーを表示したり、

Google Arts & Culture
オンラインのカラーツールで、調整したり、

Coolors.co
Sketchのテンプレートとして、

Sketchのテンプレート
Adobe系のスウォッチ素材として、利用できます。

Photoshopのスウォッチ
Site Paletteのインストールは、Chrome ウェブストアからです。

sponsors