印刷から来た色をウェブでも使いたい？CMYKをHEXに変換すると、インクの混合に最も近い画面上の色が得られ、CSSやFigma、ブランドシートに貼り付けられる。
CMYK から HEX への変換のしくみ
- 4つのCMYKパーセンテージを100で割る。
- まずキー成分を適用する：すべてのチャネルは(1 − K)でスケールされる。
- チャネルを計算する：R = 255 × (1 − C) × (1 − K)、G = 255 × (1 − M) × (1 − K)、B = 255 × (1 − Y) × (1 − K)。
- 各チャネルを丸め、2桁の16進数として書き、#の後ろに繋げる。
実際の例
CMYK cmyk(86%, 0%, 17%, 26%)=HEX #1ABD9D
本質的に近似。CMYKは画面より色域が狭いため、HEX結果は色管理された完全な一致ではなく忠実なプレビューになる — 完全な一致には印刷機のICCプロファイルが必要。
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(0%, 0%, 0%, 100%) | #000000 |
| white | cmyk(0%, 0%, 0%, 0%) | #FFFFFF |
| red | cmyk(0%, 100%, 100%, 0%) | #FF0000 |
| lime | cmyk(100%, 0%, 100%, 0%) | #00FF00 |
| blue | cmyk(100%, 100%, 0%, 0%) | #0000FF |
| yellow | cmyk(0%, 0%, 100%, 0%) | #FFFF00 |
| orange | cmyk(0%, 35%, 100%, 0%) | #FFA600 |
| teal | cmyk(100%, 0%, 0%, 50%) | #008080 |
| purple | cmyk(0%, 100%, 0%, 50%) | #800080 |
| gray | cmyk(0%, 0%, 0%, 50%) | #808080 |