WebDesign/Color

Color Combination

WEBサイトの配色は、ベースカラー、メインカラー、アクセントカラーの３色で考えるのが一般的で、各々の比率は70％、25％、5％程度です。 Web上の配色関連記事を見ると３つの用語は、「ベース、メイン、アクセント」、「ベース、アソート、アクセント」、「メイン、サブ、アクセント」など、様々な言い方があるようです。「メインカラー」という用語だけを単独で使うと誤解が生じる可能性があるので、３つの言葉を面積比の順に明示して使うのが賢明です。いずれも面積比 70% / 25% / 5% 程度で考えるという点では同じです。

Base Color｜70%

このカラーは主にサイトの背景にくる色で、最も大きな面積を占めます。無彩色あるいはそれに近い淡い色となるのが一般的ですが、本文の文字とのコントラストが強すぎると読みづらくなるので、相対的に検討することが必要です。

Main Color｜25%

サイトイメージを決定づける色です。色は様々な印象をもつので、サイトの主旨を考えて、適切な色を選ぶ必要があります。ロゴの色をメインカラーにするサイト、あるいはメインビジュアルとなる写真からキーカラーを抽出するケースも多いようです。

Accent Color｜5%

面積は小さいですが一番目立つ色で、ユーザーの目を引く効果があります。

Online Tools

• Material Design Color Palette Generator
  • https://www.materialpalette.com/ 　
  • https://www.materialpalette.com/colors

• Adobe Color CC
  https://color.adobe.com/ja/create

• ColorBlender.com | Your free online color matching toolbox
  http://www.colorblender.com/

• Color Code
  http://www.colourco.de/

• Paletton - The Color Scheme Designer
  http://paletton.com/

• HUE/360 The Color Scheme Application
  http://hue360.herokuapp.com/

• NIPPON COLORS – 日本の伝統色
  http://nipponcolors.com/

Color Universal Design

色の見え方は人により様々です（色覚異常、白内障、緑内障など）。Webデザインの配色を考える際は、どのような色覚を持った人にも色の識別ができるよう配慮する必要があります。カラーユニバーサルデザインは、カラーバリアフリーという言葉で説明されることもあります。

• カラーユニバーサルデザイン(Wikipedeia)
• NPO法人　カラーユニバーサルデザイン機構
  http://www.cudo.jp/

配色見本

• 2色の配色パターン生成｜Hello-Color
  https://jxnblk.github.io/hello-color/

• ２色グラデーションの生成｜Unigradients
  https://uigradients.com/

• ３色の配色パターン生成｜COLOR SUPPLY
  https://colorsupplyyy.com/app
• ３色の配色パターン生成｜Random Material Palette Generator
  https://www.threebu.it/random-material-palette/

• ４色の配色パターン生成｜Color Hunt
  https://colorhunt.co/
• ４色の配色パターン生成｜LOL Colors
  https://www.webdesignrankings.com/resources/lolcolors/
• ４色の配色パターン生成｜ColorDrop
  https://colordrop.io/

• ５色の配色パターン生成｜Coolors
  https://coolors.co/app