PCCS⇄HEX⇄マンセル変換ツール

「この色、PCCSだと何トーン？」が3秒で分かる

色彩検定の勉強中、教科書にある「v12」を見て、実際に何色なのか即座にイメージできるだろうか。逆にWebデザインで使った#2A8FBDが、PCCSではどのトーン・色相に分類されるのか。PCCSとHEX、マンセルの間を行ったり来たりする作業は、思った以上に面倒だ。

このツールは、PCCS（トーン記号＋色相番号）・HEX/RGB・マンセル値をリアルタイムで相互変換する。カラープレビューとトーンマップ付きで、「この色はPCCSだとどこに位置するのか」が一目で分かる。

なぜPCCS⇄HEX⇄マンセル変換ツールを作ったのか

静的な変換表では限界がある

PCCSとマンセルの対応表は検索すればいくつも見つかる。だが多くは静的なPDF画像やHTMLテーブルで、目的の色を探すのに時間がかかる。しかも「HEXコードから逆引きでPCCSトーンを知りたい」という方向には対応していないものがほとんどだった。

色彩検定1級の2次試験対策をしていたとき、PCCSカラーカードとWebの色を照合する作業を何度も繰り返した。変換表を目で追う手間が積み重なり、「双方向でリアルタイムに変換できるツールがあれば……」と思ったのが開発のきっかけだ。

こだわった設計判断

• トーンマップのビジュアル選択: ドロップダウンだけでなく、明度×彩度の2Dグリッドから直感的にトーンを選べるようにした。PCCSの「トーン」という概念を視覚的に理解するのに役立つ
• CIE Lab色差でΔE表示: 近似変換の精度を数値で示すことで、「どの程度ズレているか」を定量的に把握できる。ΔE=0なら完全一致、5以上は明らかに違う色だと分かる
• 3系統の双方向変換: PCCS→HEX、HEX→PCCS、マンセル→PCCSのどの方向からもアクセスできる。試験勉強、デザインワーク、印刷指定など用途ごとに入口が違うことを意識した

PCCSとは何か — 日本の色彩教育を支える配色体系

PCCS（Practical Color Co-ordinate System）の概要

PCCSは、1964年に一般財団法人 日本色彩研究所（日本色研）が開発した実用的な配色座標系だ。正式名称は「日本色研配色体系」。色を**色相（Hue）とトーン（Tone）**の2つの属性で整理する点が最大の特徴で、マンセル表色系の色相・明度・彩度の3属性モデルとは異なるアプローチをとる。

分かりやすく言えば、PCCSは「明度と彩度をまとめてトーンという概念で扱う」体系だ。たとえば「鮮やかな赤」を表すのに、マンセルでは「5R 4/14」のように3つの数値を使うが、PCCSでは「v1」の2つの記号で済む。v（ビビッド）がトーン、1が色相番号だ。

24色相環

PCCSの色相環は24色相で構成される。マンセルの40色相より少ないが、日本の色彩教育ではこの24区分が標準的に使われている。色相番号1の赤から始まり、橙・黄・緑・青・紫を経て24で一周する。

各色相番号にはマンセル色相の対応値がある。たとえば：

• 1番（赤）→ マンセル 2R付近
• 6番（黄）→ マンセル 7Y付近
• 13番（青）→ マンセル 5B付近

この対応関係を頭に入れておくと、PCCSとマンセルの行き来がスムーズになる。

12トーンの体系

PCCSの真価はトーン分類にある。有彩色を12のトーンに分類し、それぞれに略号を割り当てる：

トーン	略号	明度	彩度
ビビッド	v	中	高
ブライト	b	高	やや高
ストロング	s	中	やや高
ディープ	dp	やや低	やや高
ライト	lt	高	中
ソフト	sf	やや高	やや低
ダル	d	中	やや低
ダーク	dk	低	中
ペール	p	高	低
ライトグレイッシュ	ltg	やや高	低
グレイッシュ	g	中	低
ダークグレイッシュ	dkg	低	低

無彩色は白（W）・灰（Gy）・黒（Bk）の3段階だ。

この12トーンを明度と彩度の2軸で配置した図がトーンマップで、PCCSの理解には欠かせない。本ツールのトーンマップ機能は、まさにこの概念を操作可能にしたものだ。

参考: 日本色彩研究所（公式）

色彩検定とデザイン業務で表色系変換が必要になる理由

試験対策の実際

色彩検定の1級2次試験では、PCCSのカラーカードを使って配色を構成する実技が出題される。過去問の解説や参考書ではマンセル値やHEXで色が示されることがあり、それをPCCSのトーンと色相に読み替える能力が問われる。

この変換を手作業でやると、「5PB 4/8はPCCSだとs14あたりか……」と推定計算が必要になる。間違えれば配色の方向性がずれてしまう。変換ツールを使えばこの確認が瞬時にでき、暗記の検証にも使える。

デザイン業務での変換需要

