RGB CMYK 変換ツール｜HEX・カラーコードを相互変換
RGBからCMYK、CMYKからRGBへ変換し、HEXカラーコードとカラープレビューを同じ画面で確認できます。
51, 102, 153、HEX #336699、CMYK 約 67, 33, 0, 40 を初期例として表示しています。RGBは0〜255、CMYKは0〜100%の範囲で入力してください。変換結果は色管理用の近似値であり、印刷の最終色は用紙・インク・ICCプロファイルで変わります。
RGB・CMYKを入力
どちら側の数値を編集しても、もう一方とHEXがすぐ更新されます。小数を入力したCMYK値は計算後に整数へ丸めて表示します。
RGB（画面用）
CMYK（印刷用の目安）
変換結果とプレビュー
- RGB
- 51, 102, 153
- CMYK
- 67%, 33%, 0%, 40%
- 用途
- 画面表示と印刷用の値を比較
RGB CMYK 変換ツールの使い方
このツールは、画面で使っているRGBカラーを印刷用のCMYK目安値へ変換したいとき、または印刷データのCMYK値をWeb用のRGBやHEXへ置き換えたいときに使います。数値を入力する場所を決める必要はなく、RGB欄とCMYK欄のどちらから編集しても結果が更新されます。
- RGBならR・G・Bを0〜255、CMYKならC・M・Y・Kを0〜100%で入力します。
- プレビュー、HEX、反対側の色空間に表示された値を確認します。
- WebではRGBまたはHEX、印刷では入稿条件に合うCMYK値を別々に保存します。
結果が空欄になったり赤いエラー表示が出たりした場合は、入力を消さずに範囲と桁を確認してください。途中まで入力したHEXは未完成のため、古い結果を残さない設計にしています。
入力例：RGB 51・102・153をCMYKへ変換
初期例のRGB 51, 102, 153 はHEXでは #336699 です。一般的な単純式では、黒版Kを40%とし、残りの色成分からC約67%、M約33%、Y 0%が得られます。CMYKの表示順はC・M・Y・Kなので、67, 33, 0, 40 と記録します。
| 形式 | 値 | 主な用途 |
|---|---|---|
| RGB | 51, 102, 153 | ディスプレイ、Web、SNS画像 |
| HEX | #336699 | CSS、デザインツール、共有メモ |
| CMYK | 67%, 33%, 0%, 40% | 印刷用データの初期確認 |
ここで得られるCMYKは、印刷機や用紙のプロファイルを指定した変換結果ではありません。青や緑など鮮やかな色は、画面上のRGBと印刷後の見え方が大きく変わることがあるため、重要なブランド色は色校正や印刷会社の指定値を優先します。
RGBとCMYKの違い、変換で色がずれる理由
RGBは赤・緑・青の光を加えて色を作る加法混色です。数値が大きいほど光が強くなり、3成分が255なら白になります。一方、CMYKはシアン・マゼンタ・イエローのインクと黒（K）を重ねる減法混色で、紙に反射する光を減らして色を表します。
そのため、RGBで表示できるすべての鮮やかな色をCMYKのインクで同じように再現できるとは限りません。変換では色域外の色が近い値へ丸められ、彩度が下がったり暗く見えたりします。画面のプレビューは方向性を判断するための目安として利用し、印刷結果の保証とは分けて考えてください。
RGB・CMYK変換の計算と丸め方
このページの簡易変換では、RGBを0〜1へ正規化してから、最も大きい成分を黒版Kとして求めます。Kが100%でない場合は、残りの成分からC・M・Yを計算し、表示時におおむね整数へ丸めます。反対方向では、各インク量を0〜1へ直し、255 × (1 - 色材) × (1 - K) の考え方でRGBへ戻します。
| 表示 | 計算上の意味 | 丸め後の扱い |
|---|---|---|
| RGB | 光の3チャンネルを0〜255で表示 | 画面やコードへ貼り付ける整数値 |
| CMYK | 4種類のインク量を0〜100%で表示 | 入稿条件を確認するための目安値 |
| HEX | RGB各値を2桁の16進数へ変換 | CSSや仕様書で共有しやすい表記 |
同じ元値を何度も往復変換すると、整数への丸めによって1段階ほど差が出る場合があります。Web用の値を保存するときは元のHEXまたはRGBを基準として残し、CMYKから戻したRGBを元データで上書きしないようにすると管理しやすくなります。
印刷前にCMYKの値を決める手順
RGBからCMYKへ変換しただけでは、印刷会社が求める完成データになったとは限りません。まずブランドカラーの元データと使用媒体を整理し、印刷物の種類、紙、印刷方式、指定プロファイルを確認します。指定がある場合は、一般式の結果よりも入稿ガイドと印刷会社の数値を優先してください。
- 元色を保存：元のRGB・HEXと、作成日や用途をカラー管理表へ記録します。
- 近似値を作成：このCMYK RGB 変換ツールで候補を出し、色域外になりやすい青・緑・オレンジを確認します。
- 出力条件を合わせる：印刷会社のICCプロファイル、紙質、黒の指定、総インキ量を制作ソフト側で設定します。
- 校正する：重要なロゴや商品色は画面だけで決定せず、実際の印刷条件に近い校正刷りで最終判断します。
入力範囲・エラー・境界値の確認
RGBは各チャンネルが0〜255、CMYKは各インク量が0〜100%です。空欄、文字列、上限を超える値は計算せず、結果欄をクリアしてエラーを表示します。これは入力途中の古いプレビューを誤って使わないためです。
- 最小値：RGB
0,0,0、CMYK0,0,0,0は黒ではなく、それぞれの計算モデルで意味が異なります。CMYKで黒を指定するならK 100%を確認します。 - 最大値：RGB
255,255,255は白、CMYK0,0,0,100はK版の黒です。 - 入力途中：HEXが6桁未満の間は変換を保留します。全角記号や先頭の#を入力しても、値欄は6桁の英数字に整えます。
用途別の使い分け
Web・アプリ
CSSではHEXやRGBを使い、背景・文字のコントラストも別途確認します。CMYK値をそのままCSSへ貼り付けないようにします。
印刷物
RGBから変換したCMYKを初期候補にし、印刷会社のプロファイル、用紙、黒の作り方を確認して入稿値を決めます。
共有・管理
ブランド色はRGB・HEX・CMYKを1行に並べて管理し、媒体ごとの最終値と元の基準色を区別して記録します。
変換結果をデザインへ渡すときの整理方法
RGB・CMYK・HEXの値をチームや印刷会社へ共有するときは、数値だけでなく用途と出力条件も一緒に記録します。たとえば、Web画面の基準色はHEX、画面上の確認値はRGB、印刷用の候補はCMYKというように、同じ色でも採用する値を分けると、別の媒体へ転用したときの混乱を減らせます。
特にブランドカラーでは、変換後のCMYKを元のHEXの代わりに保存しないことが大切です。CMYKは用紙やICCプロファイルによって適切な値が変わるため、元色、変換方法、確認した媒体、最終入稿値を別の列に残してください。次回の更新で再変換するときも、どの値を基準にしたかを追跡できます。
- Web実装：CSSへ貼り付けるHEXまたはRGBと、文字色・背景色のコントラスト確認結果を保存します。
- 印刷入稿：CMYKの近似値だけで確定せず、印刷会社のプロファイル、紙、黒の指定を記録します。
- 更新管理：元のRGB・HEX、変換日、用途、採用したCMYKを1行に並べ、再利用時の基準を明確にします。
変換値を採用する前の最終確認
変換結果をそのまま採用する前に、実際に使う背景、文字、画像、用紙の条件へ当てはめて確認します。RGBからCMYKへ変換した値は、画面で見た印象と印刷物の見え方が変わることがあるため、数値が正しいかだけでなく、用途に対して十分な明るさとコントラストがあるかを見ます。
複数の候補を比較するときは、元のHEX、変換後のRGB、CMYK、確認した媒体を同じ表にまとめると便利です。デザイナーがWeb用データを更新し、別の担当者が印刷用データを作る場合でも、どの値を基準にしたかを共有できます。重要なブランド色では、最後に実物校正を行い、ツールの近似値だけで入稿色を決めないようにします。
- 画面確認：明るい背景と暗い背景の両方で、文字やアイコンの視認性を確認します。
- 印刷確認：用紙、インク、ICCプロファイルを確認し、必要なら印刷会社の指定値を優先します。
- 共有確認：元色と変換値を別々に保存し、採用した媒体と確認日を記録します。