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