VISUAL ARCHITECTURE
COLOR
スタディサプリのブランドカラーは青( #0b41a0 )です。
カラースペクトラムと使用方法
『スタディサプリ』のカラースペクトラムはブルー、白、黒で構成されています。
これらのカラーは下記の使用規定・数値規定に従って使用してください。
また、ログイン後などツールとして使用するものは青ベースの色使い(上段)、
LPや販促物など広告として使用するものは白ベースの色使い(下段)としてください。
COLOR PALETTE
カラーコード一覧
『スタディサプリ』では、多岐に渡り展開しているブランドの印象を統一するため、
使用できるカラーに制限を設けています。 ただし、この制限は最低限の枠組みであり、以下カラースケール内であれば自由に色をコントロールしていただくことが可能です。
※表示アイテムの材質や表示色の制約等でこのルールが守れない場合は、
デザイン統括Gと協議の上『スタディサプリ』の世界観がくずれないよう配慮して慎重に色を選定してください。
BRAND COLOR
『スタディサプリ』全体を通して使用するメインカラーです。
全てのクリエイティブは、このサプリブルーと調和がとれるように配色してください。
Sapuri Blue
—
HEX | #0b41a0
CMYK | C 096 / M 081 / Y 004 / K 000
RGB | R 011 / G 065 / B 160
—
PANTONE | Reflex Blue
DIC | - - - -
ACTION COLOR
アクションを促す際に使用する、彩度を高めたカラーパレットです。
Primary Color
Action Blue -
—
HEX | #2fb2ea
CMYK | C 069 / M 015 / Y 004 / K 000
RGB | R 047 / G 178 / B 234
Action Blue
—
HEX | #0ca5e6
CMYK | C 073 / M 022 / Y 002 / K 000
RGB | R 012 / G 155 / B 230
Action Blue +
—
HEX | #098cc4
CMYK | C 080 / M 036 / Y 013 / K 000
RGB | R 009 / G 140 / B 196
Secondry Color
Action Green -
—
HEX | #5acac7
CMYK | C 062 / M 000 / Y 030 / K 000
RGB | R 090 / G 202 / B 199
Action Green
—
HEX | #3ec1bd
CMYK | C 067 / M 002 / Y 034 / K 000
RGB | R 062 / G 193 / B 189
Action Green +
—
HEX | #36a4a1
CMYK | C 073 / M 020 / Y 042 / K 000
RGB | R 054 / G 164 / B 161
Spot Color
Function Purple
—
#770dfa
C 077 / M 079
Y 000 / K 000
R 119 / G 013 / B 250
Mastered Pink
—
#aa30de
C 060 / M 080
Y 000 / K 000
R 170 / G 048 / B 222
Caution Pink
—
#de30ca
C 000 / M 085
Y 000 / K 000
R 222 / G 48 / B 202
Action Light
—
#596076
C 074 / M 064
Y 045 / K 003
R 089 / G 096 / B 118
TEXT COLOR
文章を表現する際に使用する、可読性に特化したカラーパレットです。
Primary Color
Text Black
—
HEX | #24243F
CMYK | C 091 / M 091 / Y 058 / K 039 or
C 000 / M 000 / Y 000 / K 100
RGB | R 036 / G 036 / B 063
Sapuri Blue
—
HEX | #0b41a0
CMYK | C 096 / M 081 / Y 004 / K 000
RGB | R 011 / G 065 / B 160
Secondry Color
Text Sub
—
HEX | #808d96
CMYK | C 057 / M 042 / Y 036 / K 000
RGB | R 128 / G 141 / B 150
Spot Color
Text Caption
—
#afb8be
C 037 / M 024
Y 022 / K 000
R 175 / G 184 / B 190
Text Caption -
—
#dae2e5
C 018 / M 009
Y 009 / K 000
R 218 / G 226 / B 229
Caution Pink
—
#de30ca
C 000 / M 085
Y 000 / K 000
R 222 / G 048 / B 202
BACKGROUND COLOR
背景に使用する、トーンを抑えたカラーパレットです。
Primary Color
Sapuri Blue -
—
HEX | #3c67b3
CMYK | C 081 / M 060 / Y 005 / K 000
RGB | R 060 / G 103 / B 179
Sapuri Blue
—
HEX | #0b41a0
CMYK | C 096 / M 081 / Y 004 / K 000
RGB | R 011 / G 065 / B 160
Sapuri Blue -
—
HEX | #093788
CMYK | C 100 / M 089 / Y 022 / K 000
RGB | R 009 / G 055 / B 136
Ultra Blue -
—
HEX | #4696EB
CMYK | C 070 / M 035 / Y 000 / K 000
RGB | R 070 / G 150 / B 235
Ultra Blue
—
HEX | #1c80e7
CMYK | C 079 / M 047 / Y 000 / K 000
RGB | R 028 / G 128 / B 231
Sapuri Blue -
—
HEX | #155EAB
CMYK | C 089 / M 064 / Y 008 / K 000
RGB | R 021 / G 094 / B 171
White
—
#ffffff
C 000 / M 000
Y 000 / K 000
R 255 / G 255 / B 255
Sapuri White
—
#f8f9f9
C 003 / M 002
Y 002 / K 000
R 248 / G 249 / B 249
Sapuri White +
—
#d3d4d4
C 020 / M 015
Y 015 / K 000
R 211 / G 212 / B 212
Secondry Color
Ultralight Blue -
—
HEX | #e7f6ff
CMYK | C 012 / M 001 / Y 000 / K 000
RGB | R 231 / G 246 / B 255
Ultralight Blue
—
HEX | #e1f4ff
CMYK | C 015 / M 000 / Y 000 / K 000
RGB | R 225 / G 244 / B 255
Ultralight Blue +
—
HEX | #bfd0d9
CMYK | C 030 / M 014 / Y 013 / K 000
RGB | R 191 / G 208 / B 217
Ultralight Gray -
—
HEX | #e1e8eA
CMYK | C 14 / M 007 / Y 008 / K 000
RGB | R 225 / G 232 / B 234
Ultralight Gray
—
HEX | #dae2e5
CMYK | C 018 / M 009 / Y 009 / K 000
RGB | R 218 / G 226 / B 229
Ultralight Gray +
—
HEX | #bac0c3
CMYK | C 032 / M 022 / Y 020 / K 000
RGB | R 186 / G 192 / B 195
Spot Color
Light Purple
#8e7aeb
C 057 / M 055
Y 000 / K 000
R 142 / G 122 / B 235
Status Green
#5bc0d9
C 062 / M 008
Y 017 / K 000
R 091 / G 192 / B 217
Dark Blue -
#7a8092
C 060 / M 049
Y 035 / K 000
R 122 / G 128 / B 146
Dark Blue
#596076
C 074 / M 064
Y 045 / K 003
R 089 / G 096 / B 118
Dark Blue +
#4c5263
C 078 / M 069
Y 052 / K 011
R 076 / G 082 / B 099
Mastered
#ddb700
C 020 / M 031
Y 094 / K 000
R 221 / G 183 / B 000
*黄色の使用は、原則、メダルやアイコンの差し色など、文言ではなくグラフィック面でどうしても必要な時の使用に留めてください。
NG COLORS
使用禁止色領域について
トーンバランスを崩し後進的なイメージを与えるため、サプリブルーから離れたカラーの使用は禁止です。
※トーンアンドマナーのひとつである『親しみやすさ』はイラストが担保するものとします。
SPECIAL COLORS
特別使用色について
ゴールドおよびマスタードはブランド保守の観点から、以下使用方法に従って使用してください。
マスタードよりも輝度・彩度の 高いイエローの使用は原則お控え下さい。
マスタード(0~100%)の使用は原則メダル・アイコンの差し色のみに限っておりますが、リスティングバナーに関しては注目喚起の観点から、この限りではありません。
ゴールドはNo.01表記およびメダルのみ使用できます。
原則テキストへの使用は控えて下さい。
マスタードおよびゴールドの配色は全体の10%以下に抑えて下さい。