インテリアコーディネーターや印刷デザイナーは、クライアントが「マンセル値で指定した色」をPCCSベースのカラーチャートに照合する場面がある。建築仕上げの色指定（マンセル）と、プレゼン資料の配色（PCCS的な感覚）を往復する作業では、変換精度と速度が業務効率に直結する。

こんな場面で活躍する

色彩検定の暗記チェック

「lt8って何色だっけ？」と迷ったとき、PCCSモードで入力すれば即座にカラープレビューとHEXが表示される。カラーカードが手元になくても、ディスプレイ上で色を確認できる。

デザインカンプの色指定

Figmaで使っている#5B9BD5をPCCSで分類すると何トーンか。HEXモードで入力すれば、最も近いPCCSトーンが色差付きで分かる。

教材制作・授業準備

PCCSの仕組みを教える際、トーンマップを実際に操作しながら「明度が上がるとペール寄りになる」と説明できる。静的なスライドよりもインタラクティブな理解が得られる。

印刷物の色チェック

マンセル値で指定された塗装色が、PCCSのどのトーンに近いか確認。建築・インテリア分野でマンセルとPCCSが混在する場面を橋渡しする。

基本の使い方

3つの入力方式で、どの方向からでも変換できる。

Step 1: 入力方式を選ぶ

「PCCS」「HEX」「マンセル」の3つから入力モードを選択する。

Step 2: 色を指定する

• PCCS: 色相番号（1-24）とトーン（v, s, b, dp, lt, sf, d, dk, p, ltg, g, dkg, W, Gy, Bk）を選択
• HEX: #RRGGBB形式で入力するか、カラーピッカーで色を選ぶ
• マンセル: 「5R 5/10」のように色相・明度/彩度を入力

Step 3: 結果を確認する

入力と同時にカラープレビュー、変換結果（PCCS/HEX/RGB/マンセル）、近似候補5件が表示される。トーンマップと色相環をクリックして、隣接するトーンの色も探索してみて。

具体的な使用例（検証データ）

ケース1: 色彩検定の暗記確認

入力: PCCS v2（ビビッド・赤みの橙）

結果:

• HEX: 近似値が即座に表示
• マンセル: 7R付近の対応値
• ΔE: 0に近ければPCCS色票の色に忠実

→ 解釈: カラーカードの色をディスプレイ上で確認できる。暗記が正しいか照合する用途に最適。

ケース2: WebデザインのHEXからPCCS分類

入力: HEX #2196F3（Material DesignのBlue 500）

結果:

• 最近似PCCS: b13付近（ブライト・青）
• ΔE: 数値で近似精度を確認

→ 解釈: Googleのマテリアルカラーは明るく鮮やかな青で、PCCSではブライトトーンに分類される。配色理論の学習に使える。

ケース3: マンセル指定の建築色をPCCS参照

入力: マンセル 5Y 8/6（淡い黄色）

結果:

• 最近似PCCS: lt6付近（ライト・黄）
• HEX: 近似値が表示

→ 解釈: 建築仕様書でマンセル指定された壁色が、PCCSのライトトーンの黄系に対応すると分かる。インテリアコーディネートの参考になる。

ケース4: 無彩色の変換

入力: PCCS Gy（グレイ）

結果:

• HEX: #828282付近
• マンセル: N5.5
• 色相番号: 無彩色（色相なし）

→ 解釈: 無彩色の場合、色相番号は表示されずトーンのみで表現される。これはPCCSの仕様通りの挙動だ。

ケース5: 高彩度の蛍光色系

入力: HEX #00FF00（純緑）

結果:

• 最近似PCCS: v9付近（ビビッド・緑）
• ΔE: やや大きい値

→ 解釈: ディスプレイ上の純緑はPCCSの色域を超えている。ΔEが大きいのは正常な挙動で、PCCS色票ではここまで鮮やかな緑は再現できない。

ケース6: ペールトーンの淡い色

入力: PCCS p18（ペール・赤紫）

結果:

• HEX: 淡いピンク〜ラベンダー系
• マンセル: 10P 8.5/3付近

→ 解釈: ペールトーンは明度が高く彩度が低い。パステルカラーの配色検討に便利。

仕組み・アルゴリズム

採用した変換方式

PCCS→マンセルの対応は、日本色研の公式データに基づく近似マッピングを使用している。各PCCS色（24色相×12トーン＋無彩色3トーン）に対して、対応するマンセルの色相・明度・彩度を割り当て、そこからRGBへ変換する。

マンセル→RGBの変換には、Munsell Renotation Dataの代表格子点を使った逆距離加重補間を採用した。格子点間の色は、RGB空間での3点補間で近似する。

CIE Lab色差によるΔE計算

HEXやマンセルからPCCSの最近似色を検索する際、**CIE Lab色空間でのΔE*ab（CIE76）**を使用する。計算の流れは：

