目次

色のトーン！トーン17種類と色見本、トーンの分類を解説！トーンで調和の取れた配色を考えよう！

【 2025/07/21 20:35 更新 】
目次

色のトーン（色調）とは？｜彩度と明度をセットで表した"色の調子"

Webや教材で紹介される色のトーン17種類のイメージ

トーン（色調）とは彩度と明度をセットで表した"色の調子"のことです。

同じ色相でも、トーンの違いによって色の印象が変わります。

配色を決める際、トーンや分類を合わせることで調和の取れた配色にすることができます。

こじはな

トーンは、彩度＋明度の組み合わせのことなんだ〜！

日本色彩研究所が公式に定義している色のトーン12種類とWebや教材で紹介される色のトーン17種類のイメージ

色のトーンは、PCCS(Practical Color Co-ordinate Systemの略。日本色研配色体系)で12種類 定義しています。

Webや教材によっては、公式の12種類に加えてさらに5種類が紹介されています。

PCCSでは、色相をHue、彩度をSaturation、明度をLightnessと呼びます。

【 覚えてほしいポイント 】

  • 色相 → Hue (ヒュー)
  • 彩度 → Saturation (サチュレーション)
  • 明度 → Lightness (ライトネス)
PCCS(日本色研配色体系)について

PCCS(日本色研配色体系)は、日本色彩研究所が開発した カラーオーダーシステム のことです。

PCCSの大きな特徴は、色の三要素 を基本にして、色相(Hue)・トーン(Tone)の2軸によって物体色を分かりやすくまとめていることです。

トーンの分類

分類するトーンの対象はPCCSで定義された12種

本節"トーンの分類"で分類するトーンの対象は、日本色彩研究所によるPCCSで定義されたトーン12種とします。

日本色彩研究所が公式に定義している色のトーン12種類のイメージ

トーンをエリアごとに分類

純色調

トーンの分類である純色調のイメージ

純色調は純色で、彩度が最大の鮮やかさとなる分類のトーンです。

【 純色調のトーン 】

  • ビビット(記号:v)
  • ストロング(記号:s)

明清色調

トーンの分類である明清色調のイメージ

明清色調は純色に白を混ぜたトーンです。

【 明清色調のトーン 】

  • ブライト(記号:b)
  • ライト(記号:lt)
  • ペール(記号:p)

暗清色調

トーンの分類である暗清色調のイメージ

暗清色調は純色に黒を混ぜたトーンです。

【 暗清色調のトーン 】

  • ディープ(記号:dp)
  • ダーク(記号:dk)
  • ダークグレイッシュ(記号:dkg)

中間色調/濁色調

トーンの分類である中間色調のイメージ

中間色調/濁色調は無彩色の灰色を混ぜたトーンです。

【 中間色調/濁色調のトーン 】

  • ソフト(記号:st)
  • ダル(記号:d)
  • ライトグレイッシュ(記号:ltg)
  • グレイッシュ(記号:g)

トーンを彩度によって分類

低彩度トーン

トーンの分類である底彩度トーンのイメージ

低彩度トーンは彩度が最も低いトーンです。

【 低彩度トーン 】

  • ペール(記号:p)
  • ライトグレイッシュ(記号:ltg)
  • グレイッシュ(記号:g)
  • ダークグレイッシュ(記号:dkg)

中彩度トーン

トーンの分類である中彩度トーンのイメージ

中彩度トーンは彩度が中程度の位置にあるトーンです。

【 中彩度トーン 】

  • ライト(記号:lt)
  • ソフト(記号:st)
  • ダル(記号:d)
  • ダーク(記号:dk)

高彩度トーン

トーンの分類である高彩度トーンのイメージ

高彩度トーンは彩度が最も高いトーンです。

【 高彩度トーン 】

  • ビビット(記号:v)
  • ストロング(記号:s)
  • ブライト(記号:b)
  • ディープ(記号:dp)

トーンの種類それぞれについて

トーンの
種類ビビット(vivid)｜さえた・鮮やかな色【 純色調 】

トーンの種類ビビットのイメージ

【 ビビットの色見本 24色 】

#ff0000

#ff4000

#ff8000

#ffbf00

#ffff00

#bfff00

#aaff00

#6aff00

#40ff00

#00ff00

#00ff40

#00ff80

#00ffbf

#00ffff

#00bfff

#0080ff

#0040ff

#0000ff

#4000ff

#8000ff

#bf00ff

#ff00ff

#ff00bf

#ff0080

#ff0040

#ff0000

