web カラー rgb 変換：プロフェッショナル向けカラーシステム変換（M系統・HTML色指定の実践）

カラーシステム変換を先に設計する理由

同じブランドカラーを名刺、ポスター、Webサイト、アプリで使うとき、最初に決めるべきなのは「どの媒体を基準にするか」です。画面は光を発するRGB、印刷はインキを重ねるCMYKや特色で表現するため、数値を機械的に置き換えても見た目が一致しないことがあります。変換ツールが返す値は作業の出発点であり、最終的な色の保証ではありません。

実務では、ブランドの基準色を色見本や指定されたM系統の番号で管理し、Web用の近似HEX・RGBを別名として記録します。そのうえで、画面用の値はHTML/CSSへ、印刷用の値は入稿データへ渡します。こうすると、担当者が変わっても「どの数値をどこで使うか」が読み取れます。

RGB・HEX・CMYK・M系統の役割

カラーコード入力で迷うのは、形式の優劣ではなく目的が違うからです。RGBとHEXはWeb実装に向き、CMYKは印刷工程の指定に向きます。M系統のような番号体系や特色は、数値だけでなく公式の色見本、用紙、インキ条件と一緒に扱います。

色見本からWeb公開までの5ステップ

1. 基準色を固定する：採用した色見本、特色番号、または承認済みの印刷サンプルを一つに決めます。画面の見た目だけを基準にすると、環境差を引き継いでしまいます。
2. 用途を分けて記録する：印刷用CMYK、Web用HEX・RGB、必要ならHSLを同じ仕様表に並べます。変換日、担当者、使用したプロファイルも残すと再現性が上がります。
3. 数値を変換する：HEXからRGBを求めるだけなら直接変換できます。CMYKや特色への変換は色域差があるため、ツールの値を「近似値」として扱い、印刷条件を確認します。
4. HTML/CSSに実装する：CSS変数にHEXを登録し、状態色や背景色を役割ごとに分けます。RGB指定が必要な透明色は、元のHEXと対応関係が分かるコメントを残します。
5. 実機と校正で確認する：画面では複数ディスプレイ、印刷では校正紙を確認します。コントラスト、細い線、写真の隣に置いたときの見え方まで承認して完了です。

web カラー rgb 変換とCSS指定の実例

WebカラーRGB変換では、HEXの2桁を1チャンネルとして読みます。たとえば #2F80ED は、2F を赤、80 を緑、ED を青に割り当てるため、RGBは 47, 128, 237 です。16進数の値を10進数へ置き換えるだけなので、HEXとRGBの変換は色域を変える処理ではありません。

CSSでは、値を直接散らすより変数にまとめます。HEXとRGBのどちらを採用するかはプロジェクトの規約で決め、透明度が必要な箇所だけ新しいRGB記法を使うとレビューしやすくなります。

:root {
  --brand-blue: #2F80ED;
  --brand-blue-rgb: 47 128 237;
}
.button-primary {
  color: #fff;
  background: var(--brand-blue);
  box-shadow: 0 4px 12px rgb(var(--brand-blue-rgb) / 0.24);
}

このように元色と透明表現を対応させると、デザインツールのHEXをHTMLへ移すときの転記ミスを減らせます。実装後は、16進数 色 変換ツールでHEX・RGB・RGBAを照合し、コントラスト比チェッカーで本文と背景の組み合わせも確認してください。

M系統・特色を扱うときの確認点

M系統や特色番号をWebカラーへ置き換える場合、番号から一意のRGBが得られるとは限りません。メーカーの見本帳、用紙、インキ、照明条件が違えば、同じ番号でも見え方は変わります。まず公式または社内承認済みの見本を基準にし、デジタル表示用のHEX・RGBは「画面上の近似値」として登録します。

• 番号だけでなく、見本帳の版、用紙、印刷条件を記録する。
• Web掲載用のHEXは、変換元と確認日をデザイン仕様書へ書く。
• 特色をCMYKへ変換した場合は、近似値であることを入稿メモに残す。
• ブランドカラーの許容範囲を決め、画面用と印刷用の承認者を分ける。

印刷用の数値変換を急ぐ場合は、先にRGB⇔CMYK変換ツールで目安を確認し、印刷会社の指定プロファイルや総インキ量を入稿条件へ合わせます。DICやPantoneの番号を扱うときは、DIC⇔CMYK変換やPantone⇔DIC変換の結果だけで確定せず、必ず現物確認を行います。

HTML・CSSで色指定を運用する方法

HTMLの古い属性へ色を直接書き込むより、CSSの変数とコンポーネントの役割で管理する方が変更に強くなります。ブランド色、背景、本文、境界線、状態色を分け、同じHEXを意味なく複製しないことがポイントです。

HTMLとCSSの色コードの書き方や色名の使い分けは、HTMLカラーコード一覧で基本を確認できます。ここで扱う記事の範囲は、単なるコード一覧ではなく、印刷・Web・実装の間で同じ色の出所を追跡できるようにする運用設計です。

校正・アクセシビリティ・色ずれ対策

変換後の色を確認するときは、数値の一致、見た目の一致、読みやすさを分けて評価します。ディスプレイの輝度や色温度が違えば、同じRGBでも見え方は変わります。印刷では用紙の白さ、インキ、乾燥、照明が影響します。

変換ツールは、入力値の取り違えや単純な計算ミスを減らす用途に向いています。一方、色域外の色をどのように置き換えるか、印刷物でどの程度差が許されるかは、制作環境と承認ルールの判断です。ツールの結果をそのまま「正解」とせず、最終用途の確認工程へつなげてください。

用途別の選び方