カラーコード変換
HEX、RGB、HSLカラーをワンクリックで相互に変換します。
プレビュー・入力
コード変換結果
デザイナーの「あの色のコード何だっけ？」を1秒で解決
Figmaで選んだ色をCSSに書きたい。クライアントから「RGB (59, 130, 246) で指定して」と言われたけど、HEXで何色？HSLに変換するには？
Web制作やデザインの現場で「色コードの変換」は日常的に発生する作業です。当ツールなら、HEX・RGB・HSL間の変換をリアルタイムで実行。プレビュー付きなので、目で見て確認しながら色を調整できます。
HEX・RGB・HSLの違いと使い分け
💡 HSLのメリット：色の「明るさ」や「鮮やかさ」だけを変えたい場合、HSLなら直感的に数値を調整できます。ダークモード対応のCSSではHSLの活用が増えています。
🔗 関連ツール：画像から直接色を取得したい場合は画像カラーピッカーを、CSSグラデーションを作りたい場合はCSSグラデーション生成もご活用ください。
❓ 色変換でよくある質問（FAQ）
Q. CMYKへの変換はできますか？
A. 当ツールはWeb用途（HEX/RGB/HSL）に特化しています。印刷用のCMYK変換は、色域の違い（モニターと印刷では表現できる色の範囲が異なる）があるため、Adobe Illustrator等の専用ソフトウェアでの変換を推奨します。
Q. 透過色（rgba）の指定方法は？
A. RGBの3値に「不透明度（0〜1）」を追加した形式がrgba(59, 130, 246, 0.5)です。当ツールでRGBの値を取得し、末尾に透明度の数値を追加してCSSに指定してください。
色コードの変換をもっと直感的に
HEX・RGB・HSLを自在に操り、デザインの可能性を広げましょう。
🎨 ツール画面へ戻って色を変換する