配色のセンスをアップする!アクセントカラーの選び方

デザインやイラストで配色を考える時、アクセントカラーは非常に大切です。
Webデザインだと目立たせたいコンテンツやボタンに、イラストだと単調な配色を引き締めたり、アイテムや小物を際立たせることができます。

配色のセンスや知識がなくても、ベースカラーにぴったりなアクセントカラーを簡単に見つけられる方法を紹介します。

アクセントカラーの選び方

便利な無料ツールを利用しよう

無料で利用できるオンラインのカラーツールがたくさんあるので、それを使用します。

今回は無料で利用でき、登録など面倒なことも一切ない「Paletton」を使用します。

アクセントカラーの選び方: 利用するサイト

Paletton

ベースカラーを用意

まずは、ベースカラーを用意します。
2016年のトレンドカラー「Rose Quartz(ローズ クォーツ)」をベースに、アクセントカラーを選んでみます。

「Rose Quartz(ローズ クォーツ)」をベースに

Pantone Color of the Year 2016

左下の「Bese RGB」をクリックし、ベースカラーを設定します。

ベースカラーの設定

「Bese RGB」をクリック

ダイアログにローズ クォーツのRGB値「f7cac9」を入力。

RGB値を入力

RGB値を入力

「OK」ボタンをクリックすると、ベースカラーが反映されます。

ベースカラーの反映

ベースカラーの反映

ローズ クォーツの淡いピンクでベースカラーが作成されました。

アクセントカラーの選び方: その1

最初はアクセントカラーの選び方の一つとして、同一色相の補色を見てみましょう。
「add complementary」ボタンをクリックします。

補色の表示

アクセントカラー: 補色の表示

右下のエリアにアクセントカラーとして、補色が反映されました。

補色の反映

アクセントカラー: 補色の反映

ピンクの中にアクセントカラーとしてグリーンがいい感じで目立っています。

アクセントカラーの選び方: その2

アクセントカラーは同一色相による補色だけが利用できる色ではありません。他のアクセントカラーも見てみましょう。
上部の配色のルールを変更します。

配色のルールを変更

配色のルールを変更

まずは、3色の隣接色相。

3色の隣接色相によるアクセントカラー

3色の隣接色相によるアクセントカラー

パープルもなかなかいいですね!

つづいて、トライアド配色。

トライアド配色によるアクセントカラー

トライアド配色によるアクセントカラー

ブルーグレーも渋めでいい感じです。
アクセントカラーをどの色にするかは、使用するデザインや好みに合わせて選びます。

アクセントカラーのダウンロード

アクセントカラーは、Webページやグラフィックでどのように見えるか確認することができます。
右下の「Example」をクリックします。

アクセントカラーの確認

「Example」をクリック

まずは、Webページでアクセントカラーの確認。
ナビゲーションなども用意されています。

Webページでアクセントカラーの確認

Webページでアクセントカラーの確認

ボタンにアクセントカラーのグリーンが適用されて、目立っています。

グラフィックもさまざまなパターンが用意されています。

グラフィックでアクセントカラーの確認

グラフィックでアクセントカラーの確認

単調な配色に、アクセントカラーが少し加わるとよい感じに引き締まります。

作成したアクセントカラーは、さまざまなファイル形式でダウンロードできます。
右下の「Tables/Export」をクリックします。

アクセントカラーのダウンロード

「Tables/Export」をクリック

「Color List」では、HTML, CSS, LESS, Sass, XML, Text形式でダウンロードできます。

カラーリスト

カラーリスト

「Color Swatches」では、Photoshop用、GIMP用、PNG画像でダウンロードできます。

カラースウォッチ

カラースウォッチ

「Color Combinations」では、色のコンビネーションによるコントラストを確認できます。

カラーコンビネーション

カラーコンビネーション

数値が高いほどコントラストが高く、数値の変更は右下の「Min. Contrast: 数字」で変更します。

参考:
A Simple Web Developer’s Guide To Color

top of page

©2017 coliss