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

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

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

CSSの基本~スタイルシートとは
人気の赤色でホームページをデザインしている大手7社が使っている色の割合を分析
配色に悩んだときに、きっっと役立つ7つの配色技法

「Palette Creator」とは

Palette_Creator.png
ダウンロードはこちらから

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

使用方法

step1.

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

step2.

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

step3.

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

step4.

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

step5.

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

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

まとめ

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

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

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

CSSの基本~スタイルシートとは
人気の赤色でホームページをデザインしている大手7社が使っている色の割合を分析
配色に悩んだときに、きっっと役立つ7つの配色技法

このニュースに関連するカリキュラム

CSSの基本~スタイルシートとは

CSSの基本~スタイルシートとは

現在のホームページは、内容とデザインとをわけてプログラミングすることが増えています。デザイン部分を担うプログラミング言語をCSSといいます。文字サイズやレイアウトなどを細かく指定します。