すべてのツール

カラーコンバーター

色を複数の形式に変換します。

2件中5件の評価

カラーコンバーターは、HEX、HEX alpha、RGB、RGBA、HSV、HSL、HSLAで入力した色を、複数の同等なカラーフォーマットへ変換できる無料ツールです。

どのカラーフォーマットを変換できますか？

HEX、HEX alpha、RGB、RGBA、HSV、HSL、HSLAのいずれかを入力すると、対応している各フォーマットの値を確認できます。デザイン仕様、スタイルシート、外部APIなどで同じ色が異なる形式で表されている場合に便利です。

HEXは、赤、緑、青の各チャンネルを16進数の2桁で表します。通常は#RRGGBBの形式です。
HEXアルファは、不透明度を示すチャンネルを追加した形式です。現在のCSS記法では、一般に#RRGGBBAAと表します。
RGBは、赤、緑、青の各チャンネルを、通常0から255までの値で表します。
RGBAは、RGBにアルファ透明度を加えた形式です。
HSVは、色相、彩度、明度を表します。カラーピッカーではよく使われますが、標準のCSSカラー関数ではありません。
HSLは、色相、彩度、輝度を表します。CSSで直接使用できます。
HSLAは、HSLにアルファ値を加えた形式です。

RGBとHSLは別の色ではなく、同じ色を異なる数学的な方法で表したものです。変換先フォーマットで表現できる範囲内で意図した色をできるだけ維持しながら、表記だけを変更できます。

カラーコンバーターの使い方は？

対応フォーマットの完全なカラー値をColor欄に入力し、出力欄に生成された値を確認またはコピーしてください。

先頭のハッシュ、カンマ、括弧、パーセント記号、アルファ成分なども含め、元の値をそのままコピーします。
Color欄に貼り付けます。
HEX、HEXアルファ、RGB、RGBA、HSV、HSL、HSLAに表示された同等の値を確認します。
使用先が対応しているフォーマットを選びます。CSSルールでは、HEX、RGB、RGBA、HSL、HSLAが一般的です。HSVは、編集画面や色の計算で使われることが多い形式です。

変換処理はサーバー上で実行されます。入力内容はHTTPS経由でサーバーへ送信されますが、保存されません。個別の色が機密情報になることはまれですが、未公開のカラーパレットやデザイントークン一式をオンラインサービスへ送信する前に、機密情報に当たらないか確認してください。

RGBやHSLなどの構文では、空白や句読点も構文の一部です。また、パーセント記号は割合を示す値を区別します。数字だけの値、空の値、無関係なテキストでは色を特定できません。アクセント記号を含む文字やラテン文字以外のテキストにも、これらの数値フォーマット上の定義はありません。

変換後の値はどう読めばよいですか？

各結果は同じ色を別の記法で表したものです。チャンネルの範囲、パーセント、アルファ透明度に注意して確認してください。どの欄をコピーするかは、値を受け取るシステムが対応しているカラー記法によって決まります。

6桁のHEXでは、最初の2桁が赤、次の2桁が緑、最後の2桁が青を表します。たとえば、#336699の各チャンネルの16進数値は33、66、99で、10進数のRGB値では51、102、153に相当します。

色相は通常、色相環上の角度で表します。彩度と、輝度または明度は一般にパーセントで示します。HSLの輝度とHSVの明度は計算方法が異なるため、同じ性質を測る値としてパーセントを比較することはできません。

アルファは不透明度を表します。完全に不透明な色にはアルファ対応フォーマットは不要ですが、半透明の色には必要です。RGBAやHSLAの色を通常のRGB、HSL、6桁のHEXへ移すと、変換先の記法にはアルファチャンネルを記録する場所がありません。

このコンバーターは、詳細な診断メッセージを備えた構文検証ツールとしては説明されていません。不正な入力のどの文字に問題があるのかを正確に特定する目的では使用しないでください。よくあるカラー構文の誤りには、HEXのハッシュがない、括弧が対応していない、パーセント記号が抜けている、アルファ値が想定範囲外になっている、HSLとRGBのチャンネル表記が混在している、といったものがあります。

