色を瞬時に抽出して効率よくホームページを作成しよう！Chrome拡張機能「Palette Creator」の使い方

三輪　きらら

2016年4月18日

6,977

2015年卒、2年目ライター。
知っていると得する情報を発信していけるよう、日々精進します！
毎日の業務の中で気になったことを綴っているブログ、Twitterともに毎日更新しています。よろしければそちらもチェックしてみてください。
　　
>> 執筆記事一覧はこちら

ホームページを作成する際に重要な要素のひとつとして、配色があります。
色は、ホームページをみる人の心情にも影響を与えますので、ないがしろにすることはできません。
ferret内の以下の記事では、色が与える印象についてご紹介していますので、ぜひ参考にしてみてください。
【事例あり】色の効果を利用して、ホームページが与える印象をコントロールしよう｜ferret

今回は、簡単に色をチェックすることができるChrome拡張機能「Palette Creator」をご紹介します。
このツールを使用すれば、他のホームページなどで使用されている色を抽出することができますので、すぐにそのカラーコードを把握して再現することができます。
無料で使用することができますので、まずはインストールして使用してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

「Palette Creator」とは

ダウンロードはこちらから

「Palette Creator」は、Chromeで開いているホームページ等の中で使用されている画像に含まれる色を一瞬で抽出することができる、Chrome拡張機能です。
抽出した色の幅は4色から256色までカスタマイズできるほか、カラーパレットとして表示されます。

使用方法

step1.

まずは先に記載しましたダウンロード URL から、 Google Chromeへインストールします。
インストールボタンをクリックすると、アクセス権限を許可するかどうか問われますので、問題なければ「拡張機能を追加」をクリックしてください。

step2.

正常にインストールされると、画面右上にメニューバーに拡張機能が追加されたことが表示されます。
パレット型のアイコンが追加されていることが確認できれば、準備完了です。

step3.

実際に使用してみます。
色を抽出した画像を右クリックしてください。
するとメニューが表示されますので「Palette Creator」を選択します。

step4.

カラーパレットを何色表示するのか選択することができますので、任意のパレット数を選択してください。
なお、パレット数はカスタマイズすることも可能です。

step5.

パレット数を選択すると、カラーコードが表示されたパレット画面が別画面で開きます。

「COPY」をクリックすると、パレットないに表示されているカラーコードをすべてコピーすることが可能です。
「DOWNLOAD」では、カラーパレットをダウンロードすることができます。
「SETTINGS」では、カラーコードの表示書式を選択することができます。
作成するホームページの言語に合わせて、任意の表示方法を選択してください。

まとめ

ホームページ作成前に、他のホームページ等を閲覧していてイメージに沿った色を見つけた際に、その色を一から再現することはなかなか難しい作業です。
色はホームページで紹介している商品やサービス、機能のイメージカラーともなるためなんでもいいというわけではありませんので、イメージの沿った色を使用することが好ましいことも事実です。

今回ご紹介したツールを使用すれば、瞬時に色を抽出することができますでので、これからホームページを作成する方や配色にお悩みの方は活用してみることをオススメします。