HEX / RGB / HSL カラーコンバーター

このツールとは？

ウェブ上の色は、いくつかの同等の形式で記述されます。HEX（#4f46e5）は、CSSやデザイン引き継ぎの場面で広く使用されている簡潔な形式です。RGB（rgb(79, 70, 229)）は、赤、緑、青の各成分を直接指定する形式であり、コーディングで頻繁に必要とされます。 HSL (hsl(243, 75%, 59%)) は、色相（hue）、彩度（saturation）、明度（lightness）を表す形式であり、色を暗くしたり彩度を下げたりするなど、色の調整を行う際に最も直感的な形式です。

これらはすべて同じ色を表しています。このツールは、これらの色を正確に変換し、プレビューを表示するので、意図した色かどうかを確認することができます。

なぜこれを使うのか？

• HEX（3桁または6桁）、RGB、HSLのいずれの形式でも入力を受け付け、すべての形式で出力します。
• 実際の色を数字だけでなく目で確認できるライブプレビューのカラー見本です。
• 目で見て色を選びたいときに便利なビジュアルカラーピッカー。
• フォーマットごとにワンクリックでコピーでき、CSSやコードにすぐに活用できます。
• 無料、即時、アップロード不要。

使い方

1. 色を入力または貼り付けてください：#4f46e5、rgb(79, 70, 229)、hsl(243, 75%, 59%)のいずれも使用可能です。
2. または、カラーピッカーをクリックして、目視で色を選んでください。
3. 検索結果にある3つの形式すべてを読み込み、プレビューのスウォッチを確認してください。
4. 必要な書式の横にある「コピー」をクリックしてください。

例

入力

#4f46e5

出力

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)

3つの表記、1つの同じ色。

どの形式を使うべきでしょうか？

これら3つはすべて、まったく同じ色を表現しています。どの表現を選ぶかは、正確さではなく、その場面でどの表現が最も扱いやすいかという点によるものです。

一般的な利用例

• デザインツール上で視覚的に色を選び、それをCSSやコードで必要な正確なHEX値またはRGB値に変換すること。
• HSLに変換し、明度を調整してから再び変換することで、関連する色調のセット（明るい／暗いバリエーション）を生成する。
• それぞれ異なる形式が求められるさまざまなツール間で、ブランドカラーを統一すること――ロゴファイルはRGB、スタイルガイドはHEX、テーマ設定用のCSS変数にはHSLが必要といった場合など。
• スクリーンショットやデザインファイルから抽出した色（多くの場合RGBで指定される）が、スタイルシート内のHEX値と一致していることを確認する。

よくある質問