ToolDeck

色変換ツール

HEX、RGB、HSL、HSV形式間で色を変換。ビジュアルカラーピッカー付き

サンプルを試す

スウォッチをクリックしてカラーピッカーを開く

または下の値を直接編集

HEX
RGB
HSL
HSV

色変換とは?

色変換ツールは、ある表記法から別の表記法へ色の値を変換します — たとえばHEXトリプレット(#6366F1)からRGBタプル(99, 102, 241)またはHSLトリプル(239, 84%, 67%)への変換です。同じ色はHSVトリプル(239, 59%, 95%)としても表現できます。各形式は異なる数学的モデルを使って同じ見た目の色をエンコードしており、ツール・言語・APIによって求められる形式が異なります。

HEXとRGBはどちらも赤・緑・青の光の混合として色を表します。HEXは、RGBが10進数で表す0〜255の3チャンネル値を16進数でコンパクトに表したものです。HSL(色相、彩度、明度)とHSV(色相、彩度、明るさ)は同じ情報を円柱座標系に再配置したもので、色相はカラーホイール上の角度(0〜360度)、彩度と明度はパーセンテージで表されます。これにより、同じ色相の明るい・暗いバリエーションを作成する際にHSLとHSVはより直感的に扱えます。

これらの形式間の変換には、明確に定義された計算式が必要です。W3C CSS Color Module Level 4仕様には、ブラウザがCSSカラーをsRGBトリプレットに解決するためのアルゴリズムが記載されています。変換式は決定論的で、同じ入力からは常に同じ出力が得られるため、値の丸めやクランプがない限り変換は可逆です。多くのカラーピッカーやデザインツールは、内部でこれらと同じ計算式を使用しています。

このツールを使う理由

デザインツールはある形式で色を出力し、CSSでは別の形式が必要で、呼び出すAPIはさらに別の形式を求めます。変換コードを書いたり正しい計算式を探したりする代わりに、値を貼り付けるだけですべての形式を一度に取得できます。

リアルタイム即時変換
色を入力またはピッカーで選択すると、HEX・RGB・HSL・HSVがリアルタイムで更新されます。送信ボタンもサーバーへの通信も不要です。
🔒
プライバシー優先の処理
すべての変換処理はブラウザ内で実行されます。色の値・使用データ・クッキーはいかなる場所にも送信されません。
🔀
4形式を同時に表示
1つの入力からHEX・RGB・HSL・HSVを同時に生成します。必要な形式をワンクリックでコピーできます。
📋
アカウント登録不要
ページを開いてすぐに変換を開始できます。サインアップ・メールアドレス・利用制限は一切ありません。読み込み後はオフラインでも動作します。

色変換ツールのユースケース

CSS開発
デザイナーからFigmaのHEX値を受け取ったが、コンポーネントライブラリのテーマにはHSLが必要な場合。値を変換してCSSカスタムプロパティやTailwindの設定ファイルに直接使用できます。
バックエンドAPI連携
チャート生成のためにエンドポイントがRGB配列で色を受け取る場合。スタイルガイドのブランドHEXコードをAPIが求める整数トリプレットに変換します。
デザインシステムの管理
デザインシステムを文書化する際、すべての色トークンをクイックリファレンス用にHEXで、Canvasレンダリング用にRGBで、プログラムによるシェード生成用にHSLで記載する必要があります。
QAとビジュアルテスト
スクリーンショットのピクセルカラー(通常はブラウザのDevToolsでRGBとして表示)をFigmaのスペックから得た期待されるHEX値と比較する場合。素早い変換で不一致を確認または検出できます。
データ可視化
D3.jsやChart.jsなどのチャートライブラリは、メソッドによって異なる形式で色を受け取ります。一度変換してデータセット設定全体で統一した表記法を維持できます。
カラー理論の学習
コンピューターグラフィックスやウェブデザインを学ぶ学生は、同じ色がHEX・RGB・HSL・HSVにどのようにマッピングされるかを確認できます。一つのチャンネルを調整して他の値が変化するのを観察することで、色モデルの関係についての直感が養われます。

色形式リファレンス

下の表は最もよく使われる5つの色形式を示し、同じインディゴカラー(#6366F1)を各表記法で表示しています。HEXとRGBはCSSとJavaScriptで最も広くサポートされています。明度と彩度の調整が直感的なため、テーマ設定にはHSLが好まれます。HSVはPhotoshopやFigmaなどのグラフィックデザインソフトのカラーピッカーで使われるモデルです。

形式例(インディゴ)チャンネル主な用途
HEX#6366F16 (or 3/8)CSS, design tools, brand guides
RGBrgb(99, 102, 241)3 (0–255 each)CSS, Canvas API, image processing
HSLhsl(239, 84%, 67%)3 (deg, %, %)CSS, color theming, accessibility tuning
HSVhsv(239, 59%, 95%)3 (deg, %, %)Color pickers, Photoshop, Figma
CMYKcmyk(59%, 58%, 0%, 5%)4 (0–100% each)Print design, prepress workflows

HEX vs RGB vs HSL

3つの形式はすべて同じsRGB色空間を表します。違いはデータの公開方法であり、これがコンテキストによって可読性と操作のしやすさに影響します。

HEX
6桁の16進数文字列(または3桁の短縮形)。CSS・デザインツール・ブランドガイドラインでコンパクトかつ汎用的です。一目で色相を読み取ることは難しく、#6366F1からは色相がわかりません。アルファ透明度のためのオプションの8桁形式(#6366F180)もサポートしています。
RGB
赤・緑・青チャンネルの0〜255の3つの整数値。Canvas 2D・WebGL・多くの画像処理ライブラリのネイティブ形式です。チャンネルごとの操作は簡単ですが、知覚的な明度を調整するには3つの値すべてを同時に変更する必要があります。
HSL
色相(0〜360度)、彩度(0〜100%)、明度(0〜100%)。人間が読みやすいよう設計されています。色を明るくするにはLを増やし、彩度を下げるにはSを減らします。CSSはネイティブでhsl()表記をサポートしており、モダンCSSのcolor-mix()と相対カラー構文はこれを基に構築されています。

コード例

一般的な言語と環境でのHEX・RGB・HSL間の色変換。比較しやすいよう、すべての例で同じインディゴカラー(#6366F1)を使用しています。

JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]
Python
import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)
Go
package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}
CSS
/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

