Color · CSS
カラーコード変換
HEX・RGB・HSL・HSV を相互変換。カラーピッカーで直感的に色を選択でき、 各形式をワンクリックでコピー可能。すべての処理はブラウザ内で完結します。
HEX
#6366F1
RGB
rgb(99, 102, 241)
R
G
B
HSL
hsl(239, 84%, 67%)
H
S
L
HSV
hsv(239, 59%, 95%)
H
S
V
使い方
§ 01- カラープレビューをクリックしてカラーピッカーを開き、色を選択します。
- HEX 入力欄に
#1a2b3cや#abc形式で直接入力することもできます。 - RGB / HSL / HSV の数値を個別に変更すると、他の形式もリアルタイムで更新されます。
- 各行の「コピー」ボタンで CSS に貼り付け可能な文字列をクリップボードにコピーします。
実装コード
§ 02外部ライブラリなし。Web 標準の算術演算のみで実装しています。
// HEX → RGB
function parseHex(hex) {
const clean = hex.replace(/^#/, '').trim()
if (clean.length === 3) {
return {
r: parseInt(clean[0] + clean[0], 16),
g: parseInt(clean[1] + clean[1], 16),
b: parseInt(clean[2] + clean[2], 16),
}
}
if (clean.length === 6) {
return {
r: parseInt(clean.slice(0, 2), 16),
g: parseInt(clean.slice(2, 4), 16),
b: parseInt(clean.slice(4, 6), 16),
}
}
return null
}
// RGB → HSL
function rgbToHsl(r, g, b) {
const [rn, gn, bn] = [r / 255, g / 255, b / 255]
const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn)
const l = (max + min) / 2
if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h
switch (max) {
case rn: h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6; break
case gn: h = ((bn - rn) / d + 2) / 6; break
default: h = ((rn - gn) / d + 4) / 6
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }
}
// RGB → HSV
function rgbToHsv(r, g, b) {
const [rn, gn, bn] = [r / 255, g / 255, b / 255]
const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn)
const v = max, d = max - min
const s = max === 0 ? 0 : d / max
let h = 0
if (d !== 0) {
switch (max) {
case rn: h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6; break
case gn: h = ((bn - rn) / d + 2) / 6; break
default: h = ((rn - gn) / d + 4) / 6
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), v: Math.round(v * 100) }
}よくある使用例・注意点
§ 03CSS での使い分け
HTML/CSS では
color: #1a2b3c（HEX）、rgb(26, 43, 60)、hsl(210, 40%, 17%) はすべて同じ色を表します。 透明度を付けたい場合は rgba() や hsla()、 または 8 桁 HEX（#1a2b3cff）を使用します。HSL の利点
HSL（色相・彩度・明度）は人間の直感に近い表現です。同系色を作るには H（色相）を固定したまま S・L を変化させるだけで済みます。デザインシステムのカラーパレット生成に特に有用です。
HSV と HSL の違い
HSV（色相・彩度・明度）は画像処理や色選択 UI でよく使われます。 V=100% が「純色＋白混合なし」を意味するのに対し、HSL の L=50% が純色に相当します。 Photoshop や多くのカラーピッカー UI 内部は HSV 系を使っています。
丸め誤差について
RGB → HSL → RGB のように変換を繰り返すと、整数丸めにより元の値と 1 程度ずれることがあります。 これは仕様上の丸め誤差であり、実用上問題はありません。精度が必要な場合は HEX をマスター値として保持してください。
関連ツール
§ 04ソースコード
§ 05テストコードを含む実装全体は GitHub で公開しています。lylgamin/tool-nest — app/color-converter ↗