印刷の色を画面で見せたい？CMYKをRGBに変換すると、インク割合の光ベースでの等価色が得られ、モニターやモックアップ、ウェブページで表示できる値になる。
CMYK から RGB への変換のしくみ
- 4つのパーセンテージをそれぞれ0〜1の分数にする。
- まずキー（K）成分を適用する：各チャネルは(1 − K)でスケールされる。
- R = 255 × (1 − C) × (1 − K)、G = 255 × (1 − M) × (1 − K)、B = 255 × (1 − Y) × (1 − K) を計算する。
- 各チャネルを0〜255の整数に丸める。
実際の例
CMYK cmyk(0%, 87%, 58%, 9%)=RGB rgb(232, 30, 97)
近似的な変換。画面はインクより広い色域を表示できるため、RGBの結果は通常、印刷物より明るく鮮やかに見える。
CMYK と RGB の解説
CMYK とは？
CMYK は印刷で使われる4色インクのモデル：シアン、マゼンタ、イエロー、キー（黒）で、それぞれ 0–100% の割合で表す。インクは光を吸収するので発光する画面より扱える色域が狭く、画面で鮮やかな色は印刷するとくすんで見えることがある。
- 構文:
- cmyk(C%, M%, Y%, K%)
- 範囲:
- インクごとに 0–100%
- おすすめ用途:
- 印刷、パッケージ、入稿データ
RGB とは？
RGB は赤・緑・青の3つの光のチャネルで色を表し、それぞれ 0〜255 の値を取る。画面の仕組みをそのまま反映しており、3つすべてが255で白、すべてが0で黒になる。色で計算する必要がある場合は RGB が適切で、rgba() を使えば透明度も追加できる。
- 構文:
- rgb(R, G, B)
- 範囲:
- チャネルごとに 0–255
- おすすめ用途:
- コード、canvas、rgba() を使った透明度
CMYK から RGB への参照表
よく使われる CSS の色を CMYK から RGB に変換しました。
| 色 | CMYK | RGB |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | rgb(0, 0, 0) |
| white | cmyk(0%, 0%, 0%, 0%) | rgb(255, 255, 255) |
| red | cmyk(0%, 100%, 100%, 0%) | rgb(255, 0, 0) |
| lime | cmyk(100%, 0%, 100%, 0%) | rgb(0, 255, 0) |
| blue | cmyk(100%, 100%, 0%, 0%) | rgb(0, 0, 255) |
| yellow | cmyk(0%, 0%, 100%, 0%) | rgb(255, 255, 0) |
| orange | cmyk(0%, 35%, 100%, 0%) | rgb(255, 166, 0) |
| teal | cmyk(100%, 0%, 0%, 50%) | rgb(0, 128, 128) |
| purple | cmyk(0%, 100%, 0%, 50%) | rgb(128, 0, 128) |
| gray | cmyk(0%, 0%, 0%, 50%) | rgb(128, 128, 128) |