カラーコードの形式について

Posted at 2025-05-17

＜本記事のターゲット層＞

HEX/RGB 以外のカラーコードよくわからないよーピエン 😂 な人
色の調整めんどいなって思っている人

はじめに

WEB 制作、パンフレット制作、Web アプリケーション開発と関わってきた中で、仕事や使うアプリケーションによって、色には様々な形式があることを知りました。

HEX と RGB 以外あればいいじゃないか！！なぜ他の形式を使うのか！！と常々思っていましたが、それぞれ、仕事を深く理解することで、なぜその形式が必要なのか分かると、むしろ HEX や RGB って誰でも扱いやすい形式として用意されているだけで、HSL のほうがデザインには扱いやすいと感じるようになりました。

知識は深く知ることで扱う能力が向上します。本記事を読む皆さまにも色の各形式を知ることで、業務にお役立てて頂ければと思います。

色の指定にはさまざまな方法（形式）があり、それぞれに特徴やメリット・デメリットがあります。以下では、主に使われる 4 つの形式「HEX」「RGB」「HSL」「OKLCH」について、初心者向けにわかりやすく説明します。

🔴 1. HEX（ヘックス）

CSS で指定するときによく使われている形式です。Excel などのツールでも指定できることが多く、Color Huntや原色大辞典などの多くの色見本サイトでも扱われており、カラーコードをコピペすることができるので非常に扱いやすい形式です。

しかし、色を調整したい場合（例えばもう少し明るくしたい or 暗くしたい or 赤方向にしたいなど）、RGB で調整してそこから HEX に変換する手間があります。

✅ 特徴

6 桁の 16 進数で色を表します。
HTML/CSS で古くから使われている。
RGB の値をまとめたもの。

💡 例

color: #ff0000; /* 赤 */

👍 メリット

短くてわかりやすい。
どのブラウザでもサポートされている。
デザインツールと連携しやすい。
値をコピペで扱えるので便利

👎 デメリット

明るさや色合いの調整がしにくい。
直感的に色をイメージしづらい。

🟢 2. RGB（Red, Green, Blue）

CSS で指定するときによく使われている形式で、CSS 関数で指定する場合にも使われます。Excel などのツールでも指定できることが多いです。

色を調整することにも使えますが、直感的ではなく難しいです。

透明度を指定することもでき（rgb(255 0 0 / 0.5)のように）ます。

✅ 特徴

赤・緑・青の値を 0〜255 の範囲で指定。
それぞれの色の強さを数値で調整。

💡 例

color: rgb(255 0 0); /* 赤 */

👍 メリット

色の微調整ができる。
プログラムで色を生成しやすい。

👎 デメリット

色の感覚が数値だけではつかみにくい。
明度や彩度の調整が直感的ではない。

🔵 3. HSL（Hue, Saturation, Lightness）

対応しているツールが少ないため、RGB/HEX に比べるとなじみが薄い形式です。メジャーブラウザが全てサポートされるようになったのも 2012 年頃になるため、わりと最近になります。

色を調整したい場合（例えばもう少し明るくしたい or 暗くしたい or 赤方向にしたいなど）に扱いやすく、例えばラベルを背景より少し暗くしたい場合などに便利です。透明度を指定することもでき（hsl(0 100% 50% / 0.5)のように）、デザインにこだわりたい場合には便利です。

但し、「人間の視覚は色相によって明度・彩度の感じ方が変わる」問題により、同じ明るさを指定しても色相が異なると明るさ/暗さが異なるように感じる場合があります。

✅ 特徴

色相（Hue）、彩度（Saturation）、明度（Lightness）で指定。
人間の感覚に近い色指定ができる。

💡 例

color: hsl(0 100% 50%); /* 赤 */

🟨 色の意味：

Hue: 色相。0〜360（0=赤, 120=緑, 240=青）
Saturation: 彩度。0%はグレー、100%は鮮やか。
Lightness: 明るさ。0%は黒、100%は白。

👍 メリット

色の調整が直感的（特にテーマカラーの変更などに便利）。
デザイナーにとって扱いやすい。

👎 デメリット

サポートは良いが、RGB や HEX に比べて馴染みが薄い。
色の正確な再現は少し難しい（HSL は「見た目通り」ではない）。

🟣 4. OKLCH（Lightness, Chroma, Hue）

対応しているツールが少ないため、RGB/HEX に比べるとなじみが薄い形式です。メジャーブラウザが全てサポートされるようになったのも 2023 年頃になるため、本当に最近になります。

HSL と何が異なるかというと、「人間の視覚は色相によって明度・彩度の感じ方が変わる」という問題を解決した形式になります。HSL で片方を色相 244/彩度 70%、もう片方を色相 172/彩度 70%とした場合で、明るさを 40%と指定した背景にフォント色を黒にすると、同じ明るさなのにフォントの見やすさが異なります。

OKLCH は、HSL と同じく色相/彩度/明るさを指定しますが、人間の視覚に合わせて設計されたものになります。

透明度を指定することもでき（oklch(0.627 0.257 29.23 / 0.5)のように）ます

OKCLH と HEX を変換するサイトを駆使しないと扱いが難しい場合があるかもしれないですね。

✅ 特徴

色の「明るさ（L）」「鮮やかさ（C）」「色相（H）」で指定。
人間の視覚に合わせて設計された最新の色空間。

💡 例

color: oklch(0.627 0.257 29.23);

🟩 各値の意味：

