配色のセンスをアップする！アクセントカラーの選び方
Post on:2016年7月14日
sponsors
デザインやイラストで配色を考える時、アクセントカラーは非常に大切です。
Webデザインだと目立たせたいコンテンツやボタンに、イラストだと単調な配色を引き締めたり、アイテムや小物を際立たせることができます。
配色のセンスや知識がなくても、ベースカラーにぴったりなアクセントカラーを簡単に見つけられる方法を紹介します。
便利な無料ツールを利用しよう
無料で利用できるオンラインのカラーツールがたくさんあるので、それを使用します。
今回は無料で利用でき、登録など面倒なことも一切ない「Paletton」を使用します。
ベースカラーを用意
まずは、ベースカラーを用意します。
2016年のトレンドカラー「Rose Quartz（ローズ クォーツ）」をベースに、アクセントカラーを選んでみます。
Pantone Color of the Year 2016
左下の「Bese RGB」をクリックし、ベースカラーを設定します。
「Bese RGB」をクリック
ダイアログにローズ クォーツのRGB値「f7cac9」を入力。
RGB値を入力
「OK」ボタンをクリックすると、ベースカラーが反映されます。
ベースカラーの反映
ローズ クォーツの淡いピンクでベースカラーが作成されました。
アクセントカラーの選び方: その1
最初はアクセントカラーの選び方の一つとして、同一色相の補色を見てみましょう。
「add complementary」ボタンをクリックします。
アクセントカラー: 補色の表示
右下のエリアにアクセントカラーとして、補色が反映されました。
アクセントカラー: 補色の反映
ピンクの中にアクセントカラーとしてグリーンがいい感じで目立っています。
アクセントカラーの選び方: その2
アクセントカラーは同一色相による補色だけが利用できる色ではありません。他のアクセントカラーも見てみましょう。
上部の配色のルールを変更します。
配色のルールを変更
まずは、3色の隣接色相。
3色の隣接色相によるアクセントカラー
パープルもなかなかいいですね！
つづいて、トライアド配色。
トライアド配色によるアクセントカラー
ブルーグレーも渋めでいい感じです。
アクセントカラーをどの色にするかは、使用するデザインや好みに合わせて選びます。
アクセントカラーのダウンロード
アクセントカラーは、Webページやグラフィックでどのように見えるか確認することができます。
右下の「Example」をクリックします。
「Example」をクリック
まずは、Webページでアクセントカラーの確認。
ナビゲーションなども用意されています。
Webページでアクセントカラーの確認
ボタンにアクセントカラーのグリーンが適用されて、目立っています。
グラフィックもさまざまなパターンが用意されています。
グラフィックでアクセントカラーの確認
単調な配色に、アクセントカラーが少し加わるとよい感じに引き締まります。
作成したアクセントカラーは、さまざまなファイル形式でダウンロードできます。
右下の「Tables/Export」をクリックします。
「Tables/Export」をクリック
「Color List」では、HTML, CSS, LESS, Sass, XML, Text形式でダウンロードできます。
カラーリスト
「Color Swatches」では、Photoshop用、GIMP用、PNG画像でダウンロードできます。
カラースウォッチ
「Color Combinations」では、色のコンビネーションによるコントラストを確認できます。
カラーコンビネーション
数値が高いほどコントラストが高く、数値の変更は右下の「Min. Contrast: 数字」で変更します。
sponsors