RGB → sRGBリニア化 → XYZ (D65白色点) → CIE Lab
ΔE = √((L1-L2)² + (a1-a2)² + (b1-b2)²)

全291色（24×12＋3）とのΔEを計算し、小さい順にソートして上位5件を候補として表示する。

なぜCIE76を選んだか

色差の計算にはCIE76、CIE94、CIEDE2000など複数の方式がある。精度ではCIEDE2000が優れるが、計算コストが高い。本ツールでは291色の全件検索をリアルタイムで行うため、計算速度と十分な実用精度のバランスからCIE76を採用した。日常的な色の比較ではCIE76で十分な近似結果が得られる。

参考: CIE色差（Wikipedia）

既存の変換表サイトとの違い

双方向リアルタイム変換

多くの変換サイトはPCCS→マンセルの一方向テーブルだ。本ツールはHEX→PCCS、マンセル→PCCSの逆方向変換にも対応し、入力と同時に結果が更新される。

ΔE数値による精度の可視化

近似変換の「どのくらいズレているか」を数値で示す。ΔE=2以下なら色票との差はほとんど分からないレベル、5以上は明らかに異なる色だと判断できる。

トーンマップとの統合

明度×彩度の2Dグリッドから直感的にトーンを選べる。PCCSの概念理解と実際の操作が同時にできる点は、学習ツールとしての価値を高めている。

PCCS配色の歴史と進化

日本色研配色体系の誕生

PCCSは1964年に日本色研が発表した。それ以前の日本の色彩教育はマンセルやオストワルト体系が中心だったが、「配色」を体系的に扱うには不便だった。PCCSはトーンという概念を導入することで、「同じトーンの色同士は調和する」という配色原理を直感的に操作可能にした。

この「トーンによる配色」の考え方は、日本の色彩検定や各種デザイン教育のカリキュラムに深く浸透している。国際的にはマンセルやNCSが主流だが、日本のデザイン教育ではPCCSが事実上の標準だ。

マンセルとの関係

PCCSの色相環はマンセルの色相を基盤としている。24色相の各値にはマンセル対応値が定められており、変換が可能だ。ただし完全な1対1対応ではなく、特に高彩度域では色域の違いから誤差が生じる。本ツールのΔE表示は、この誤差を可視化するために設けたものだ。

参考: PCCS（Wikipedia）

変換精度を上げるコツ

Tip 1: まず近い色相番号を絞り込む

HEXモードで入力したとき、近似候補が5件表示される。最上位だけでなく2位以降も見て、色相のどちら側にズレているかを確認すると、PCCSの理解が深まる。

Tip 2: トーンマップで隣接トーンを比較する

PCCSモードでトーンマップをクリックすると、選択中のトーンがハイライトされる。上下左右の隣接トーンとの色の違いを目で比較できるので、トーンの特徴を感覚的に覚えるのに役立つ。

Tip 3: 無彩色はトーンのみで指定する

PCCS入力でW（ホワイト）・Gy（グレイ）・Bk（ブラック）を選ぶと、色相番号は無視される。無彩色の場合、色相環は意味を持たないためだ。マンセルのN5とPCCSのGyが対応する。

PCCS変換でよくある疑問

Q: PCCS→HEXの変換精度はどの程度？

PCCSの各色は、対応するマンセル値からRGBに変換して生成している。マンセル→RGB変換は格子点補間を使った近似計算のため、ΔE（色差）が0にならない場合がある。一般にΔE=3以下であれば、実用上問題のない精度だ。高彩度域ではディスプレイの色域限界もあり、やや大きな色差が出ることがある。

Q: マンセルの色相表記「7R」はPCCSの何番に対応する？

マンセルの7RはPCCSの色相番号2（赤みの橙）に最も近い。ただし完全な一致ではなく、PCCS24色相とマンセル40色相の分割粒度が異なるため近似対応になる。ツールのΔE値で対応精度を確認してほしい。

Q: 色彩検定でこのツールはどう使える？

1級2次試験のPCCSカラーカード配色問題の学習に活用できる。トーン記号と色相番号から実際の色を確認し、暗記が正しいか検証する用途が代表的だ。ただし試験本番ではツールは使えないので、あくまで学習補助として利用してほしい。

Q: 入力したデータは保存される？

すべての計算はブラウザ内で完結し、サーバーへのデータ送信は一切行っていない。入力した色情報がどこかに保存されることもない。安心して使ってほしい。

まとめ

PCCSのトーン・色相とHEX/RGB/マンセルの橋渡しをするツール。色彩検定の暗記確認からデザイン業務の色指定まで、表色系の変換がリアルタイムで完結する。

トーンマップと色相環の視覚的な操作で、PCCSの概念そのものへの理解も深まるはずだ。

マンセルや日塗工コードとの変換が必要な場面では、HEX⇄マンセル⇄日塗工変換ツールも併せてどうぞ。

---

不具合や要望があれば、X (@MahiroMemo)から気軽に教えて。