HTML/CSSカラーコード変換

カラーコードの表現形式を使い分ける

CSSで色を指定する際、#ffffffのような16進数表記、rgb()やrgba()のような関数型、hsl()など複数の形式があります。
視覚的な明暗や透明度を意識したい場面ではrgba()やhsla()が有効であり、値の調整がしやすいのも特徴です。
用途や目的に応じて使い分けることで、デザインと保守性の両面が向上します。

rgbaで透明度を精密にコントロール

rgba()は、RGB値に加えて透明度（alpha）を0.0〜1.0の範囲で指定できます。
たとえばrgba(0, 0, 0, 0.5)は50%透過の黒色を意味し、重ねた背景との調和や、ホバー時のエフェクトなどに適しています。
不透明度をCSSのopacityで制御するより、要素単位で透過を指定できるのが利点です。

HSL表記は色相・彩度・明度の調整に便利

hsl()はhue（色相）、saturation（彩度）、lightness（明度）の3軸で色を定義します。
hsl(200, 100%, 50%)のように記述すると、青系の鮮やかな色になります。
カラーのバリエーションを系統的に作る場面では、hsl()の方が視覚的な調整がしやすい場合もあります。

透明度の違いでUIの印象が大きく変わる

同じ色でもrgba(255, 255, 255, 1)とrgba(255, 255, 255, 0.2)では、UIへの影響が大きく異なります。
背景画像と組み合わせたときの見え方、要素の階層感、可読性の変化など、透明度の調整は視覚的アクセントの設計に直結します。
特にボタンやモーダル背景には、rgba()やhsla()による透過色が重宝されます。

カラーユニットの変換でコードの一貫性を保つ

プロジェクト内で#16進数とrgba()が混在すると、微調整や共通化が難しくなります。
#ffffff → rgb(255, 255, 255) のように変換しておくことで、透明度の追加やアニメーションとの連携が柔軟になります。
変換ツールを活用して、カラー指定の一貫性と管理性を高めましょう。

// 入力欄と出力欄を取得する
const input = document.getElementById('color-input'); const outputHex = document.getElementById('output-hex'); const outputRGB = document.getElementById('output-rgb'); const outputRGBA = document.getElementById('output-rgba'); 

HTMLにある「色コードを入力する場所」と、「結果を表示する場所」を JavaScript で使えるようにしています。
たとえば入力欄に文字が入ったら、それを読み取ったり、変換結果を出力欄に表示したりするためです。

// 入力欄に文字が入力されたら、convertColor を実行する
input.addEventListener('input', convertColor); 

ユーザーが色コードを入力するたびに、「convertColor」という関数が実行されます。
この関数の中で、色をいろいろな形式に変換して表示します。

function convertColor() {
	const css = input.value;
	const colorRegex = /.../gi;
	// 色を見つけるためのルール（省略）
	let replacedCssHex = css;
	let replacedCssRGB = css;
	let replacedCssRGBA = css;
	...
}

まず、入力された文字列を「css」という名前で取り出します。
その中から「#◯◯◯」や「rgb(...)」のような色を探すためのルール（正規表現）を用意します。
それを使って、あとで変換用のコピーを3種類作ります。
（元のCSSをベースに、HEX用・RGB用・RGBA用の3つ）

// HEX（#RRGGBB）に変換する処理
replacedCssHex = css.replace(colorRegex, (match) => {
	const rgb = colorToRgb(match);
	if (!rgb) return match;
	const hex = rgbToHex(rgb[0], rgb[1], rgb[2]);
	return hex;
}); 

「見つけた色」をHEX形式（例：#FF0000）に変える処理です。
まず、色をRGBという3つの数字に変えて（赤・緑・青）、それをHEXに変換しています。
変えたあとは、もとの色の部分をHEXで置き換えています。

// RGB（rgb(R,G,B)）に変換する処理
replacedCssRGB = css.replace(colorRegex, (match) => {
	const rgb = colorToRgb(match);
	if (!rgb) return match;
	const rgbStr = `rgb(${rgb.join(', ')})`;
	return rgbStr;
}); 

これは RGB 形式に変える処理です。
さっきと同じように、色をいったん RGB に変えて、文字列にして置き換えています。
「どんな形式で書かれていても、とにかく RGB に統一する」という感じです。

// RGBA（透明度つき）に変換する処理
replacedCssRGBA = css.replace(colorRegex, (match) => {
	const rgb = colorToRgb(match);
	if (!rgb) return match;
	const rgbaStr = `rgba(${rgb.join(', ')}, 1)`;
	return rgbaStr;
}); 

これはRGBAという形式に変える処理です。
RGBに「透明度（アルファ値）」を加えたもので、ここでは透明度を1（完全に見える）にしています。
他の形式で書かれた色も、RGBAに直して返しています。

// それぞれ結果を表示する
outputHex.textContent = replacedCssHex;
outputRGB.textContent = replacedCssRGB;
outputRGBA.textContent = replacedCssRGBA; 

変換した結果を、それぞれの出力欄に表示しています。
ユーザーが入力した色が、3つの形式で同時に見えるようになります。
ここから下は、色をRGB形式に変えるための「補助関数たち」です。
難しいことをしているように見えますが、「色をどうやって数字に分解するか」がポイントです。

function colorToRgb(color) {
	if (color.startsWith('#')) {
		return hexToRgb(color);
	} else if (color.startsWith('rgb')) {
		return rgbStringToRgb(color);
	} else if (color.startsWith('rgba')) {
		return rgbaStringToRgb(color);
	}
	return null;
}

この関数では、入力された色がどの形式かを見て、
それに合った方法でRGBに変換するように振り分けています。

function hexToRgb(hex) {
	// 3桁を6桁に変換
	hex = hex.replace(/^#/, '');
	if (hex.length === 3) {
		hex = hex[0]+hex[0] + hex[1]+hex[1] + hex[2]+hex[2];
	}
	const num = parseInt(hex, 16);
	return [num >> 16, (num >> 8) & 255, num & 255];
} 

HEX形式（例：#f00 や #ff0000）を RGB に変える処理です。
3桁の場合は6桁に変えてから、16進数から10進数の3つの数字に分解しています。

function rgbStringToRgb(rgbString) {
	const match = rgbString.match(/\d+/g);
	if (match) {
		return match.slice(0, 3).map(Number);
	}
	return null;
}

rgb(...) の中の数字を取り出して、配列にする処理です。
たとえばrgb(255, 0, 0)を[255, 0, 0]に変えます。

function rgbaStringToRgb(rgbaString) {
	const match = rgbaString.match(/\d+/g);
	if (match) {
		return match.slice(0, 3).map(Number);
	}
	return null;
} 

こちらは rgba(...) の場合です。
透明度（4番目の数字）は使わず、最初の3つ（赤・緑・青）だけ取り出しています。

function rgbToHex(r, g, b) {
	return "#" + ((1 << 24) + (r << 16) + (g << 8) + b) .toString(16).slice(1).toUpperCase();
} 

RGBの3つの数字を HEX に変換する関数です。
見た目はちょっと難しそうですが、やっていることは「3つの数字を16進数で表す」ということだけです。
このコード全体のポイントは、「どんな色の書き方でも、一度RGBにしてから、他の形式に変換する」という流れです。
そうすることで、HEX・RGB・RGBAのどれにでも柔軟に変換できるようになっています。