Color
Gnb / Lnb / Snb / Body / Buttonなど、基本的に使用されるカラー
GNB Default
Name | gnb-default |
---|---|
Hex | #f9f9f9 |
RGB | 247 247 247 0.8 |
CMYK | 03 02 02 00 |
LNB Default
SNB Default
Name | lnb-default, snb-default |
---|---|
Hex | #ffffff |
RGB | 255 255 255 |
CMYK | 00 00 00 00 |
SNB Active
Button Active
Name | snb-active, button-active |
---|---|
Hex | #7b8088 |
RGB | 123 128 136 |
CMYK | 59 48 41 00 |
Body Default
Name | body-default |
---|---|
Hex | #eeeff0 |
RGB | 238 239 240 |
CMYK | 08 06 05 0 |
Name | button-default |
---|---|
Hex | #888d94 |
RGB | 136 141 148 |
CMYK | 54 42 36 00 |
ブランドを表す固有色としてブランド全体に統一感を与え、ユーザに継続して同じ印象・メッセージを伝えることに効果的です。
Brand Color
Name | brand-color |
---|---|
Hex | #7700ee |
RGB | 119 0 238 |
CMYK | 77 81 00 00 |
伝達される情報の重要度を示すため「色の対比」が必要となります。対比の程度は背景色の明るさによって異なるため、「背景色対比の色」範囲内に該当する組み合わせを使用することを推奨します。
Default Text Color
Name | default-text-color |
---|---|
Hex | #727579 |
RGB | 114 117 121 |
CMYK | 63 53 48 01 |
背景色に対比するテキストカラーの組み合わせ
Primary text1
Name | primary-text1 |
---|---|
background | #ffffff |
text color | #333333 |
Primary text2
Name | primary-text2 |
---|---|
background | #ffffff |
text color | #767676 |
Primary text3
Name | primary-text3 |
---|---|
background | #ffffff |
text color | #b0b5b9 |
Primary text4
Name | primary-text4 |
---|---|
background | #fafafa |
text color | #767676 |
Primary text5
Name | primary-text5 |
---|---|
background | #f5f5f5 |
text color | #767676 |
Primary text6
Name | primary-text6 |
---|---|
background | #e5e5e5 |
text color | #767676 |
Primary text7
Name | primary-text7 |
---|---|
background | #c7cbd6 |
text color | #ffffff |
Primary text8
Name | primary-text8 |
---|---|
background | #32323a |
text color | #aeb2b7 |
Primary text9
Name | primary-text9 |
---|---|
background | #28282e |
text color | #aeb2b7 |
Primary text10
Name | primary-text10 |
---|---|
background | #ffffff |
text color | #53bee6 |
Primary text11
Name | primary-text11 |
---|---|
background | #ffffff |
text color | #ff6600 |
Primary text12
Name | primary-text12 |
---|---|
background | #ffffff |
text color | #ec6459 |
Primary text13
Name | primary-text13 |
---|---|
background | #1fb5ad |
text color | #ffffff |
Primary text14
Name | primary-text14 |
---|---|
background | #95b75d |
text color | #ffffff |
Primary text15
Name | primary-text15 |
---|---|
background | #88a755 |
text color | #ffffff |
Primary text16
Name | primary-text16 |
---|---|
background | #e4ba00 |
text color | #ffffff |
Primary text17
Name | primary-text17 |
---|---|
background | #fa8564 |
text color | #ffffff |
Primary text18
Name | primary-text18 |
---|---|
background | #ec6459 |
text color | #ffffff |
画面と構成要素に最もよく表示される基本色は「青緑色、灰色、および白色」です。 この色は、画面全体とコンポーネントにわたって最も広く使用されなければなりません。
Black Default
Name | black-default |
---|---|
background | #32323a |
text color | #b2b6b9 |
Black Light
Name | black-light |
---|---|
background | #5b5b64 |
text color | #b2b6b9 |
Black Dark
Name | black-dark |
---|---|
background | #28282e |
text color | #b2b6b9 |
White Default
Name | white-default |
---|---|
background | #f1f2f7 |
text color | #747475 |
White Light
Name | white-light |
---|---|
background | #fff |
text color | #747475 |
White Dark
Name | white-dark |
---|---|
background | #bebfc4 |
text color | #747475 |
Gray Default
Name | gray-default |
---|---|
background | #f5f5f5 |
text color | #747475 |
Gray Light
Name | gray-light |
---|---|
background | #fff |
text color | #747475 |
Gray Dark
Name | gray-dark |
---|---|
background | #bebfc4 |
text color | #e8e8e8 |
赤は「危険」、緑は「安全」、黄は「注意」を意味する世界共通の色彩です。
Safety Color RED
Name | safety-color-red |
---|---|
RGB | 158 11 15 |
Meaning | エラー、停止、危険、不可 |
Safety Color GREEN
Name | safety-color-green |
---|---|
RGB | 0 166 81 |
Meaning | 安全、進行、継続、成功 |
Safety Color YELLOW
Name | safety-color-yellow |
---|---|
RGB | 255 204 102 |
Meaning | 注意、警告 |