印刷から来た色をウェブでも使いたい？CMYKをHEXに変換すると、インクの混合に最も近い画面上の色が得られ、CSSやFigma、ブランドシートに貼り付けられる。
CMYK から HEX への変換のしくみ
- 4つのCMYKパーセンテージを、Coated FOGRA39プロファイルにおけるインク量として扱う。
- そのインクの組み合わせについてプロファイルが印刷する色を読み取る。マッチング方法に「相対的な色域を維持」を使い、「黒点の補正を使用」をオンにする。
- その色をsRGBに変換する。画面で表示できない色は、表示できる最も近い値に切り詰める。
- 各チャネルを丸め、2桁の16進数として書き、#の後ろに繋げる。
実際の例
CMYK cmyk(75%, 2%, 49%, 0%)=HEX #1AAD98
これは印刷機のプロファイルではなく、標準のCoated FOGRA39プロファイルを使う。他のCMYKプロファイル（印刷所のものなど）では数値が異なるため、HEXの結果は忠実なプレビューとして扱い、ブランドにとって重要な色は必ず校正刷りで確認する。
CMYK と HEX の解説
CMYK とは？
CMYK は印刷で使われる4色インクのモデル：シアン、マゼンタ、イエロー、キー（黒）で、それぞれ 0–100% の割合で表す。インクは光を吸収するので発光する画面より扱える色域が狭く、画面で鮮やかな色は印刷するとくすんで見えることがある。
- 構文:
- cmyk(C%, M%, Y%, K%)
- 範囲:
- インクごとに 0–100%
- おすすめ用途:
- 印刷、パッケージ、入稿データ
HEX とは？
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
- 構文:
- #RRGGBB
- 範囲:
- チャネルごとに 00–FF
- おすすめ用途:
- CSS、デザイン引き渡し、ブランドガイドライン
CMYK から HEX への参照表
よく使われる CSS の色を CMYK から HEX に変換しました。
| 色 | CMYK | HEX |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | #010101 |
| white | cmyk(0%, 0%, 0%, 0%) | #FFFFFF |
| red | cmyk(0%, 95%, 92%, 0%) | #E52420 |
| lime | cmyk(64%, 0%, 100%, 0%) | #69B42D |
| blue | cmyk(93%, 75%, 0%, 0%) | #2C4A9A |
| yellow | cmyk(9%, 0%, 96%, 0%) | #F4E600 |
| orange | cmyk(0%, 43%, 94%, 0%) | #F6A216 |
| teal | cmyk(83%, 27%, 48%, 12%) | #098180 |
| purple | cmyk(63%, 100%, 4%, 1%) | #7D217E |
| gray | cmyk(48%, 39%, 39%, 21%) | #81807F |
よくある質問
4つのCMYKパーセンテージを、Coated FOGRA39プロファイルにおけるインク量として扱う。 そのインクの組み合わせについてプロファイルが印刷する色を読み取る。マッチング方法に「相対的な色域を維持」を使い、「黒点の補正を使用」をオンにする。 その色をsRGBに変換する。画面で表示できない色は、表示できる最も近い値に切り詰める。 各チャネルを丸め、2桁の16進数として書き、#の後ろに繋げる。
これは印刷機のプロファイルではなく、標準のCoated FOGRA39プロファイルを使う。他のCMYKプロファイル（印刷所のものなど）では数値が異なるため、HEXの結果は忠実なプレビューとして扱い、ブランドにとって重要な色は必ず校正刷りで確認する。
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
できるよ。入力欄のそばにある入れ替えボタンで HEX → CMYK のコンバーターに切り替えられる。同じ仕組みで動くし、どちらの方向も同じ数式を逆に適用するだけだよ。
色がブランドマニュアル由来なら、あらかじめHEXやPantoneの値が指定されていないか確認して。文書化されたコードの方が変換値より優先される。