カラーコードを変換する方法【HEX/RGB/HSL/RGBA対応】| 0-TOOLs

「デザインツールで選んだ色のHEXコードは分かるけど、CSSでRGBAとして指定したい」「PhotoshopとFigmaで同じ色を使いたいのに、カラーモデルが違って困る」—Web制作やデザイン作業では、カラーコードの変換が頻繁に必要になります。

0-TOOLsのHSVカラーピッカーは、HEX・RGB・HSL・RGBAを同時表示してワンクリックでコピーできる無料ツールです。PhotoshopやFigmaと同じHSV方式で直感的に色を選べます。

カラーコードの種類と違い

Web制作・デザインで使われる主なカラーフォーマットを整理します。

補足 HSLはHue（色相）・Saturation（彩度）・Lightness（明度）の略で、明るさや鮮やかさを直感的に調整しやすいフォーマットです。対してHSVはLightnessの代わりにValue（明度）を使います。

0-TOOLsのHSVカラーピッカーを使います。インストール不要・登録不要で、ブラウザからすぐ使えます。

1
HSVカラーピッカーを開く カラーパレットが表示されます。
2
パレットで色を選ぶ 上部のカラーパネルでは彩度・明度（SV）を、下部の虹色スライダーでは色相（H）を選択します。PhotoshopやFigmaと同じ操作感で直感的に色を決められます。
3
必要なフォーマットのコピーボタンを押す HEX・RGB・HSL・RGBAの4つが同時に表示されます。各カードの右上のアイコンをクリックするとコードがクリップボードにコピーされます。
4
お気に入りの色を保存する（オプション） 「＋ Save」ボタンで現在の色をツール内に保存できます。ブランドカラーや繰り返し使う色をストックしておくと便利です。

ヒント HEXコードが決まっているときは、プレビューエリアをクリックして直接HEXコードを入力することもできます。

今すぐカラーコードを変換する

0-TOOLsの無料カラーピッカーで
HEX・RGB・HSL・RGBAを一括確認できます

登録不要・インストール不要・完全無料

このツールが採用しているHSV方式（Hue・Saturation・Value）はPhotoshopのカラーピッカーやFigmaの色選択と同じ仕組みです。

正方形パネルの横軸が彩度（Saturation）・縦軸が明度（Value）を表します。左上が白、右下が純色、左下が黒という位置関係を覚えると、直感的に目的の色に近づけます。

カラーコードをその都度調べて変換する手間を省き、制作に集中したいときにぜひ活用してください。