※各色は、彩度(Saturation)を100%、明度(Lightness)を50%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ビビットのイメージ 〜

  • 鮮やか・冴えた・派手・目立つ・生き生きした

〜 ビビットの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：100%
  • 明度(Lightness)：50%

トーンの
種類ストロング(strong)｜強い色【 純色調 】

トーンの種類ストロングのイメージ

【 ストロングの色見本 24色 】

#ec1313

#ec4913

#ec8013

#ecb613

#ecec13

#b6ec13

#a4ec13

#6dec13

#49ec13

#13ec13

#13ec49

#13ec80

#13ecb6

#13ecec

#13b6ec

#1380ec

#1349ec

#1313ec

#4913ec

#8013ec

#b613ec

#ec13ec

#ec13b6

#ec1380

#ec1349

#ec1313

※各色は、彩度(Saturation)を85%、明度(Lightness)を50%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ストロングのイメージ 〜

  • 強い・動的・情熱的

〜 ストロングの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：80%~90%
  • 明度(Lightness)：40%~50%

トーンの
種類ブライト(bright)｜明るい色【 明清色調 】

トーンの種類ブライトのイメージ

【 ブライトの色見本 24色 】

#f58989

#f5a489

#f5bf89

#f5da89

#f5f589

#daf589

#d1f589

#b6f589

#a4f589

#89f589

#89f5a4

#89f5bf

#89f5da

#89f5f5

#89daf5

#89bff5

#89a4f5

#8989f5

#a489f5

#bf89f5

#da89f5

#f589f5

#f589da

#f589bf

#f589a4

#f58989

※各色は、彩度(Saturation)を85%、明度(Lightness)を75%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ブライトのイメージ 〜

  • 明るい・健康的・陽気・華やか

〜 ブライトの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：80%~90%
  • 明度(Lightness)：70%~80%

トーンの
種類ライト(light)｜浅い色【 明清色調 】

トーンの種類ライトのイメージ

【 ライトの色見本 24色 】

#f2c0c0

#f2ccc0

#f2d9c0

#f2e5c0

#f2f2c0

#e5f2c0

#e1f2c0

#d5f2c0

#ccf2c0

#c0f2c0

#c0f2cc

#c0f2d9

#c0f2e5

#c0f2f2

#c0e5f2

#c0d9f2

#c0ccf2

#c0c0f2

#ccc0f2

#d9c0f2

#e5c0f2

#f2c0f2

#f2c0e5

#f2c0d9

#f2c0cc

#f2c0c0

※各色は、彩度(Saturation)を65%、明度(Lightness)を85%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ライトのイメージ 〜

  • 浅い・澄んだ・子供っぽい・さわやか・楽しい

〜 ライトの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：60%~70%
  • 明度(Lightness)：80%~90%

トーンの
種類ペール(pale)｜薄い色【 明清色調 】

トーンの種類ペールのイメージ

【 ペールの色見本 24色 】

#f7eeee

#f7f0ee

#f7f2ee

#f7f4ee

#f7f7ee

#f4f7ee

#f4f7ee

#f2f7ee

#f0f7ee

#eef7ee

#eef7f0

#eef7f2

#eef7f4

#eef7f7

#eef4f7

#eef2f7

#eef0f7

#eeeef7

#f0eef7

#f2eef7

#f4eef7

#f7eef7

#f7eef4

#f7eef2

#f7eef0

#f7eeee

※各色は、彩度(Saturation)を35%、明度(Lightness)を95%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ペールのイメージ 〜

  • 薄い・軽い・優しい・淡い・女性的・可愛い

〜 ペールの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：30%~40%
  • 明度(Lightness)：90%~100%

トーンの
種類ディープ(deep)｜濃い・深い色【 暗清色調 】

トーンの種類ディープのイメージ

【 ディープの色見本 24色 】

#9c1616

#9c3816

#9c5916

#9c7b16

#9c9c16

#7b9c16

#709c16

#4e9c16

#389c16

#169c16

#169c38

#169c59

#169c7b

#169c9c

#167b9c

#16599c

#16389c

#16169c

#38169c

#59169c

#7b169c

#9c169c

#9c167b

#9c1659

#9c1638

#9c1616

※各色は、彩度(Saturation)を75%、明度(Lightness)を35%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ディープのイメージ 〜

  • 濃い・深い・伝統的・和風・充実した

〜 ディープの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：70%~80%
  • 明度(Lightness)：30%~40%

トーンの
種類ダーク(dark)｜暗い色【 暗清色調 】

