RGBカラーモードにする
RGBは光の3原色を表している。WEBは光で色を表現しているためRGBカラーモードを使用
モニターによって色が異なる
変化が起きにくい「WEBセーフカラー」というものがある。
いまは必ず使わなきゃいけないわけではないが知っておくといいだろう。
photoshopのカラーピッカーで確認することが出来る。
人によって見え方が異なる
色覚の違いがある。photoshopで見え方を確認することもできる。（表示>校正設定>**色覚）
WEBデザインの配色
ベースカラー：メインカラー：アクセントカラー ＝ 70:25:5
（メインカラーやアクセントカラーは複数職でもいいが比率は守るといい）
使用する写真とトーンを合わせると統一感がでる
ボタンの色には補色のうち暖色系の色を使うといい
メインカラー
ロゴ・商品イメージ・ターゲット層から決定
明度が高すぎない色
文字でも背景でも使用できるような色がおすすめ
ベースカラー
無彩色orメインカラーの明度を上げた色
アクセントカラー
メインカラーの補色を使用するといいアクセントになる
配色例
- 同一色相配色
単色でその色のチントやシェードを使用する - 補色色相配色（ダイアード）
ある色とその補色を使用 - 3色配色（トライアド）
色相還で正三角になるような配色 - 類似色相環配色
色相環の近い色を使用 - 分裂補色配色（スプリットコンプリメンタリー）
補色の隣にある2色の色を使用する - 4色配色
色相還で正四角になるような配色
カラージェネレーター
- Adobe Color CC
配色の種類を選ぶとおすすめの色を提案してくれる
他の人が作ったカラーパレットを見ることが出来る - HUE360
メインカラーを選ぶとおすすめの色を提案してくれる
Google拡張機能
- ColorZilla
CSSで使用されているカラーコードを表示してくれる - ColorPick Eyedropper
WEBサイト上の色をカラーコードで表示してくれる
参考サイト
- 色カラー
- COLOR NOTE
- 色見本と配色サイト-Color-Sample.com
コメント