色の数値が一致しない焦燥感
会議室のモニタに表示された青を見て、ペンを止める。現場の塗装仕様書には「5PB 4/8（マンセル）」と書かれているが、デザインツールは #1e90ff を吐き出すだけ。色見本帳をめくる指先が一瞬止まり、息が詰まるような沈黙が流れた。
目の前の色と書類の数値が一致しないことへの焦燥と、現場での判断を先延ばしにできないという切迫感が頭を占める。電卓を叩く指が止まり、ブラウザのタブを行き来する時間が5分、10分と積み重なる。色見本帳を照らす蛍光灯の下で、視線が格子点の数字に吸い寄せられる感覚が続いた。1色につき1回の発注ミスが数万円の差になる現場では、曖昧さは許されない。
この記事を読むことで、RGBやHEXからマンセル値や日塗工コードへ逆変換する際の現場要件、採用した「格子点逆距離加重補間」の理由、そしてブラウザ完結で実装するためのトレードオフがわかる。
既存ツールの限界と欠点
方向性が一方通行（マンセル→RGBのみ）
多くの公開ツールは「マンセル値からRGBへ」は提供するが、逆方向の精度保証がない。たとえば、ある青 #1e90ff を入力して「近いマンセル」を返すツールがあっても、返答は曖昧で「5PB 5/8 に近いかもしれない」といった表現に留まる。マンセル表色系は知覚均等性を重視した体系であり、RGB空間からの逆変換は単純な数式では処理できない。
業界固有コードとの乖離
日塗工（JPMA）コードや官公庁の色彩基準は現場で頻繁に参照されるが、これらとRGB/HEXを直接結びつけるツールは少ない。たとえば塗装仕様書で「日塗工 19-1234」と指定された場合、デザイナー側の #2b6cb0 と現場の色見本が一致しないことが起きる。業界固有の体系を無視した変換は運用上の齟齬を生む。
ブラウザ完結が難しい
既存の高精度変換はICCプロファイルや色管理パイプラインに依存することが多い。これらはサーバー側での処理や大きなデータセットを必要とし、現場のタブレットやオフライン環境では使えない。ブラウザで完結させるためには軽量で決定論的な手法が必要になる。
試行錯誤：設計判断の裏側
ボツ案：ICCプロファイルを用いた高精度変換
最初に試したのは「ICCプロファイルを用いた高精度変換」だった。ローカルでsRGB→XYZ→Lab→マンセル近似というパイプラインを組んだが、プロファイル差やレンダリング意図（rendering intent）による揺らぎが大きく、同一RGBでもブラウザやOSで結果が変わる問題が発生した。さらにプロファイルデータをブラウザに持ち込むと数百KB〜数MBの追加負荷が発生し、モバイルでの初回読み込みが致命的に遅くなったためボツにした。
格子点補間 vs 厳密変換
| 手法 | 精度 | 実装コスト | ブラウザ適合性 | |------|------|------------|----------------| | ICCプロファイル変換 | 高い | 高い | 低い | | 格子点逆距離加重補間（採用） | 中程度 | 低〜中 | 高い | | 機械学習回帰 | 中〜高 | 高い（学習必要） | 中 |
格子点補間を選んだ理由は、再現性と軽量性だ。マンセル格子点（40色相×9段階）を基準点として、各格子点のRGB値を事前に用意し、入力RGBに対して逆距離加重（IDW: inverse distance weighting）で重み付けしてマンセル値を推定する方式を採用した。IDWは「距離に反比例して重みを付ける」仕組みで、計算が単純で決定論的、かつブラウザのJavaScriptだけで高速に動作する。
設計思想：透明性と即時性を軸にした判断
最終設計は「透明性 ＞ 過度な精度追求」「即時性 ＞ 理論上の最小誤差」という思想に基づく。ユーザーに「どの格子点がどれだけ寄与したか」を見せることで、変換結果の信頼性を担保した。端数処理や表示精度は現場運用を優先し、丸めは「視認性と再現性」を重視して100単位での表示を基本とした。アクセシビリティ面ではWCAGコントラスト比計算を組み込み、色指定が視認性基準を満たすか即座に判定できるようにした。
完成したマンセル⇄HEXブリッジ
この問題を解決するために作ったのがマンセル⇄HEXブリッジ。ブラウザだけで即時に「現場で使える」判定と候補提示を行うツールだ。
- カラーピッカーにRGBまたはHEXを入力する
- 近傍のマンセル格子点と寄与率を確認する
- 必要なら日塗工コード候補を選んで発注用の値をコピーする
ブラウザだけで即時に「現場で使える」判定と候補提示を行うことを優先したためこの形に落ち着いた。
よくある質問（FAQ）
Q: 変換結果が境界付近で不安定に見えるときは？
入力色が境界付近にある場合、複数の格子点がほぼ同等の寄与率を持つことがある。そうしたときは寄与率上位3点を確認し、現場の照明条件（屋外/屋内）に合わせて最終決定を行うと誤差を減らせる。
Q: 格子点補間の精度はどの程度？
格子点逆距離加重補間は理論上の最小誤差を保証する手法ではないが、実務上の許容範囲に収めるために40色相×9段階の格子を用意し、各格子点のRGBは複数の測色データから平均化している。高精度が必要な場合は、出力候補を色見本帳で最終確認する運用を推奨する。
Q: データはサーバーに送信される？
すべてブラウザ内で処理される。サーバーにデータは送信されないし、ブラウザを閉じれば入力内容は消える。
Q: 現場で色を確認するときのコツは？
照明条件と塗料の光沢による見え方の差が大きい。候補を決めたら、実際の塗料で小面積の試し塗りを行い、乾燥後の色味を確認する運用を組み込むと発注ミスを防げる。
まとめ
RGB/HEXとマンセル・日塗工コードのギャップは、現場の判断を遅らせる原因になる。格子点逆距離加重補間を採用することで、ブラウザ完結かつ即時性のある候補提示を実現した。
色の確認や発注の場面ではマンセル⇄HEXブリッジを試してみて。断面性能や重量の計算が必要な場面では鋼材断面のコンシェルジュも便利。
不具合や要望があれば、お問い合わせページから気軽に教えてほしい。