色
色分類
- 基本：
-
-
メイン
-
サブ
-
ポイント
-
- 背景：
-
-
明るい
-
基本
-
暗い
-
ハイライト
-
アクティブ
-
- モノトーン：
-
-
黒
-
テキスト
-
暗い
-
基本
-
明るい
-
白
-
- 機能：
-
-
エラー・注意
-
注意背景
-
link
-
色の用途と増やし方
色の用途
| 名称 | 変数 | 値 | 属性 | 内容 |
|---|---|---|---|---|
| メインカラー | $color-key | #0b2c47 | 基本 | 対象のWEBサイト・システムのキーとなるカラーです。ブランドカラーになる場合が多いです。 |
| サブカラー | $color-sub | #231815 | 基本 | キーカラーを補助するカラーです。（キーカラーの背景にも馴染むカラーを推奨します。） |
| ポイントカラー | $color-point | #881b00 | 基本 | [※基本的には不要] ポイント、差し色となるカラーです。 （※キーカラーが目立たないなど、ポイント色に合わない場合こちらのカラーを使用します。） |
| 明るい背景 | $color-bg-bright | #f8f9fb | 背景 | [※基本的には不要] 一番明るい背景です。コンテンツを目立たせたい場合、bodyにこの背景色を入れてコンテンツを白背景にします。システムのデザインなどに利用する場合が多いです。 |
| 背景 | $color-bg | #e5ecf0 | 背景 | まとめの記述など、コンテンツと切り離して独立しても成り立つ要素の背景や、フォームUIのグループを明示する際に利用します。 |
| 暗い背景 | $color-bg-dark | #d9e0e4 | 背景 | [※基本的には不要] 背景色の中でさらにまとめたい場合に利用します。フォームUIのグループを明示する際に利用します。 |
| ハイライト背景 | $color-bg-hiligh | #dff0fa | 背景 | 背景をホバー（hover）した際にマーキングしたい場合利用します。 |
| アクティブ背景 | $color-bg-active | #374f63 | 背景 | 背景がアクティブになった際にマーキングしたい場合利用します。 |
| 黒 | $color-black | #000000 | モノトーン | 黒 |
| テキストカラー | $color-text | #2a2a2a | モノトーン | テキストに使用 |
| 暗いグレー | $color-gray-dark | #7f7f7f | モノトーン | ネガティブなボタンに使用。 |
| グレー | $color-gray | #bebebe | モノトーン | 枠線の基本となるカラー |
| 明るいグレー | $color-gray-bright | #dcdcdc | モノトーン | 非アクティブのボタンに使用。 |
| 白 | $color-white | #ffffff | モノトーン | 白 |
| リンクカラー | $color-link | #1042a4 | 機能 | リンク色に使用します。 |
| エラー・注意 | $color-caution | #b32605 | 機能 | エラーや注意書きに使用します。 |
| 注意背景 | $color-caution-bg | #f6d8d0 | 機能 | エラーや注意書きの背景に使用します。 |
| 個別名称 | $color-label-XXXXX | #XXXXXX | 機能 | ラベルなど、機能的なオブジェクトに対してのみカラー追加が可能です。 |
※色の名称は用途をベースに付けています。例えば、グレーを例にどの色を指しているか、人それぞれ認識が違ってしまう可能性に対するエラーを回避するための命名です。
色の増やし方
基本的に色を増やすことを禁止します。やむをえず、色を増やす事案が発生した際は以下の点に留意してください。
ベースとなる基本色をまず定める
ただし、明度・彩度は色相ごとに変化させて良いものとする。
同系色の中では色相の値を固定する。
明度・彩度を変化させてバリエーションを作る。