HEX・マンセル・日塗工を自由に行き来する
「この壁の色、Webで再現したいんだけど…」「塗装の日塗工番号から、デジタル上の色が知りたい」——そんな場面、意外とある。
デジタル世界の色表記（HEX/RGB）と、建築・塗装の世界で使われるマンセル表色系や日塗工（JPMA）コードは、まったく別の体系だ。このツールは、その橋渡しをブラウザだけで完結させる。外部サーバーにデータを送信せず、手元のブラウザだけで近似変換を実行する。カラーピッカーで直感的に選んだ色が、マンセルではどう表記されるのか、日塗工のどの番号に近いのかが、リアルタイムに分かる。
なぜこのツールを作ったのか
開発のきっかけ
外装塗装の色を決める仕事で、施主から「この写真の色に近い塗料が欲しい」と依頼されることがあった。写真からスポイトでHEXコードを拾い、それを日塗工番号に変換したい——そんな単純なことが、意外なほど面倒だった。
既存のオンラインツールをいくつか試したが、マンセル→RGBの変換はあってもRGB→マンセル→日塗工の一気通貫がない。あるいはAPI経由で使いにくかったり、英語のマニアックなサイトだったりで、現場でサッと使える道具がなかった。結局、Excelで近似表を作って手作業で照合するという非効率な方法に頼っていた。
こだわった設計判断
- 外部APIを使わない: 建設現場や打ち合わせ中にオフラインになることは珍しくない。すべてブラウザ内で完結するように設計した
- 格子点補間方式を採用: マンセル表色系は均等色空間ではないため、単純な数式変換では精度が出ない。Munsell Renotation Dataの代表的な格子点を内蔵し、逆距離加重補間で中間値を推定する方式にした
- 日塗工候補を3つ表示: 塗料は画面で見た色と実物が異なることが多い。候補を複数出すことで、実物チップと照合する際の選択肢を広げた
デザインと塗装の現場で
外装・内装の色決め打ち合わせ
施主がWebで見つけた参考画像の色を、実際の塗料番号に落とし込む場面。スポイトでHEXを拾って入力すれば、近い日塗工コードが3候補出る。実物のカラーチップと照合する出発点になる。
Webデザインでマンセル指定の色を再現
大学の色彩学や印刷業界ではマンセル表記が標準。「5PB 4/8」という指定をCSSで使えるHEXに変換したいとき、このツールなら一発で近似値が出る。
塗装業者の見積作成
日塗工カタログの色番号から、メールやPDFに添付するためのデジタル色見本を作りたいとき。日塗工コードを選べば、HEXとRGBが同時に分かる。
色のアクセシビリティチェック
背景色と文字色のコントラスト比をWCAG基準でリアルタイム判定。塗装色をWeb上で紹介する際、テキストの可読性を確認するのにも使える。
基本の使い方
たった3ステップで色変換が完了する。
Step 1: 入力モードを選ぶ
画面上部のセグメントボタンで「HEX」「RGB」「マンセル」「日塗工」の4つから選択する。使いたい色情報の形式に合わせて選んでみて。
Step 2: 色を入力する
HEXモードならカラーピッカーかテキスト入力、RGBモードなら0-255の数値、マンセルモードなら色相・明度・彩度のスライダー、日塗工モードならドロップダウンからコードを選択する。
Step 3: 変換結果を確認する
入力と同時に、HEX、RGB、マンセル近似、日塗工候補の3つが即座に表示される。カラースウォッチで視覚的に比較でき、コントラスト比も自動チェックされる。結果はワンタップでクリップボードにコピーできる。
具体的な使用例（検証データ）
マンセル格子点データに基づく近似変換のため、完全一致ではなく「十分実用的な近似値」を返す。以下に代表的なケースを示す。
ケース1: 日塗工の定番クリーム色
外壁塗装で頻出する淡いクリーム系。
入力値:
- モード: 日塗工
- 日塗工コード: 25-90A
計算結果:
- HEX: #F2EEDC
- RGB: 242, 238, 220
- マンセル: 2.5Y 9/1 近似
→ 解釈: 日塗工「25-90A」は2.5Y系の非常に明るい低彩度色。オフホワイトに近い定番の外壁色だ。
ケース2: Webの赤色 #CC3333
デザインでよく使われる鮮やかな赤。
入力値:
- モード: HEX
- HEX: #CC3333
計算結果:
- RGB: 204, 51, 51
- マンセル: 5R 5/10 付近
- 日塗工 第1候補: 05-40X (暗赤)
→ 解釈: 純粋な赤系で彩度が高い色。マンセル5R系に分類される。日塗工の暗赤に近いが、Web上のディスプレイ色と塗料は見え方が異なるので要サンプル確認。
ケース3: マンセル指定の青 5PB 4/8
色彩学でよく引用される中明度の青。
入力値:
- モード: マンセル
- 色相: 5PB, 明度: 4, 彩度: 8
計算結果:
- HEX: #32489E 付近
- RGB: 50, 72, 158 付近
- 日塗工 第1候補: 65-40T (紺)
→ 解釈: 紺に近い濃い青紫。教科書的なマンセル青で、日塗工の紺系に対応する。
ケース4: 無彩色 N5（中間グレー）
中間的な灰色。塗装の下地やアクセントに使われる。
入力値:
- モード: マンセル
- 色相: N, 明度: 5, 彩度: 0
計算結果:
- HEX: #828282 付近
- RGB: 130, 130, 130 付近
- 日塗工 第1候補: N-50 (灰色)
→ 解釈: マンセルN5は理論上の18%グレー付近。塗装では「灰色」として頻繁に使われる標準的な無彩色だ。
仕組み・アルゴリズム
採用しているアルゴリズム
本ツールは逆距離加重補間（Inverse Distance Weighting, IDW） を用いてマンセル⇄RGB の近似変換を行っている。
マンセル表色系は知覚的に均等な色空間だが、RGBやCIE XYZとは非線形の関係にある。正確な変換にはMunsell Renotation Data（マンセル再表記データ）の全格子点が必要だが、クライアントサイドで動作させるため、代表的な格子点を厳選して内蔵している。
具体的な計算の流れ
1. RGB入力 → 格子点テーブルからユークリッド距離で近い3点を取得
2. 逆距離加重で色相角・明度・彩度を補間
3. 補間結果をマンセル記法に変換
4. 日塗工テーブルからRGB距離の近い候補を3件抽出
コントラスト比の計算は WCAG 2.1 コントラスト基準 に準拠。sRGBのガンマ補正を経て相対輝度を算出し、(L1 + 0.05) / (L2 + 0.05) で比率を出す。
なぜこの方式を選んだか
完全なMunsell Renotation Dataは約4,000点以上あり、クライアントサイドに全件内蔵するとバンドルサイズが肥大化する。代表格子点＋IDW補間の方式なら、データ量を1/10以下に抑えつつ、建築・塗装用途で十分な近似精度を確保できる。将来的にはオプションで全件データを読み込むモードも追加予定だ。
変換表やカラーチャートとの違い
データを外部に送信しない
すべての計算はブラウザ内で完結する。色データがサーバーに送信されることは一切ない。機密性の高い案件の色決めにも安心して使える。
HEX・RGB・マンセル・日塗工を一画面で同期
4つの表色系を一度に確認できるツールは少ない。特に日塗工コードまでカバーしているのは、国内向けツールとしての強みだ。
スマホでもサッと使える
現場でスマホからアクセスし、写真のHEXコードを入力するだけで日塗工候補が出る。片手操作を意識した大きめのスライダーとセグメントボタンで、建設現場や塗装現場での利用を想定している。
知っておくと便利な色の豆知識
マンセル表色系の「HVC」とは
マンセル表色系は色をH（色相: Hue）、V（明度: Value）、C（彩度: Chroma）の3つの属性で表す。アメリカの画家アルバート・マンセルが1905年に考案し、JIS Z 8721として日本でも標準化されている。「5R 4/14」のように書き、「色相 明度/彩度」を意味する。
参考: 日本産業標準調査会(JISC)
日塗工番号の読み方
日塗工（にっとこう）は日本塗料工業会が策定する色見本帳の番号体系。「25-90A」のような形式で、先頭2桁が色相区分、次の2桁が明度区分、末尾のアルファベットが彩度区分を表す。建築・土木・自動車補修の現場で広く使われている。
メタメリズム（条件等色）に注意
同じRGB値でも、蛍光灯の下と太陽光の下では見え方が異なる。これをメタメリズムという。デジタル画面で確認した色と、実際に塗った色が違って見える最大の原因だ。だからこそ、最終決定は必ず実物のカラーチップで確認してほしい。
使い方のコツ・Tips
カラーピッカーを活用する
HEXコードを手入力するより、カラーピッカーで視覚的に選ぶほうが直感的。写真から拾った色コードをペーストする場合は、「#」付きで入力すること。
日塗工候補は複数確認する
第1候補が最も近い色だが、塗料は実物と画面で見え方が異なる。第2・第3候補も含めて、実物のカラーチップと照合するのがベスト。距離の値が小さいほど近い色を示す。
履歴機能で比較する
気になる色を「履歴に追加」しておけば、後から一覧で比較できる。色決めの打ち合わせで候補を絞り込むときに便利だ。
気になるポイントQ&A
Q: データはどこに保存される？
すべてブラウザ内で処理される。サーバーにデータは送信されない。履歴はブラウザのlocalStorageに保存されるので、ブラウザのデータを消去すると履歴も消える。
Q: マンセル変換の精度はどのくらい？
主要格子点の補間による近似値のため、格子点の密な領域（低〜中彩度の一般色）では実用的な精度が得られる。極端に高彩度の色や、格子点から離れた色域では精度が下がることがある。最終判断は必ず実物のカラーチップで確認すること。
Q: 日塗工番号は全件対応している？
現在は代表的な約35色を内蔵している。日塗工の全件（約600色以上）には対応していないが、近似候補として最も近い3色を提示する。将来的に全件データの追加を予定している。
Q: 画面の色と実際の塗料の色が違うのはなぜ？
ディスプレイの発光原理と塗料の反射原理は根本的に異なる。さらにメタメリズム（条件等色）により、照明環境が変わると色の見え方も変わる。このツールはあくまで近似値を提供するもので、最終的な色決定には必ず実物サンプルを使ってほしい。
まとめ
HEX⇄マンセル⇄日塗工の変換がブラウザだけで完結する、軽量な色変換ツールだ。
デジタルと塗装の「色の言葉」が通じないストレスを解消する。外装設計者、インテリアコーディネーター、塗装業者、Webデザイナー——色に関わるすべての人の手間を、少しでも減らせたら嬉しい。
コントラスト比のチェックが気になった人は、電線管サイズ判定シミュレーターのような現場向けツールも試してみて。ちょっとした計算をブラウザで片付けるツールを、これからも増やしていく。
ICCプロファイルをボツにして格子点補間を選んだ経緯は開発秘話に詳しく書いた。IDW補間の計算手順・色相角のラップアラウンド処理・ゼロ除算回避まで数値で掘り下げたい場合は技術深掘り記事を参照してほしい。
不具合や要望があれば、お問い合わせページから気軽に教えて。