COLUMN

コラム

CATEGORY
  • 配色で困らない配色パターン見本サイト

2018.09.03Web制作

配色で困らない配色パターン見本サイト

しまこ
しまこ

こんにちは。しまこです。
今回はデザインの配色で困ったときに参考になる配色パターン見本サイトをご紹介します。

デザインのテーマカラーは「3色」がベース

ベースカラー

背景など、最も面積を占める基本の色です。メインとアクセントの色を引き立てます。

メインカラー

サイトのテーマとなる色です。サイトの印象を決定づける重要な役割。

アクセントカラー

使用量は全体に比べると少ないものの、一番目立つ色で注目させたい、見落とされたくないポイントに使用する色。

Coolors.co

https://coolors.co/

操作が手軽で、様々な配色を直感的に見つけることができます。明度や彩度の細かい調整もできます。

uiGradients

https://uigradients.com/

美しいグラデーションの配色の時に便利なサイトです。
他のサイトだとカラーコードの情報のみですが、こちらはcssの情報も表示してくれます。

AdobecolorCC

https://color.adobe.com/ja/create/color-wheel/

指定したルールに戻づいて直感的な操作で色の組み合わせを試すことができます。
iPhone,iPad,Android向けのアプリもあります。

Color Supply

http://colorsupplyyy.com/app/

色の関係性、色を決めるだけの操作。プレビューで色々な配色パターンが表示されます。
配色方法はComplementary(補色)、Analogous(類似色)、Triad(正三角形の配色)、Split-Complement(分裂補色)、Square(四角の配色)の5種類あります。

ここで紹介した以外にも配色パターン見本サイトはたくさんあります。
配色で困ったときは色々探して試してみるのもいいかもしれません。