カラーコード変換
色を入力してHEX、RGB、HSLの値を確認・コピーします。
#624DE3CC
このツールについて
カラーコード変換ツールは、1つの色をHEX、RGB、HSLの各形式で同時に表示し、相互に変換します。色を直接入力したり、プリセットから選んだり、スポイト機能で画面から取り込んだりでき、透明度の調整にも対応しています。Webデザイン、UI制作、CSS、画像編集などで、色を必要なコード形式に変換するときに便利です。
使い方
色を選ぶ
HEX、RGB、HSLのいずれかの欄に値を入力するか、プリセットの色を選択します。対応している環境では、スポイトボタンを使って画面上の色を直接取り込むこともできます。
透明度を調整
透明度スライダーを動かして、色の不透明度を調整します。設定した透明度は上部のプレビューとカラーコードに反映されます。
結果を確認してコピー
プレビューで色を確認し、HEX、RGB、HSLの各欄にあるコピーボタンを押すと、必要な値をクリップボードにコピーできます。
主な特徴
HEX・RGB・HSLを同時表示
1つの形式で色を入力すると、同じ色のHEX、RGB、HSLの値をまとめて確認できます。
リアルタイムプレビューと透明度
色の値や透明度を変更するとプレビューに即座に反映され、スライダーで半透明の色も作れます。
スポイトとプリセットカラー
対応ブラウザではスポイトボタンで画面から色を直接取り込めます。よく使うプリセットカラーはクリックするだけで適用できます。
形式ごとに個別コピー
HEX、RGB、HSLの値をそれぞれコピーして、CSSやデザインツール、ドキュメントでそのまま使えます。
値を直接入力
カラーコードが分かっている場合は、欄に直接入力して変換結果を確認できます。
ブラウザ内で完結
入力した色の値や変換結果はブラウザ内だけで処理され、サーバーに送信されることはありません。
使用例
CSSのカラーコード変換
デザインカンプから受け取ったHEXカラーをRGBやHSLに変換し、CSSスタイルに利用できます。
デザインツール間での色の受け渡し
ツールごとに要求される色の形式が異なる場合、同じ色をそれぞれ必要なコード形式に変換できます。
半透明の背景色を作成
透明度を調整して、オーバーレイや背景、ボタン、枠線に使える半透明の色を作れます。
画面から色を取り込む
スポイト機能を使って、Webページや画像、アプリの画面に表示された色を選び、コードで確認できます。
ブランドカラーの管理
ブランドカラーのHEX、RGB、HSLの値をまとめて管理し、Webや印刷物、デザインデータで一貫して使えます。
よくある質問
HEX、RGB、HSLの違いは？
HEXは色を16進数で表します（例：#8AD0FF）。RGBは赤・緑・青の強さを数値で表し、HSLは色相・彩度・明度で色を表します。
どの形式を使えばいい？
HEXはシンプルで、Webやデザインデータで広く使われています。色のチャンネルを直接調整したい場合はRGB、色相や明度を直感的に変えたい場合はHSLが便利です。
透明度はカラーコードにどう反映される？
透明度のあるHEXは、通常の6桁のコードの後ろにアルファ値が加わった8桁の形式で表示されます。たとえば#8AD0FFCCでは、最後の2桁が透明度を表します。
6桁と8桁のHEXの違いは？
6桁のHEXには赤・緑・青の値だけが含まれます。8桁のHEXは末尾にアルファ値が加わり、透明度まで表します。
透明度100%と0%は何を意味する？
100%は完全に不透明、0%は完全に透明です。中間の値では背景が透けて見える半透明の色になります。
RGBの値の範囲は？
RGBの値は赤・緑・青それぞれ0〜255の範囲で表します。値が大きいほどその色成分が強くなります。
HSLの各値は何を表す？
Hは色相で、通常0〜359度の値です。Sは彩度、Lは明度を表し、それぞれパーセントで示します。
スポイトはすべてのブラウザで使える？
ブラウザや実行環境によって対応状況は異なります。対応していない環境では、色の入力欄やプリセットカラーを利用してください。
プリセットを選んだあと色を編集できる？
はい。プリセットを選んだ後も、HEX、RGB、HSLの値や透明度を調整して色を微調整できます。
コピーボタンは何をコピーする？
各コピーボタンは、その形式での現在の色の値をコピーします。必要なHEX、RGB、HSLの値だけを個別にコピーできます。
入力した色はサーバーに送信される？
いいえ。すべての処理はブラウザ内で行われ、入力した色の値や変換結果がサーバーに送信されることはありません。
関連ツール