トーンの種類ダークのイメージ

【 ダークの色見本 24色 】

#602020

#603020

#604020

#605020

#606020

#506020

#4a6020

#3a6020

#306020

#206020

#206030

#206040

#206050

#206060

#205060

#204060

#203060

#202060

#302060

#402060

#502060

#602060

#602050

#602040

#602030

#602020

※各色は、彩度(Saturation)を50%、明度(Lightness)を25%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ダークのイメージ 〜

  • 暗い・大人っぽい・重厚感・高級感

〜 ダークの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：40%~60%
  • 明度(Lightness)：20%~30%

トーンの
種類ダークグレイッシュ(dark grayish)｜暗い灰みの色【 暗清色調 】

トーンの種類ダークグレイッシュのイメージ

【 ダークグレイッシュの色見本 24色 】

#503030

#503830

#504030

#504830

#505030

#485030

#455030

#3d5030

#385030

#305030

#305038

#305040

#305048

#305050

#304850

#304050

#303850

#303050

#383050

#403050

#483050

#503050

#503048

#503040

#503038

#503030

※各色は、彩度(Saturation)を25%、明度(Lightness)を25%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ダークグレイッシュのイメージ 〜

  • 暗い灰みの・陰気・硬い・男性的・重い

〜 ダークグレイッシュの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：20%~30%
  • 明度(Lightness)：20%~30%

トーンの
種類ソフト(soft)｜柔らかい・穏やかな色【 中間色調 】

トーンの種類ソフトのイメージ

【 ソフトの色見本 24色 】

#df9f9f

#dfaf9f

#dfbf9f

#dfcf9f

#dfdf9f

#cfdf9f

#cadf9f

#badf9f

#afdf9f

#9fdf9f

#9fdfaf

#9fdfbf

#9fdfcf

#9fdfdf

#9fcfdf

#9fbfdf

#9fafdf

#9f9fdf

#af9fdf

#bf9fdf

#cf9fdf

#df9fdf

#df9fcf

#df9fbf

#df9faf

#df9f9f

※各色は、彩度(Saturation)を50%、明度(Lightness)を75%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ソフトのイメージ 〜

  • 柔らかい・穏やかな・ぼんやりした・上品

〜 ソフトの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：40%~60%
  • 明度(Lightness)：70%~80%

トーンの
種類ダル(dull)｜鈍い・くすんだ色【 中間色調 】

トーンの種類ダルのイメージ

【 ダルの色見本 24色 】

#c65353

#c67053

#c68c53

#c6a953

#c6c653

#a9c653

#9fc653

#83c653

#70c653

#53c653

#53c670

#53c68c

#53c6a9

#53c6c6

#53a9c6

#538cc6

#5370c6

#5353c6

#7053c6

#8c53c6

#a953c6

#c653c6

#c653a9

#c6538c

#c65370

#c65353

※各色は、彩度(Saturation)を50%、明度(Lightness)を55%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ダルのイメージ 〜

  • 鈍い・くすんだ・落ち着いた・渋い

〜 ダルの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：40%~60%
  • 明度(Lightness)：50%~60%

トーンの
種類グレイッシュ(grayish)｜灰みの色【 中間色調 】

トーンの種類グレイッシュのイメージ

【 グレイッシュの色見本 24色 】

#a97070

#a97e70

#a98c70

#a99b70

#a9a970

#9ba970

#96a970

#87a970

#7ea970

#70a970

#70a97e

#70a98c

#70a99b

#70a9a9

#709ba9

#708ca9

#707ea9

#7070a9

#7e70a9

#8c70a9

#9b70a9

#a970a9

#a9709b

#a9708c

#a9707e

#a97070

※各色は、彩度(Saturation)を25%、明度(Lightness)を55%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 グレイッシュのイメージ 〜

  • 灰みの・濁った・地味・自然的・ナチュラル

〜 グレイッシュの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：20%~30%
  • 明度(Lightness)：50%~60%

トーンの
種類ライトグレイッシュ(light grayish)｜明るい灰みの色【 中間色調 】

トーンの種類ライトグレイッシュのイメージ

【 ライトグレイッシュの色見本 24色 】

#e2cfcf

#e2d4cf

#e2d9cf

#e2decf

#e2e2cf

#dee2cf

#dce2cf

#d7e2cf

#d4e2cf

#cfe2cf

#cfe2d4

#cfe2d9

#cfe2de

#cfe2e2

#cfdee2

#cfd9e2

#cfd4e2

#cfcfe2

#d4cfe2

#d9cfe2

