カラーコーディネート

導入

参考：

配色はセンスじゃなく理論でなんとかなる！ #1 基本編 | NHN テコラス Tech Blog

配色はセンスじゃなく理論でなんとかなる！ #2 活用編 | NHN テコラス Tech Blog

トーン

種類

• 最高彩度
  • ビビッド (Vivid)
• 高彩度
  • ブライト (Bright)
  • ストロング (Strong)
  • ディープ (Deep)
• 中彩度
  • ペール (Pale)
  • ソフト (Soft)
  • ダル (Dull)
  • ダーク (Dark)
• 低彩度
  • ベリーペール (Very Pale)
  • ライトグレイッシュ (Light Grayish)
  • ミドルグレイッシュ (Middle Grayish)
  • ダークグレイッシュ (Dark Grayish)
  • ベリーダーク (Very Dark)

参考：

色のイメージと心理効果 #2 | フェアリィ・スクエア

カラーコーディネートの基礎 | MEGASOFT

トーンとは？色に関する基本的な概念とカラーチャート | えまノート

トーンマップ – PCCS | 浜村拓夫

PCCS とは | DIC カラーデザイン株式会社

カラーチャート

参考：

カラーチャート – Wikipedia

調和

秩序の原理

• アイデンティティ (Identity)
• アナロジー (Analogy)
• インターミディエイト (Intermediate)
• ダイアード (Dyad)
• オポーネント (Opponent)
• スプリットコンプリメンタリ (Split Complementary)
• トライアド (Triad)
• テトラード (Tetrad)
• ペンタード (Pentad)
• ヘクサード (Hexad)

類似性の原理

• ドミナントカラー (Dominant Color)
• トーンオントーン (Tone on Tone)
• ドミナントトーン (Dominant Tone)
• トーンイントーン (Tone in Tone)
• トーナル (Tonal)
• カマイユ (Camaïeu)
• フォカマイユ (Faux Camaïeu)

明瞭性の原理

• ピコロール (Picolore)
• トリコロール (Tricolore)
• ハレーション (Halation)
• セパレーションカラー (Separation Color)

面積

• ベースカラー 70 %
• メインカラー 25 %
• アクセントカラー 5 %

参考：

ジャッドの色彩調和論 – 色相環とかトーンってどう使うの？配色のコツ | WebNAUT

まとめ

Web デザインのカラーコーディネート基礎 | CXMedia

色に関する基本と配色に困ったときの知識まとめ | コムテブログ

NCD

リンク：

イメージアナリスト – ソフトウェア／アプリ | 株式会社日本カラーデザイン研究所

新イメージスケール | 株式会社日本カラーデザイン研究所