Lightness: 0 ～ 1 の範囲（0=黒、1=白）。62.7%のように%指定をすることもできます。
Chroma: 鮮やかさ（0=グレー、上限は色による）。25.7%のように%指定をすることもできます。
Hue: 色相（角度、0 ～ 360 度）。

👍 メリット

色の差異が視覚的に均等。
「この色を少し明るく/鮮やかに」などが正確にできる。
アクセシビリティやダークモード対応で活躍。

👎 デメリット

記法がやや複雑。

🟠 5. HSV（Hue, Saturation, Value）

こちらはプログラマには馴染みが薄い形式です。Illustrator などのグラフィックツールを触ったことがある方であればご存じの形式でしょう。

こちらは CSS では扱えません。

HSL と同様なので説明は省略いたします。

✅ 特徴

色相（Hue）、彩度（Saturation）、明度（Value）で色を表す。
HSL と似ているが、**「明るさ」ではなく「輝度（Value）」**で明るさを扱う。
グラフィックツール（Photoshop など）でよく使われる。

💡 例

// CSSでは直接使えない（要変換）

🔢 各値の意味：

Hue（色相）: 0〜360（色の種類）
Saturation（彩度）: 0〜100%（どれだけ色が濃いか）
Value（明度）: 0〜100%（どれだけ明るいか）

👍 メリット

色相、鮮やかさ、明るさを直感的に調整可能。
デザインツールやカラー UI（カラーピッカー）に多用される。

👎 デメリット

CSS でそのまま使えない（RGB や HSL に変換が必要）。
Web ではプログラム的な利用が多い（JavaScript 等で変換して使う）。

🟡 6. CMYK（Cyan, Magenta, Yellow, Key/Black）

こちらはプログラマには馴染みが薄い形式です。パンフレットなどの印刷物に関わったことがある方ならばよくご存じでしょう。

こちらは CSS では扱えません。

しかし、関わる場合もあるかもしれませんのでついでにご紹介しておきます。

✅ 特徴

主に印刷業界で使われる色の表現方法。
光（RGB）ではなく、インク（絵の具）の混色に基づいている。
紙に色を「引いていく（減法混色）」考え方。

💡 色の構成

C（シアン）: 水色っぽい青
M（マゼンタ）: ピンクっぽい赤
Y（イエロー）: 黄色
K（ブラック）: 黒（Key plate）

💡 例

C: 0%, M: 100%, Y: 100%, K: 0%  → 赤っぽい色

👎 CSS では使えない

/* 直接使うことはできない（変換が必要） */

👍 メリット

印刷物の色指定に最適。
紙・インク・プリンターの特性を考慮できる。

👎 デメリット

CSS では使えない（Web には不向き）。
同じ CMYK 値でもプリンターや紙で見え方が変わる。
RGB/HEX に比べて扱いが難しい。

✅ 形式の比較

形式	書き方例（CSS）	CSS 対応	主な用途	特徴	初心者向き度
HEX	`#ff0000`	◎ 全対応	Web	短くシンプル	◎
RGB	`rgb(255, 0, 0)`	◎ 全対応	Web	色の強度を数値で指定	○
HSL	`hsl(0, 100%, 50%)`	◎ 全対応	Web/UI 設計	色調整が直感的	◎
HSV	(要変換)	✖️	グラフィックツール	色ピッカー向き	△
OKLCH	`oklch(0.6 0.2 20)`	△ モダン対応	Web/UI 設計	高精度な色表現	△
CMYK	(要変換)	✖️	印刷	紙に最適・Web 非対応	△

🧭 形式の使い分け：ガイド

目的	おすすめ形式
Web デザイン	HEX / HSL / RGB
色調整のしやすさを重視	HSL / HSV（ツール内）
ダークモード・アクセシビリティ重視	OKLCH（新しめ）
印刷（ポスター・冊子など）	CMYK（Web には不向き）

🔁 CMYK を Web で使いたいときは？

CMYK → RGB に変換してから CSS で使います。
Photoshop や Illustrator などで変換可能。
Web では、CMYK で見たままを完全に再現するのは困難（画面と紙では色の原理が違うため）。

🎨 形式の選び方ガイド

やりたいこと	最適な形式
サクッと指定したい	HEX
数値で色をプログラム的に操作	RGB
視覚的にわかりやすく調整	HSL または HSV（ツール）
モダンで正確な色を扱いたい	OKLCH（ブラウザ対応前提）

🔁 HSV を CSS で使うには？

HSV は直接 CSS で使えないので、以下のように JavaScript で変換してから使います：

function HSVtoRGB(h, s, v) {
  s /= 100;
  v /= 100;
  let c = v * s;
  let x = c * (1 - Math.abs(((h / 60) % 2) - 1));
  let m = v - c;
  let [r, g, b] =
    h < 60
      ? [c, x, 0]
      : h < 120
      ? [x, c, 0]
      : h < 180
      ? [0, c, x]
      : h < 240
      ? [0, x, c]
      : h < 300
      ? [x, 0, c]
      : [c, 0, x];
  return `rgb(${Math.round((r + m) * 255)}, ${Math.round(
    (g + m) * 255
  )}, ${Math.round((b + m) * 255)})`;
}

const cssColor = HSVtoRGB(0, 100, 100); // => "rgb(255, 0, 0)"

📌 最後に：CSS で直接使えるのは？

✅ CSS で直接使えるのは以下の形式だけ：

HEX
RGB
HSL
OKLCH（一部ブラウザ）

⬇️ HSV と CMYK は変換が必要！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up