カラー変換の例

HEX、RGB、HSL、HSVの関係を簡単な例で確認してみましょう。純粋な赤は、次の同等な形式で表せます。

HEX入力 #ff0000
RGBの同等値 rgb(255, 0, 0)
HSLの同等値 hsl(0, 100%, 50%)
HSVの同等値 hsv(0, 100%, 100%)

彩度を抑えた色では、#336699はrgb(51, 102, 153)に相当します。HSL表記はhsl(210, 50%, 40%)です。HSV表記では、色相が210度、彩度が約66.7%、明度が60%になります。画面上で小数が丸められたり空白の入れ方が異なったりしても、実用上の意味は変わらない場合があります。

透明度も分かりやすい例です。rgba(255, 0, 0, 0.5)とhsla(0, 100%, 50%, 0.5)は、どちらも不透明度50%の赤を表します。一般的な8桁のCSS HEX表記では、対応する値は#ff000080です。80は量子化されたアルファバイトを示します。

色を変換した方がよいのはどんなときですか？

受け取り側のアプリケーションが別の記法を必要としている場合や、別の表現にするとデバッグしやすくなる場合は、色を変換する価値があります。たとえば、Figmaの値をCSSカスタムプロパティへ移す、Chrome DevToolsで見つけたRGBA値を確認する、APIペイロード用のカラーフィールドを用意する、デプロイ前に外部テーマのデータを確認するといった用途があります。

現在のカラー記法に変換先がすでに対応しているなら、通常は変換する必要はありません。機械処理用のCSSという理由だけで6桁のHEXをRGBへ変えても、利点はほとんどありません。また、何度も相互変換すると、HSLやHSVの値に丸め誤差が生じることがあります。同様に、すべての色が完全に不透明だと分かっている場合は、アルファチャンネルを追加しないでください。

既知の値を変換するのではなく、見た目を確認しながら色を選びたい場合は、カラーピッカーの方が直接的です。また、カラー変換は、コントラスト検証、色覚特性のシミュレーション、カラープロファイル管理の代わりにはなりません。数値が同等だからといって、前景のテキストがWCAGのコントラスト要件を満たすとは限りません。

よくある質問

CSSの色名も入力できますか？

いいえ。対応入力として明記されているのはHEX、HEX alpha、RGB、RGBA、HSV、HSL、HSLAです。red、rebeccapurple、transparentなどの名前は、対応入力に含まれていません。色名を数値のCSSカラー値に変換してから入力してください。

3桁のHEX値は入力できますか？

HEXは対応入力に含まれていますが、対応するHEXの桁数は明記されていません。確実に入力するには、#369のような短縮表記を#336699へ展開してください。アルファを含む4桁の短縮表記も同様です。

カラー値ではなくCSS宣言を貼り付けてもよいですか？

宣言全体ではなく、カラー値だけを入力してください。たとえば、color: #336699;ではなく#336699を使用します。プロパティ名とセミコロンは、カラー値そのものには含まれません。JSONや設定ファイルから値をコピーする場合は、前後の引用符も削除してください。

広色域やカラープロファイルの情報も保持されますか？

いいえ。広色域フォーマットや埋め込みカラープロファイルは、対応形式として記載されていません。Display P3、Lab、LCH、ICCプロファイルのデータには、利用可能なHEX、RGB、HSL、HSV欄では表現できない情報が含まれます。プロファイルを考慮した変換が必要な場合は、カラーマネジメント対応のアプリケーションを使用してください。

変換後の値に小数が含まれるのはなぜですか？

変換元のRGBチャンネルが整数でも、HSLやHSVの計算ではパーセントが小数になることがあります。その値を丸めると、後でRGBへ戻した際に色がわずかに変わる可能性があります。デザイントークンとして保存するときは利用可能な精度を維持し、変換先のフォーマットやコーディング規約で必要な場合にだけ丸めてください。