よくある質問

HSLとHSVの違いは何ですか?
どちらも色相と彩度を使用しますが、明るさの定義が異なります。HSLは明度(Lightness)を使用し、50%が純色、0%が黒、100%が白です。HSVは明度(Value)を使用し、100%が純色、0%が黒です。HSVには直接の白のエンドポイントがありません。実際には、HSLはCSSとウェブ開発で使用され、HSVはPhotoshopやFigmaなどのデザインソフトのカラーピッカーで採用されているモデルです。
JavaScriptでHEXをRGBに変換するには?
parseInt(hex, 16)で16進数文字列を整数に変換し、ビットシフトで各チャンネルを取り出します:赤は(n >> 16) & 255、緑は(n >> 8) & 255、青はn & 255です。これは先頭の#があってもなくても、任意の6桁の16進数文字列に対応します。#F0Fのような3桁の短縮形の場合は、パース前に各桁を展開(FF00FF)してください。
CSSでHSLを直接使用できますか?
はい。すべてのモダンブラウザはCSSでhsl()とhsla()をサポートしています。CSS Color Level 4からは、スペース区切りの構文hsl(239 84% 67%)が使用できます(カンマ区切りも引き続き使用可能)。アルファを4番目のパラメーターとして追加することもできます:hsl(239 84% 67% / 0.5)。Safari・Chrome・Firefox・Edgeはすべてこの構文をサポートしています。
色変換はデータが失われますか?
数学的には失われません。HEX・RGB・HSL・HSVはすべて同じsRGB色空間を表し、変換は可逆です。実際には、HEXがチャンネルごと256段階に制限されており、HSLのパーセンテージは通常整数に丸められるため、わずかな丸め誤差が生じることがあります。何度も変換を繰り返すと、1〜2単位の丸め誤差が蓄積される可能性があります。
8桁のHEX形式とは何ですか?
8桁のHEX形式は、標準の6桁のHEXカラーにアルファ(透明度)の2桁を追加したものです。たとえば#6366F180は、同じインディゴカラーを50%の不透明度で表します(0x80 = 128、255の約50%)。この表記はすべてのモダンブラウザのCSSでサポートされています。短縮形は#63F8のように4桁です。
同じ色が別のモニターで異なって見えるのはなぜですか?
色の見え方はモニターのカラープロファイル・輝度・ガンマキャリブレーションに依存します。カラープロファイルが異なれば、2つの画面は同じsRGB値(#6366F1)を異なる色に表示することがあります。色変換ツールは定義された色空間(通常sRGB)で動作し、数学的に正確な出力を生成します。知覚上の差異は変換エラーではなく、ディスプレイのキャリブレーションの問題です。
色の明るいまたは暗いバリエーションを選ぶには?
色をHSLに変換してLの値(明度)を調整します。Lを100%に近づけると明るいティント、0%に近づけると暗いシェードが得られます。色相と彩度はそのまま維持されます。CSSではhsl(239 84% 80%)のように直接指定できます(hsl(239 84% 67%)の明るいバージョン)。モダンCSSではcolor-mix(in srgb, #6366F1, white 30%)を使うと、手動変換なしで同じ効果を得られます。