無料オンラインカラーコードコンバーター
HEX、RGB、HSL、HSV、CMYKの間で色を変換します。
Who uses the カラーコードコンバーター?
- デザインツールのHEXサンプルをCSS変数用にRGBやHSLへ変換するフロントエンド開発者。
- HEX、RGB、HSLが同じ色をどう異なる形で表現するかを学ぶ学生。
- スタイルガイドやスクリーンショットからコピーした色の値を確認するデザイナー。
How the カラーコードコンバーター works
色の形式に合ったタブ——HEX、RGB、HSLのいずれか——を選びます。
値を入力します：#FF5733のようなHEXコード、またはR/G/BやH/S/Lの数値フィールドです。
入力すると、他の2つの形式とスウォッチが自動的に更新されます。
スウォッチの下の結果行でHEX、RGB、HSLの値を確認します。
Tips & tricks
- 入力形式に合わせてタブを切り替えましょう——各タブのフィールドは独立しており、単一の万能入力欄ではありません。
- スウォッチはリアルタイムに更新されるため、コピーする前に変換結果を視覚的に確認できます。
- 色の明るさや強さを調整するにはHSLの方が扱いやすいことが多いです——明るくするにはLを上げ、彩度を落とすにはSを下げます。
- アルファ（透明度）チャンネルはありません——透明度が必要なCSSでは、変換後に手動でアルファ値を追加してください（例：rgba(r, g, b, 0.5)）。
Frequently Asked Questions
このツールが対応しているCSSカラー形式は？
このツールはHEX（3桁または6桁）、RGB、HSLの間で変換します——最も一般的な3つのCSSカラー形式です。現時点ではRGBA/HSLAのアルファチャンネル、HSB/HSV、CMYK、「coral」のような名前付きCSSカラーには対応していません。
RGBとHSLの違いは？
RGBは赤・緑・青の各成分（それぞれ0〜255）で色を定義します。HSLは色相（0-360°）、彩度（0-100%）、明度（0-100%）で定義します——RGBを再計算せずに明るくしたり彩度を下げたりできるため、色調整には直感的なことが多いです。
「coral」のような名前付きCSSカラーをHEXに変換するには？
このツールは名前付きカラーを検索しません——代わりにそのHEX値を直接入力してください（coral = #FF7F50）。名前付きカラーのHEX値はCSS Color Module仕様や任意のブラウザのカラーピッカーで確認できます。
HSB/HSVとは何で、このツールは対応していますか？
HSB（色相、彩度、明度）はHSVとも呼ばれ、Photoshopや多くのデザインツールで使われています——HSLに似ていますが、3番目のチャンネルの定義が異なります。このツールはHEX/RGB/HSLのみを変換します。元の値がHSBの場合は、先にデザインツールで変換してください。
CSSのカスタムプロパティ（変数）で色を変換できますか？
変数名ではなく実際の色の値を入力してください。--my-colorを先にその値に解決してから変換してください。このツールは実際の色の値を扱うもので、CSS変数の参照は扱いません。
Is my data safe when using the カラーコードコンバーター?
Completely safe. The カラーコードコンバーター processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the カラーコードコンバーター output in commercial projects?
Yes. The カラーコードコンバーター is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the カラーコードコンバーター follow official standards?
Yes. The カラーコードコンバーター is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.