画像・デザイン・QR最終更新日: 2026-08-11
色変換
HEX・RGB・HSL形式の相互変換。カラーピッカーから直接選択もできます。
最近使ったツール
#8b5cf6
HEX
RGB
HSL
使い方
- 1
色を指定
HEX・RGB・HSLのいずれかの形式で色を指定します。
- 2
自動変換
他の形式に自動変換されます。
- 3
コピー
必要な形式の値をコピーします。
このツールの特長
- HEX・RGB・HSLの相互変換
- カラーピッカーで直感的に色を選択
- 3桁の短縮HEXにも対応
- 各形式をワンクリックでコピー
こんな場面で便利
Webデザインの色指定
デザインツールのHEX値を、CSSにそのまま使えるRGBやHSLに変換できます。
ブランドカラーの統一
ブランドカラーを各形式に変換して、Web・印刷・資料で一貫させます。
デザインツール間の変換
ツールごとに求められる色形式の違いを、その場で解決できます。
詳しい説明
WebデザインやUI実装では、色をHEX（#ff0000）、RGB（rgb(255, 0, 0)）、HSL（hsl(0, 100%, 50%)）などの形式で指定します。ツールや環境によって必要となる形式は異なるため、相互変換が頻繁に必要になります。
カラーピッカーから直接色を選ぶこともできます。選択した色は3つの形式すべてに即座に変換され、それぞれワンクリックでコピーできます。
HSL形式は色相（Hue）、彩度（Saturation）、明度（Lightness）で色を表すため、色相環での調整や、同じ色相の濃淡バリエーションを作るのに適しています。
よくある質問
短縮HEX（#f00）も変換できますか?
はい。#f00のような3桁の短縮HEXも自動的に展開して変換します。
アルファ値（透明度）は扱えますか?
現在は不透明色のみ対応しています。アルファ値付きのRGBA・HSLA形式には対応していません。
色の名前（redなど）は使えますか?
現在はHEX・RGB・HSLの形式のみ対応しています。
HEXカラーコードをRGBに変換する方法は?
HEXを入力すると、RGBとHSLに自動で変換されます。
関連ツール
すべての処理はブラウザ内で実行されます。ファイルがアップロードされることはありません。
検証: 色入力・変換・コピーを回帰対象として管理
今日の豆知識
人間の目は「緑」の色の違いに最も敏感だと言われています。