#decfe2

#e2cfe2

#e2cfde

#e2cfd9

#e2cfd4

#e2cfcf

※各色は、彩度(Saturation)を25%、明度(Lightness)を85%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ライトグレイッシュのイメージ 〜

  • 明るい灰みの・落ち着いた・渋い・大人しい

〜 ライトグレイッシュの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：20%~30%
  • 明度(Lightness)：80%~90%

トーンの
種類ベリーペール(very pale)｜儚い・繊細な色【 PCCS定義外 】

トーンの種類ベリーペールのイメージ

【 ベリーペールの色見本 24色 】

#f8f6f6

#f8f7f6

#f8f7f6

#f8f8f6

#f8f8f6

#f8f8f6

#f8f8f6

#f7f8f6

#f7f8f6

#f6f8f6

#f6f8f7

#f6f8f7

#f6f8f8

#f6f8f8

#f6f8f8

#f6f7f8

#f6f7f8

#f6f6f8

#f7f6f8

#f7f6f8

#f8f6f8

#f8f6f8

#f8f6f8

#f8f6f7

#f8f6f7

#f8f6f6

※各色は、彩度(Saturation)を15%、明度(Lightness)を97%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ベリーペールのイメージ 〜

  • 儚い・繊細

〜 ベリーペールの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：10%~20%
  • 明度(Lightness)：95%~100%

トーンの
種類ペールグレイッシュ(pale grayish)｜控えめな・静かな色【 PCCS定義外 】

トーンの種類ペールグレイッシュのイメージ

【 ペールグレイッシュの色見本 24色 】

#e9e2e2

#e9e4e2

#e9e6e2

#e9e7e2

#e9e9e2

#e7e9e2

#e7e9e2

#e5e9e2

#e4e9e2

#e2e9e2

#e2e9e4

#e2e9e6

#e2e9e7

#e2e9e9

#e2e7e9

#e2e6e9

#e2e4e9

#e2e2e9

#e4e2e9

#e6e2e9

#e7e2e9

#e9e2e9

#e9e2e7

#e9e2e6

#e9e2e4

#e9e2e2

※各色は、彩度(Saturation)を15%、明度(Lightness)を90%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ペールグレイッシュのイメージ 〜

  • 控えめ・静か

〜 ペールグレイッシュの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：10%~20%
  • 明度(Lightness)：85%~95%

トーンの
種類ミドルグレイッシュ(middle grayish)｜穏やかな・落ち着いた色【 PCCS定義外 】

トーンの種類ミドルグレイッシュのイメージ

【 ミドルグレイッシュの色見本 24色 】

#9d7b7b

#9d847b

#9d8c7b

#9d957b

#9d9d7b

#959d7b

#929d7b

#899d7b

#849d7b

#7b9d7b

#7b9d84

#7b9d8c

#7b9d95

#7b9d9d

#7b959d

#7b8c9d

#7b849d

#7b7b9d

#847b9d

#8c7b9d

#957b9d

#9d7b9d

#9d7b95

#9d7b8c

#9d7b84

#9d7b7b

※各色は、彩度(Saturation)を15%、明度(Lightness)を55%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ミドルグレイッシュのイメージ 〜

  • 穏やか・落ち着いた

〜 ミドルグレイッシュの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：10%~20%
  • 明度(Lightness)：50%~60%

トーンの
種類ベリーグレイッシュ(very grayish)｜渋い・重厚な色【 PCCS定義外 】

トーンの種類ベリーグレイッシュのイメージ

【 ベリーグレイッシュの色見本 24色 】

#674c4c

#67534c

#67594c

#67604c

#67674c

#60674c

#5e674c

#57674c

#53674c

#4c674c

#4c6753

#4c6759

#4c6760

#4c6767

#4c6067

#4c5967

#4c5367

#4c4c67

#534c67

#594c67

#604c67

#674c67

#674c60

#674c59

#674c53

#674c4c

※各色は、彩度(Saturation)を15%、明度(Lightness)を35%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ベリーグレイッシュのイメージ 〜

  • 渋い・重厚

〜 ベリーグレイッシュの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：10%~20%
  • 明度(Lightness)：30%~40%

トーンの
種類ベリーダーク(very dark)｜濃密な・厳格な色【 PCCS定義外 】

トーンの種類ベリーダークのイメージ

【 ベリーダークの色見本 24色 】

#2c2121

#2c2321

#2c2621

#2c2921

#2c2c21

#292c21

#282c21

#252c21

#232c21

#212c21

#212c23

