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%以下に抑えて下さい。