RGB だけでは足りない: HSL、CMYK、OKLCH のカラー表記法

前回の記事、コンピューターは色をどう作るのか: RGB・HEX・2進数の話では、色とは赤・緑・青の3つの数字—それぞれ0〜255—で構成されることを見ました。画面はその数字だけで問題なく動作します。しかし、人間が色を扱う瞬間、RGBはすぐに扱いにくくなります。

RGB は便利だが、直感的ではない

「もう少し明るい赤。」これを RGB でどう作るのでしょうか？3 つのチャンネルを同時に少しずつ上げる必要があります。「彩度だけ少し下げたい」は RGB だけを見ても、どこを減らせばいいか分かりません。「この色を紙にそのまま印刷してほしい」は RGB では完全に不可能です。

他のカラー表記法は、こうした問題を解決するために登場しました。

HSL — 人間が考える方法

HSL は色を色相・彩度・明度の 3 つに分けて扱います。hsl(14, 100%, 60%) は #FF5733 と同じ色ですが、何がどこから来ているかが明確です。

コンピューターの言語が RGB なら — デザイナーの言語は HSL です。同じ色を何を変えたいかという観点で扱えます。

Hue — 色相は 360° の円

色相は時計のように一周します。0° から始まり 360° まで。0° と 360° は同じ赤です。

Saturation — 彩度は色の鮮やかさ

同じ色相でも彩度を下げると、だんだんグレーに近づいていきます。

Lightness — 明度は黒から白まで

L が 0% なら必ず黒、100% なら必ず白。50% がその色の「本来の」明度です。

HSL の本当の使いどころ — パレット作成

同じ色相（Hue）を維持して L だけ変えると、自然に調和するカラーセットが生まれます。RGB で同じことをするには 9 つのマスをそれぞれ手動で計算しなければなりませんが、HSL は L を 12% → 92% へ段階的に変えるだけで完成します。

上の 2 つのパレットはどちらも 1 行で作れます。

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... L を 10 ずつ変えるだけ */
}

デザインシステムを作るとき、HSL が最も力を発揮する場面です。

CMYK — インクの言語

画面ではなく紙に色を乗せるには、まったく異なるシステムが必要です。CMYK は印刷所が使う 4 種類のインクの配合比率です。

なぜ黒を「B」ではなく「K」と呼ぶのでしょうか。B は Blue と混同されるからです。そして印刷用語の「Key plate（キープレート）」に由来しています — 他のインクの位置を揃える基準版という意味です。

光は足すほど明るくなり、インクは足すほど暗くなる

RGB と CMYK の最大の違いは混合方式です。

赤いインクが赤く見えるのは、他の光を吸収して赤だけを反射するからです。インクは光を削る役割を果たします。だからインクを混ぜるほど色は暗くなります。理論上は CMY の 3 つをすべて混ぜると黒になるはずですが、実際には濁った茶色になります。そのため本物の黒インク（K）を別に用意します。

CMYK はどこで使うのか

画面デザインをしているなら、CMYK に触れる機会はほぼありません。紙に印刷するときだけ登場します。

• 印刷所にファイルを渡すとき — 名刺、ポスター、書籍、パッケージ。印刷所は RGB ファイルを受け取ると CMYK に変換します。
• Photoshop / Illustrator での印刷用作業時 — 最初からカラーモードを CMYK に設定して作業します。
• ブランドガイド — 画面用の HEX と印刷用の CMYK 値を一緒に記載します。同じブランドカラーが 2 つの媒体で似た見え方をする必要があるためです。

画面の色と印刷の色が異なる理由 — Gamut

画面が表現できる色域（RGB gamut）とインクが表現できる色域（CMYK gamut）は異なります。画面で鮮やかな蛍光ピンクは印刷してもその色が出ません — インクで作れない色だからです。

そのため印刷デザイナーは作業前に CMYK で表現できる範囲内の色だけを選んで使います。RGB で作ったデザインをそのまま印刷すると、色がくすんで見えることがよくあります。

CMYK の値はこう書きます

各インクを何パーセント使うかを書きます。0% は使わない、100% は最大量。

深い黒は K 100% だけを使うとグレーに近い濁った黒になります。そのため印刷所では CMY も一緒に重ねてより深い黒を作ります。

OKLCH — 人間の座標

2020 年代に入って本格的に登場したカラーモデルです。キーワードは一つ — 「人間の目に自然に見える。」

3 つの座標は HSL と名前が似ています。