#212c26

#212c29

#212c2c

#21292c

#21262c

#21232c

#21212c

#23212c

#26212c

#29212c

#2c212c

#2c2129

#2c2126

#2c2123

#2c2121

※各色は、彩度(Saturation)を15%、明度(Lightness)を15%に設定しております。

※あくまで平均的な色であり、他文献やサイトによって異なります。

〜 ベリーダークのイメージ 〜

  • 濃密・厳格

〜 ベリーダークの彩度(Saturation)と明度(Lightness) 〜

  • 彩度(Saturation)：10%~20%
  • 明度(Lightness)：10%~20%

まとめ

  • トーン（色調）とは彩度と明度をセットで表した"色の調子"のこと。
  • 配色を決める際、トーンや分類を合わせることで調和の取れた配色にすることが可能。
  • トーンは、PCCS(Practical Color Co-ordinate Systemの略。日本色研配色体系)で12種類 定義している。
  • PCCSでは、色相をHue、彩度をSaturation、明度をLightnessと呼ぶ。
  • トーンにおいてエリアごとの分類として、純色調・明清色調・暗清色調・中間色調/濁色調がある。
  • 純色調のトーン：ビビット(記号:v)・ストロング(記号:s)
  • 明清色調のトーン：ブライト(記号:b)・ライト(記号:lt)・ペール(記号:p)
  • 暗清色調のトーン：ディープ(記号:dp)・ダーク(記号:dk)・ダークグレイッシュ(記号:dkg)
  • 中間色調/濁色調のトーン：ソフト(記号:st)・ダル(記号:d)・ライトグレイッシュ(記号:ltg)・グレイッシュ(記号:g)
  • トーンにおいて彩度ごとの分類として、低彩度トーン・中彩度トーン・高彩度トーンがある。
  • 低彩度トーン：ペール(記号:p)・ライトグレイッシュ(記号:ltg)・グレイッシュ(記号:g)・ダークグレイッシュ(記号:dkg)
  • 中彩度トーン：ライト(記号:lt)・ソフト(記号:st)・ダル(記号:d)・ダーク(記号:dk)
  • 高彩度トーン：ビビット(記号:v)・ストロング(記号:s)・ブライト(記号:b)・ディープ(記号:dp)
  • ビビット：彩度100%、明度50%で、鮮やか・冴えた・派手・目立つ・生き生きしたイメージを与える。
  • ストロング：彩度80%~90%、明度40%~50%で、強い・動的・情熱的なイメージを与える。
  • ブライト：彩度80%~90%、明度70%~80%で、明るい・健康的・陽気・華やかなイメージを与える。
  • ライト：彩度60%~70%、明度80%~90%で、浅い・澄んだ・子供っぽい・さわやか・楽しいイメージを与える。
  • ペール：彩度30%~40%、明度90%~100%で、薄い・軽い・優しい・淡い・女性的・可愛いイメージを与える。
  • ディープ：彩度70%~80%、明度30%~40%で、濃い・深い・伝統的・和風・充実したイメージを与える。
  • ダーク：彩度40%~60%、明度20%~30%で、暗い・大人っぽい・重厚感・高級感なイメージを与える。
  • ダークグレイッシュ：彩度20%~30%、明度20%~30%で、暗い灰みの・陰気・硬い・男性的・重いイメージを与える。
  • ソフト：彩度40%~60%、明度70%~80%で、柔らかい・穏やかな・ぼんやりした・上品なイメージを与える。
  • ダル：彩度40%~60%、明度50%~60%で、鈍い・くすんだ・落ち着いた・渋いイメージを与える。
  • グレイッシュ：彩度20%~30%、明度50%~60%で、灰みの・濁った・地味・自然的・ナチュラルなイメージを与える。
  • ライトグレイッシュ：彩度20%~30%、明度80%~90%で、明るい灰みの・落ち着いた・渋い・大人しいイメージを与える。
  • ベリーペール：彩度10%~20%、明度95%~100%で、儚い・繊細なイメージを与える。
  • ペールグレイッシュ：彩度10%~20%、明度85%~95%で、控えめ・静かなイメージを与える。
  • ミドルグレイッシュ：彩度10%~20%、明度50%~60%で、穏やか・落ち着いたイメージを与える。
  • ベリーグレイッシュ：彩度10%~20%、明度30%~40%で、渋い・重厚なイメージを与える。
  • ベリーダーク：彩度10%~20%、明度10%~20%で、濃密・厳格なイメージを与える。
【 2025/07/21 20:35 更新 】