カラーコード変換完全ガイド：HEX・RGB・HSL・HSBをオンラインで変換

CSSファイルには複数のカラーフォーマットが混在します。デザイナーからHEXコードを受け取り、ブランドガイドにはPantoneのRGB値が書かれ、アニメーションライブラリはHSLを期待する——手動で変換するには公式を暗記するかcalcを開くしかありません。カラーコンバーターがその計算を即座に処理します。

カラーコードをオンラインで変換 →

4つの主要カラーフォーマット

HEX

6桁の16進数が赤・緑・青チャンネルを 00（0%）から FF（100%）で表します：

color: #1a73e8;   /* Googleブルー */
color: #fff;      /* #ffffffの省略形 */

HEXはWeb CSSで最もよく使われるフォーマットです。各チャンネルの数字が重複する場合、省略形（#rgb）が使えます——#ff6600 → #f60。

RGB

赤・緑・青の3つの整数（0〜255）。CSSはアルファチャンネル（0〜1）付きの rgba() も受け付けます：

color: rgb(26, 115, 232);
color: rgba(26, 115, 232, 0.8);  /* 80%の不透明度 */

RGBはモニターのハードウェアに直接対応します。プログラムでチャンネルを操作する場合に便利です。

HSL

Hue（色相、0〜360°）・Saturation（彩度、0〜100%）・Lightness（明度、0〜100%）：

color: hsl(217, 80%, 51%);
color: hsla(217, 80%, 51%, 0.8);

HSLは最も人間が読みやすいフォーマットです。明度だけを調整することで、色相や彩度を変えずにティントとシェードが作れます——カラースケール構築に最適です。

HSB / HSV

Hue（色相、0〜360°）・Saturation（彩度、0〜100%）・Brightness（明度、0〜100%）。CSS ではネイティブサポートなしですが、Figma・Photoshop・Illustratorのデフォルトカラーモデルです：

H: 217°  S: 89%  B: 91%

デザイナーからHSB値を受け取ったら、CSS記述前にHEXまたはRGBに変換してください。

HEX ↔ RGB：変換の仕組み

HEXからRGBへ：2桁ずつ分割し、それぞれを16進数から10進数に変換。

#1a73e8
  1a = 26
  73 = 115
  e8 = 232
→ rgb(26, 115, 232)

RGBからHEXへ：各チャンネルを10進数から16進数に変換し、2桁になるようゼロ埋め。

rgb(26, 115, 232)
  26 = 1a
 115 = 73
 232 = e8
→ #1a73e8

コンバーターは両方向を即座に処理します。暗算は不要です。

RGB ↔ HSL：変換の仕組み

RGBとHSLの変換には、チャンネルを[0, 1]に正規化し、最小値/最大値を求め、色相・彩度・明度にそれぞれ異なる公式を適用する処理が必要です。コードにすると約20行になります。手動計算よりツールを使いましょう。

重要なのはメンタルモデルです：

Hue（色相） = どの色の系統か（赤・黄・緑・シアン・青・マゼンタ）
Saturation（彩度） = どれだけ鮮やかか（0%でグレー）
Lightness（明度） = 黒（0%）か白（100%）にどれだけ近いか

実践的なユースケース

カラースケールの構築

ブランドのHEXを出発点にHSLに変換し、明度だけを変化させます：

--brand-100: hsl(217, 80%, 95%);  /* 最も明るいティント */
--brand-300: hsl(217, 80%, 75%);
--brand-500: hsl(217, 80%, 51%);  /* ベースカラー */
--brand-700: hsl(217, 80%, 35%);
--brand-900: hsl(217, 80%, 20%);  /* 最も暗いシェード */

Lだけを変えることで知覚的に一貫したティントとシェードが生成されるため、このテクニックが機能します。

デザインからのカラー引き継ぎ

FigmaとPhotoshopはHSBがデフォルトです。デザイナーから H:217 S:89 B:91 を受け取ったとき：

コンバーターのHSB入力に貼り付ける
HEX出力をコピー
CSSで使用

コントラスト比のチェック

前景色と背景色の両方をRGBの輝度値に変換し、WCAGの公式を使います。ほとんどのコントラストチェッカーはHEX入力を受け付けます——コンバーターがどんな元フォーマットからでも素早くHEXに変換します。

CSSカスタムプロパティ

CSS変数を使う場合、HSLはプリプロセッサなしでバリアントを作るのに最も簡単なフォーマットです：

:root {
  --primary-hue: 217;
  --primary-sat: 80%;
  --primary: hsl(var(--primary-hue), var(--primary-sat), 51%);
  --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 35%);
}

カラーフォーマット早見表

フォーマット	例	用途
HEX	`#1a73e8`	HTML、CSS、SVG
RGB	`rgb(26, 115, 232)`	CSS、Canvas
RGBA	`rgba(26, 115, 232, 0.8)`	CSS（透明度付き）
HSL	`hsl(217, 80%, 51%)`	CSS、カラースケール
HSLA	`hsla(217, 80%, 51%, 0.8)`	CSS（透明度付き）
HSB/HSV	`H:217 S:89 B:91`	Figma、Photoshop

よくある間違い

HSLの明度とHSBの輝度を混同する：HSLのL=50%は「純粋な」色です。HSBのB=100%はフル彩度の純粋な色です。同じスケールではありません。

不透明度を忘れる：rgb() は不透明です。デザインで透明度を使う場合は rgba() または hsla() が必要です。

JavaScriptでの省略形HEX：#f60 は有効なCSSですが、一部のJavaScriptのカラーパースライブラリでは有効ではありません。不確かな場合は #ff6600 に展開してください。

ブラウザのDevToolsとデザインアプリを行き来するのをやめましょう。カラーコンバーターを使う →