• L — Lightness（明度、0〜1）
• C — Chroma（彩度、0〜約 0.4）
• H — Hue（色相、0〜360°）

ただし、HSL には隠れた問題があります。同じ L = 50% でも、色によって実際に感じる明度がまったく異なります。直接比較してみましょう。

一言でまとめると — RGB と HSL は機械の座標。OKLCH は人間の座標。

L・C・H それぞれの役割

同じ色で 1 つの座標だけを変えるとどうなるか見てみましょう。

どこで使われるか

• 均一な明度のパレット — カテゴリーカラー 8 色をすべて同じ明度に揃えたいとき
• ダーク/ライトモードの自動変換 — L の値を反転するだけで自然なダークテーマができる
• アクセシビリティ — テキストと背景の明度差を正確に予測できる
• グラデーション — 途中でグレーの帯が入らない自然な流れ

CSS Color Level 4 から正式採用され、最新ブラウザでそのまま使えます。

.btn { background: oklch(67% 0.18 30); }       /* オレンジ */
.btn:hover { background: oklch(60% 0.18 30); } /* L を 7 下げるだけ → ちょうどその分だけ暗くなる */

何をいつ使うか

ほとんどのデジタル作業では RGB/HEX で十分です。HSL はパレットを作るときに思い出すと便利で、OKLCH はダーク/ライトモードのデザインに大いに役立ちます。

fns での色の扱い方

色が数字だとわかったら、よく使う色を指先に置いておくのが次のステップです。fns は色を取り出す・保存する・再利用する一連の流れを 1 つのキーにまとめています。

画面のどこからでも色を取得できる Eyedropper — ⌘+Shift+K

Eyedropper は画面上のどのピクセルでも正確にその色を取得できるツールです。Figma/Photoshop の中でしか使えないピッカーをシステム全体に引き出したようなものです。

⌘+Shift+K を押すと、画面のどこからでも fns の Eyedropper が起動します。デザインカンプの 1 ピクセル、写真の特定の領域、他のアプリの背景色 — マウスを合わせてクリックすればその位置の色を正確に取得します。

• クリックするたびに自動でクリップボードに保存されます。 別途「コピー」操作は不要です。
• Eyedropper ウィジェットで RGB / HEX / HSL / CMYK / OKLCH のどの形式でクリップボードに入るかを選べます。
• 取得した色のビジュアルプレビューと近似するシステムカラーも一緒に表示します。

Eyedropper → 自動クリップボード保存 → クリップボードピッカーから再取得 — 流れが途切れません。macOS 標準のデジタルカラーメーターのように別途起動する必要も、毎回コピーのショートカットを押す必要もありません。

クリップボードが色を自動認識します

fns のクリップボード履歴は、コピーしたテキストがカラーコードかどうかを自動で判別します。形式に関わらず認識します。

コピーした色を履歴から再取得するとき、テキストだけを見てもどんな色だったか思い出すのは難しいです。fns はアイテムの横に小さなカラーチップを表示するので、ひと目でどの色かわかります。

色だけを絞り込む

1 つのキーでクリップボード履歴からカラーコードだけをフィルタリングして表示できます。デザイン作業中に最近使った色だけをまとめて見たいとき、テキスト・URL・コードの中を探し回る必要がありません。

• 同じピッカーで color: のようなフィルターキーワード → カラーアイテムのみ表示
• 色名で検索 — “blue”、“red” で検索するとその色系統のみ絞り込まれる
• 近い色同士がビジュアルでグループ化されて並ぶ

1 つの色を別の形式で

同じ色を別の表記法に変換して取り出せます。Figma で #FF5733 をコピーした後、CSS に rgb(...) 形式で貼り付けたいとき、fns クリップボードピッカーでそのアイテムを選んでショートカット 1 回で自動変換されます。

Figma（HSB）と CSS（HSL/HEX/OKLCH）を行き来するとき、毎回変換ツールを起動する必要はありません。

テキスト展開とスニペット

よく使うブランドカラーをテキストショートカットに登録します。

CSS、Figma のカラー入力欄、Slack メッセージ、コードエディターのどこでも同じショートカットがそのまま動きます。ブランドガイドの色を毎回検索してコピーする手間がなくなります。

毎回変換ツールを起動してカラーコードを別の形式に変換していた時間を、fns で一度短縮してみてください。

そもそもこれらの数字がどこから来るのか — RGB の3チャンネルの基礎、2進数、HEX 表記の仕組みが気になる方は、コンピューターは色をどう作るのか: RGB・HEX・2進数の話から始めてみてください。