HEX、RGB、HSL の間で色を変換する方法
簡単な回答
色を変換するには: カラー コンバーターを開き、任意の形式 (HEX、RGB、HSL) で色を入力すると、ツールは他のすべての形式で同等の色を即座に表示します。すべての変換はブラウザ内でローカルに行われます。データはアップロードされません。
導入
色は、HEX (#ff6600)、RGB (rgb(255, 102, 0))、HSL (hsl(24, 100%, 50%)) などの複数の形式で表現できます。ツールやコンテキストが異なれば使用する形式も異なります。CSS は HEX または RGB を使用することが多く、デザイン ツールは HSL を使用する場合があり、APIs はいずれかを使用する場合があります。形式間で変換すると、あるシステムで定義された色を、別のシステムが必要なコンテキストで使用できるようになります。このガイドでは、ブラウザで色を変換する方法を説明します。
ステップバイステップ
-
カラーコンバータツールを開く
カラー コンバーター ツール ページに移動します。このツールは、HEX、RGB、HSL、HSV、CMYK 形式をサポートしています。
-
あなたの色を入力してください
サポートされている形式で色の値を入力または貼り付けます。例: '#ff6600'、'rgb(255, 102, 0)'、'hsl(24, 100%, 50%)'。このツールは入力形式を自動検出します。
-
同等のフォーマットをすべて確認してください
このツールは、HEX、RGB、HSL、HSV、CMYK のすべての形式でカラーを同時に表示します。また、カラー プレビュー見本も表示されるので、変換が正しいことを確認できます。
-
必要な形式をコピーします
任意の形式の横にある [コピー] ボタンをクリックして、その値をクリップボードにコピーします。 CSS、デザイン ツール、またはアプリケーションで使用してください。
-
色を調整する（オプション）
一部のツールでは、スライダー (HSL の場合: 色相、彩度、明度) を使用して色を調整し、すべての形式がリアルタイムで更新されるのを確認できます。これは、関連する色や色合いを見つけるのに役立ちます。
例
HEX ～ RGB および HSL
入力: #ff6600
出力: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB ～ HEX
入力: rgb(0, 128, 255)
出力: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
HSL ～ HEX
入力: hsl(120、100%、50%)
出力: HEX: #00ff00
RGB: rgb(0, 255, 0)
よくある問題
- HEX # ありと # なし — 一部のツールでは # プレフィックスが必要ですが、その他のツールでは必要ありません。当社のコンバータは両方を受け入れます。
- 3 桁と 6 桁 HEX —#f60 は #ff6600 の短縮形です。どちらも有効です。コンバーターは 6 桁に正規化します。
- HSL 色相範囲 - 色相は 0 ～ 360 度 (円) です。 0 と 360 は両方とも赤です。 360 を超える値はラップアラウンドします。
- 色空間の違い — HEX、RGB、および HSL はすべて sRGB です。 CMYK は異なる色空間 (印刷) であり、変換は近似値です。
ヒント
- カラー バリエーションの作成には HSL を使用します。色相、彩度、明度の調整は RGB よりも直感的です。
- CSS には HEX を使用します。これは、スタイルシートで最もコンパクトで広くサポートされている形式です。
- アルファ透明度を設定する必要がある場合は、RGB を使用します —rgb(255, 102, 0, 0.5) を不透明度 50% に設定します (または 8 桁の HEX: #ff660080 を使用します)。
- カラー コンバーターを使用すると、すべてのカラー フォーマット間のプライベートな変換を瞬時に行うことができます。