WEBサイトでCMYKを使わない理由｜RGBとの違い

印刷用のブランド資料に「C・M・Y・K」の割合が書かれていても、その数値をそのままWEBサイトの文字色やボタン色に指定できるのでしょうか。一般的なブラウザー向けのCSSでは、印刷インキを前提とするCMYKではなく、HEXやRGBなどのWEB用カラー指定を使います。その理由と、印刷用のブランドカラーからWEB配色を作る手順を紹介します。

WEBサイトでCMYK値をそのまま使わない理由

RGBはRed（赤）・Green（緑）・Blue（青）の3成分で色を表す方式です。WEBページの見た目を指定するCSS（Cascading Style Sheets）では、rgb()や6桁のHEX（16進数で表すカラーコード）を使って、標準的なsRGBの色を指定できます。CSSにはHSLなど別の色の書き方もあるため、「CSSの色指定はRGBの数値だけ」という意味ではありません。

CMYKはCyan（シアン）・Magenta（マゼンタ）・Yellow（黄）・Key（黒）の4成分で、主に印刷インキの割合を示します。同じCMYKの数値でも、紙・インキ・印刷機・カラープロファイル（色の数値と再現される色の関係を記述する情報）によって仕上がりが変わります。こうした印刷条件に依存する4つの割合は、通常のWEB用カラーコードと同じようには扱えません。

例えばcolor: cmyk(0, 70%, 40%, 20%);という宣言は、ブラウザー用の有効なCSSカラー指定ではありません。一方、印刷向けのdevice-cmyk()という関数はCSS Color Level 5の仕様草案にありますが、2026年10月時点で主要ブラウザーの標準的な画面表示に使えるものではありません。WEB制作では、対応の広いHEXやrgb()を選ぶのが実用的です。

印刷用ブランドカラーをWEBの案内カードに使う例

紙の会社案内に深い赤が使われている企業を想定します。WEBの資料案内カードでは、確認した印刷見本を参考にWEB用の赤■#923D4Dを選び、ページ背景には温かみのある薄いグレー■#F7F3EF、カード背景には白■#FFFFFFを配置します。本文文字は暗い青灰色■#26333F、カードの境界線は落ち着いた赤みのグレー■#7A6266にします。資料請求ボタンには見出しと同じ赤■#923D4Dを使い、文字を白■#FFFFFFにします。

CSSでは、例えば次のように指定できます。コード中のrgb()は、上の各HEXコードと同じWEB用の色を数値で表したものです。

.brand-page {
  padding: 24px;
  background-color: rgb(247 243 239);
}
.brand-card {
  padding: 20px;
  background-color: rgb(255 255 255);
  border: 2px solid rgb(122 98 102);
  color: rgb(38 51 63);
}
.brand-card h3 { color: rgb(146 61 77); }
.brand-card .action {
  display: inline-block;
  padding: 10px 16px;
  background-color: rgb(146 61 77);
  color: rgb(255 255 255);
}

この赤■#923D4Dは説明用に選んだWEBの配色例であり、特定のCMYK値を計算して正確に再現した結果ではありません。印刷物の色を再現したい場合は、元の印刷用プロファイルを確認して適切に色変換し、実際の画面でも色を調整します。

WEB向けに変換した後は読みやすさと用途を確認する

完成したカードで、深い赤の見出し■#923D4Dと白背景■#FFFFFFのコントラスト比は約7.01:1です。本文の青灰色■#26333Fと白■#FFFFFFは約12.90:1、ボタンの白文字■#FFFFFFと赤背景■#923D4Dは約7.01:1になります。WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2では、通常サイズの文字に原則4.5:1以上のコントラストを求めています。元の印刷色に似せることだけでなく、実際に置く背景色との組み合わせを確認しましょう。

カードの枠線■#7A6266は、白いカード■#FFFFFFと約5.58:1、外側の薄いグレー■#F7F3EFと約5.05:1です。意味のある境界線や操作部品は、文字とは別に隣接色との差も確認します。印刷用とWEB用のカラーコードを管理するときは、それぞれの用途と元のプロファイルを併記すると取り違えを防げます。

HueRollは6桁のHEXをコピーでき、選択色のRGBやCMYKの値も表示します。ただし、CMYK表示は印刷用の色校正値ではなく参考値です。印刷用のCMYK割合をHueRollの表示から逆算してWEB色や入稿色として確定するのではなく、色の用途を分け、WEBではHEXと画面上の見え方を基準に調整してください。