デジタルの色と塗装の色、翻訳できたらいいのに
「この壁の色、Webで再現したいんだけど…」「塗装の日塗工番号から、デジタル上の色が知りたい」——そんなささやかな願いが、驚くほど叶いにくい。
デジタル世界の色表記（HEX/RGB）と、建築・塗装の世界で使われるマンセル表色系や日塗工（JPMA）コードは、まったく別の言語体系だ。英語と日本語を辞書なしで翻訳するようなもので、間に立つ「通訳」がいないと意思疎通できない。
このツールは、その通訳をブラウザだけで引き受ける。外部サーバーにデータを送信せず、手元のブラウザだけで近似変換を実行。カラーピッカーで直感的に選んだ色が、マンセルではどう表記されるのか、日塗工のどの番号に近いのかが、リアルタイムに分かる。HEX・RGB・マンセル・日塗工の4つの表色系を一画面で同期表示し、コントラスト比のWCAGチェックまで付いている。
なぜこのツールを作ったのか
開発のきっかけ
外装塗装の色を決める仕事で、施主から「この写真の色に近い塗料が欲しい」と依頼されることがあった。写真からスポイトでHEXコードを拾い、それを日塗工番号に変換したい——そんな単純なことが、意外なほど面倒だった。
既存のオンラインツールをいくつか試したが、マンセル→RGBの変換はあってもRGB→マンセル→日塗工の一気通貫がない。あるいはAPI経由で使いにくかったり、英語のマニアックなサイトだったりで、現場でサッと使える道具がなかった。結局、Excelで近似表を作って手作業で照合するという非効率な方法に頼っていた。
こだわった設計判断
- 外部APIを使わない: 建設現場や打ち合わせ中にオフラインになることは珍しくない。すべてブラウザ内で完結するように設計した
- 格子点補間方式を採用: マンセル表色系は均等色空間ではないため、単純な数式変換では精度が出ない。Munsell Renotation Dataの代表的な格子点を内蔵し、逆距離加重補間で中間値を推定する方式にした
- 日塗工候補を3つ表示: 塗料は画面で見た色と実物が異なることが多い。候補を複数出すことで、実物チップと照合する際の選択肢を広げた
- コントラスト比チェック内蔵: 塗装色をWebに掲載するとき、テキストの可読性をその場で確認できるようにした
日塗工・マンセル・HEX/RGB — 表色系の基礎知識と相互変換
色を「正確に伝える」のは、実は難しい問題だ。「赤」と言っても、朱色を思い浮かべる人もいれば、ワインレッドをイメージする人もいる。だからこそ、色を数値で記述する「表色系」が必要になる。
マンセル表色系 とは
マンセル表色系は、アメリカの画家・美術教育者アルバート・マンセルが1905年に考案した色の記述体系。色を3つの属性で表す:
- H（色相: Hue）: 赤・黄・緑・青・紫の色味。5R、10YRのように数値＋記号で表記
- V（明度: Value）: 明るさ。0（真っ黒）〜10（真っ白）の間で示す
- C（彩度: Chroma）: 鮮やかさ。0（無彩色）から色味が強くなるほど数値が増える
「5R 4/14」なら「色相5R、明度4、彩度14」を意味する。日本ではJIS Z 8721として標準化されており、建築・塗装・印刷・工業デザインなど幅広い分野で使われている。
たとえ話で言えば、マンセルは色の「住所」のようなもの。「東京都渋谷区〇〇丁目」のように、色相で「どの方角（色味）か」、明度で「何階（明るさ）か」、彩度で「道路からどれだけ離れているか（鮮やかさ）」を示す。この3つの座標で、あらゆる色に一意のアドレスを割り当てている。
HEX・RGB とは
HEXは16進数6桁で色を表す方式。#CC3333のように書く。先頭2桁が赤（R）、次の2桁が緑（G）、最後の2桁が青（B）。これはRGB（0〜255の10進数3組）を16進数に変換したもので、本質的に同じ情報を持つ。Webデザインではこの方式が標準で、CSSで直接使える。
日塗工（JPMA）コード とは
日塗工は日本塗料工業会が策定する色見本帳の番号体系。「25-90A」のような形式で、先頭2桁が色相区分、次の2桁が明度区分、末尾のアルファベットが彩度区分を表す。建築・土木・自動車補修の現場で「この色番号で塗ってください」と指定するための共通言語として、日本国内で広く使われている。
日塗工からRGB/HEX変換が必要な理由
日塗工番号をRGBやHEXに変換したい場面は多い。たとえば「日塗工25-90Aの色をWebサイトに載せたい」「図面の日塗工指定をCSSで再現したい」というケース。しかしマンセルとHEXは「色を定義する座標系」が根本的に異なる。マンセルは人間の知覚に基づく均等色空間を目指したもの、HEX/RGBはディスプレイの発光原理に基づくもの。両者の間に単純な数式は存在せず、変換には格子点データと補間が必要になる。日塗工はさらに塗料の実物に紐づいた体系なので、三者を行き来するには「色の辞書」が欠かせない。このツールはその辞書をブラウザに内蔵し、日塗工→RGB/HEX変換もワンタップで実行できる。
色指定の正確さが品質を左右する — なぜこの変換が実務で重要か
「色なんてだいたい合っていればいい」——そう思うかもしれない。しかし実務では、色指定のミスが想像以上のコストを生む。
色違いトラブルの実態
外壁塗装で施主がWebで見た参考画像の色と、実際に塗った色が違う。これは建設業界で頻発するクレーム事例だ。原因の多くは、デジタル色（HEX/RGB）と塗料色（日塗工）の変換ミスや、そもそも変換プロセスが存在しないことにある。
色違いが発覚するのは塗装後。やり直しには足場代、塗料代、人件費がすべてかかる。1面の外壁を塗り直すだけで数十万円のコスト増になることもある。「確認の手間」を惜しむ代償は大きい。
JIS規格が求める色の管理
JIS Z 8721（三属性による色の表示方法）は、色をマンセル表色系で記述する際の規則を定めている。公共工事や大規模建築では、色彩計画書にマンセル値の記載が求められることが多い。発注図面に「5Y 8/1」と書かれた色を、塗装業者は日塗工カタログから該当する番号を探して塗料を手配する。この「マンセル → 日塗工」の変換が曖昧だと、発注ミスにつながる。
デジタルと実物の乖離 — メタメリズムの影響
同じRGB値でも、ディスプレイの機種・設定・照明環境によって見え方が変わる。さらに、蛍光灯と太陽光では同じ塗料でも色味が変わる現象（メタメリズム/条件等色）がある。だからこそ、デジタル色はあくまで「近似参考値」であり、最終決定には必ず実物のカラーチップが必要になる。
このツールは近似変換の出発点を提供するもので、「これが正解」を出すものではない。しかし、出発点がなければ候補すら絞り込めない。HEXから日塗工の候補を3つに絞る——その最初の一歩を、ブラウザだけで踏み出せるのがこのツールの価値だ。
デザインと塗装の現場で活躍する場面
日塗工番号からRGB/HEXへの変換
施工図面に「日塗工25-90A」と指定された色を、Webサイトやプレゼンテーションでデジタル表示したい場面。日塗工モードでコードを選ぶだけで、対応するRGB値とHEXコードが即座に分かる。CSSにそのままペーストできる。
外装・内装の色決め打ち合わせ
施主が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の数値、マンセルモードなら色相・明度・彩度のスライダー（または「5PB 4/8」のようなテキスト直接入力）、日塗工モードならドロップダウンからコードを選択する。
Step 3: 変換結果を確認する
入力と同時に、HEX、RGB、マンセル近似、日塗工候補の3つが即座に表示される。カラースウォッチで視覚的に比較でき、コントラスト比も自動チェックされる。WCAG基準を満たす推奨文字色（白 or 黒）も自動判定されるので、看板やサインの配色にそのまま使える。結果はワンタップでクリップボードにコピーでき、URL共有ボタンで色付きのリンクを打ち合わせ相手に送ることもできる。
具体的な使用例（検証データ）
マンセル格子点データに基づく近似変換のため、完全一致ではなく「十分実用的な近似値」を返す。以下に代表的なケースを示す。
ケース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%グレー付近。塗装では「灰色」として頻繁に使われる標準的な無彩色だ。
ケース5: RGB直接入力で深緑を変換
公園や学校の外構でよく見かける落ち着いた深緑。
入力値:
- モード: RGB
- R: 34, G: 102, B: 51
計算結果:
- HEX: #226633
- マンセル: 2.5G 4/6 付近
- 日塗工 第1候補: 35-30D (暗緑)
→ 解釈: 彩度6の中程度に鮮やかな緑で、明度4と暗めの色味。フェンスやベンチなどの景観色として日塗工の暗緑系に対応する。自然に溶け込む色だが、ディスプレイ上では実物より鮮やかに見えやすいので注意が必要だ。
ケース6: HEXからベージュ系の塗装色を探す
内装で人気のある暖かみのあるベージュ。
入力値:
- モード: HEX
- HEX: #D2B48C
計算結果:
- RGB: 210, 180, 140
- マンセル: 10YR 7/4 付近
- 日塗工 第1候補: 19-70L (淡黄土)
→ 解釈: 10YR系の暖色寄りベージュで、明度7・彩度4と穏やかなトーン。CSSの「tan」に相当する色だ。内装のアクセントウォールやマンションのエントランスなど、落ち着いた空間づくりに多用される色域。日塗工の淡黄土〜ベージュ系の候補が複数出るので、実物チップで最終比較するとよい。
色変換の仕組み・アルゴリズム
候補手法の比較 — なぜ逆距離加重補間を選んだか
RGB⇄マンセルの変換を実現する方法はいくつかある。開発時に検討した3つの手法を比較する。
| 手法 | 精度 | 計算速度 | バンドルサイズ | オフライン対応 |
|---|---|---|---|---|
| 逆距離加重補間（採用） | 実用的 | 瞬時 | 小さい | 対応 |
| 完全格子点テーブル参照 | 最高 | 瞬時 | 非常に大きい | 対応 |
| 外部API（色彩計算サーバー） | 最高 | 遅延あり | 最小 | 非対応 |
完全格子点テーブル参照は、Munsell Renotation Dataの全約4,000点をクライアントに内蔵する方式。精度は最高だが、JSONデータだけで数百KBになり、モバイル回線でのロード時間が長くなる。色変換ツールを開くために数秒待つのは本末転倒だ。
外部API方式は、サーバー側で高精度な変換を行う方式。データを手元に持つ必要がないためバンドルサイズは最小だが、ネットワーク接続が必須になる。建設現場のように電波が不安定な環境では使い物にならない。
逆距離加重補間（IDW） を採用した理由は、バンドルサイズと精度のバランスが最も実用的だから。全40色相をカバーする代表的な格子点（約200点）を内蔵し、入力されたRGB値に対して近傍の格子点をユークリッド距離で検索、逆距離で重み付けして補間する。データ量は全件の約1/20で済み、建築・塗装用途で十分な近似精度を確保できる。
具体的な計算の流れ
変換は以下の4ステップで実行される。
1. RGB入力 → 格子点テーブルからユークリッド距離で近い3点を取得
2. 逆距離加重で色相角・明度・彩度を補間
3. 補間結果をマンセル記法（H V/C）に変換
4. 日塗工テーブルからRGB距離の近い候補を3件抽出
逆距離加重補間（IDW）の計算例
RGB = (204, 51, 51) を入力した場合の補間を簡略化して示す。
格子点テーブルから近い3点を検索:
P1: 5R 5/12 → RGB(197, 46, 48) 距離 d1 = 8.1
P2: 5R 4/10 → RGB(178, 52, 55) 距離 d2 = 26.2
P3: 7.5R 5/10 → RGB(202, 60, 45) 距離 d3 = 12.8
逆距離の重み:
w1 = 1/d1 = 0.1235
w2 = 1/d2 = 0.0382
w3 = 1/d3 = 0.0781
正規化:
W = w1 + w2 + w3 = 0.2398
w1' = 0.515, w2' = 0.159, w3' = 0.326
補間結果:
色相角 = 5R×0.515 + 5R×0.159 + 7.5R×0.326 ≈ 5.8R
明度 = 5×0.515 + 4×0.159 + 5×0.326 ≈ 4.8
彩度 = 12×0.515 + 10×0.159 + 10×0.326 ≈ 11.0
→ 最終出力: 5R 5/10 付近（端数丸め後）
この方式の利点は、格子点が密な領域（低〜中彩度の一般色）では自然と精度が高くなること。高彩度で格子点が疎な領域では精度が下がるが、建築塗装で使う色域はほとんどが中彩度以下なので、実用上の問題は小さい。
コントラスト比の計算
コントラスト比の計算は WCAG 2.1 コントラスト基準 に準拠している。
1. sRGBの各チャネルをガンマ補正して線形化
R_lin = (R/255 ≤ 0.04045) ? R/255/12.92 : ((R/255+0.055)/1.055)^2.4
2. 相対輝度を計算
L = 0.2126×R_lin + 0.7152×G_lin + 0.0722×B_lin
3. コントラスト比を算出
ratio = (L_lighter + 0.05) / (L_darker + 0.05)
WCAG AAでは通常テキストに4.5:1以上、大きなテキストに3:1以上が求められる。
日塗工RGB変換表やカラーチャートとの違い
HEX・RGB・マンセル・日塗工を一画面で同期
4つの表色系を一度に確認できるツールは少ない。特に日塗工コードまでカバーしているのは、国内向けツールとしての強みだ。紙のカラーチャートでは「この日塗工番号のHEX値は？」という逆引きができないが、このツールなら双方向に変換できる。
オフラインでも動作する
すべての計算はブラウザ内で完結する。色データがサーバーに送信されることは一切ない。機密性の高い案件の色決めにも安心して使えるし、電波の届きにくい現場でも動作する。
コントラスト比チェック＋推奨文字色が一体化
色変換とアクセシビリティチェックが同じ画面にある。塗装色をWebに掲載するときに、別のツールを開いてコントラスト比を確認する手間がない。さらに、入力した色に対してWCAG AA基準を満たす推奨文字色（白 or 黒）を自動判定してくれるので、看板やサインの配色設計がその場で完結する。
URL共有で色をそのまま伝えられる
変換結果を?hex=CC3333のようなクエリパラメータ付きURLで共有できる。メールやチャットでリンクを送れば、相手はブラウザを開くだけで同じ色の変換結果が見られる。「この色、日塗工で何番？」というやり取りが、リンク1つで完結する。
知っておくと便利な色の豆知識
マンセルの色立体と「不均等な彩度」
マンセル表色系は「知覚的に均等」な色空間を目指して設計された。しかし実際には、色相によって取りうる彩度の最大値が異なる。赤（R）系はChroma 14まで到達する鮮やかな色があるのに対し、青緑（BG）系はChroma 8程度が上限。だからマンセルの色立体は「いびつなジャガイモ」のような形をしている。参考: マンセルの色立体 - Wikipedia
日塗工番号の読み方
日塗工（にっとこう）は日本塗料工業会が策定する色見本帳の番号体系。「25-90A」の場合、先頭「25」が色相区分（2.5Y系）、「90」が明度区分（明度9付近）、末尾「A」が彩度区分（低彩度）を表す。建築・土木・自動車補修の現場で広く使われている。参考: 日本塗料工業会
メタメリズム（条件等色）の落とし穴
同じRGB値でも、蛍光灯の下と太陽光の下では見え方が異なる。これをメタメリズムという。ディスプレイは光の三原色（加法混色）、塗料は色材の三原色（減法混色）と、発色の原理が根本的に違う。だからこそ、最終決定は必ず実物のカラーチップで、できれば実際の施工環境の照明条件下で確認してほしい。
使い方のコツ・Tips
カラーピッカーを活用する
HEXコードを手入力するより、カラーピッカーで視覚的に選ぶほうが直感的。写真から拾った色コードをペーストする場合は、「#」付きで入力すること。
マンセル値はテキスト直接入力が速い
マンセルモードにはスライダーだけでなく、テキスト入力欄がある。「5PB 4/8」や「N5」のように直接打ち込んでEnterを押せば即座に反映される。図面や仕様書のマンセル値をそのまま入力したいときに、スライダーをチマチマ動かす必要がない。
日塗工候補は複数確認する
第1候補が最も近い色だが、塗料は実物と画面で見え方が異なる。第2・第3候補も含めて、実物のカラーチップと照合するのがベスト。距離の値が小さいほど近い色を示す。
履歴機能で比較する
気になる色を「履歴に追加」しておけば、後から一覧で比較できる。色決めの打ち合わせで候補を絞り込むときに便利だ。
コントラスト比を意識する
背景色と文字色を設定すれば、WCAG AA/AAAの判定がリアルタイムで出る。看板やサインの配色検討にも使える。
気になるポイントQ&A
Q: マンセル変換の精度はどのくらい？
主要格子点の逆距離加重補間による近似値のため、格子点の密な領域（低〜中彩度の一般色）では実用的な精度が得られる。極端に高彩度の色や、格子点から離れた色域では精度が下がることがある。最終判断は必ず実物のカラーチップで確認すること。
Q: 日塗工番号は全件対応している？
現在は代表的な約90色を内蔵している。日塗工の全件（約600色以上）には対応していないが、建築・塗装で頻出する色を中心にカバーしており、近似候補として最も近い3色を提示する。
Q: 画面の色と実際の塗料の色が違うのはなぜ？
ディスプレイの発光原理（加法混色）と塗料の反射原理（減法混色）は根本的に異なる。さらにメタメリズム（条件等色）により、照明環境が変わると色の見え方も変わる。このツールはあくまで近似値を提供するもので、最終的な色決定には必ず実物サンプルを使ってほしい。
Q: 入力した色のデータはどう扱われる？
すべてブラウザ内で処理される。サーバーにデータは送信されない。履歴はブラウザのlocalStorageに保存されるので、ブラウザのデータを消去すると履歴も消える。第三者に共有されることはない。
Q: 変換結果をURLで共有できる？
「URL共有」ボタンを押すと、?hex=CC3333 のようなクエリパラメータ付きURLがクリップボードにコピーされる。このリンクを開くと同じ色の変換結果が自動表示される。メールやチャットでの色指定のやり取りに便利だ。
Q: sRGBとAdobe RGBの違いは考慮される？
本ツールはsRGB色空間を前提としている。Adobe RGBやDisplay P3のようなより広い色域には対応していない。一般的なWebブラウザとディスプレイはsRGBで動作するため、Web⇄塗装の変換用途では問題ない。
まとめ
HEX⇄マンセル⇄日塗工の変換がブラウザだけで完結する、軽量な色変換ツールだ。逆距離加重補間で実用的な精度を保ちつつ、オフラインでも動作する設計にしている。
デジタルと塗装の「色の言葉」が通じないストレスを解消する。外装設計者、インテリアコーディネーター、塗装業者、Webデザイナー——色に関わるすべての人の手間を、少しでも減らせたら嬉しい。
色が決まったら、次は仕上げの実作業。塗装面積から必要量を算出する塗料・ペンキ必要量計算、内装リフォームなら壁紙・クロス必要量計算やタイル枚数・材料計算も合わせて使ってみて。
輸入機械や海外建材でRAL色番号に出会ったときは、姉妹ツールのRAL⇄マンセル⇄HEX 変換ツールで日塗工・マンセルに橋渡しできる。塗料の混色結果を先に見たいときは混色シミュレーター。建築系の構造計算が気になった人は鋼材断面のコンシェルジュもどうぞ。
不具合や要望があれば、お問い合わせから気軽に連絡してほしい。