#author("2021-05-08T09:12:18+09:00;2020-03-21T11:29:04+09:00","default:inoue.ko","inoue.ko") #author("2023-03-14T12:21:12+09:00;2021-05-08T09:12:18+09:00","default:inoue.ko","inoue.ko") *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/ //PrimaryColor(MainColor)とAccentColor の２色を選択すると、サイトを構成する色彩パレットが自動生成されます。CSSファイルとして DL可能です。 --https://www.materialpalette.com/colors //Click で色値がコピーされます。 -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)>https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3]] -NPO法人 カラーユニバーサルデザイン機構 http://www.cudo.jp/ ~ ***配色見本 -2色の配色パターン生成｜Hello-Color https://jxnblk.github.io/hello-color/ -２色グラデーションの生成｜Shade http://jxnblk.com/shade/ -２色グラデーションの生成｜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 ~ ~