カラーコード変換
HEX、RGB、HSLの色コードを相互に変換して同期します。
Edit any field to sync all color formats.
フィードバック
このツールは役に立ちましたか？
概要
HEX/RGB/HSL を相互変換し、値を同期表示します。CSS実装やデザイン受け渡し時の色確認に便利です。
使い方
- HEX/RGB/HSLいずれかの形式で色を入力します。
- 他形式への変換結果を確認します。
- 必要形式をコピーして利用します。
使用例
-
HEX→RGB
入力: #3366ff
出力: rgb(51, 102, 255)
-
RGB→HSL
入力: rgb(255, 0, 0)
出力: hsl(0, 100%, 50%)
補足
- 各形式の入力構文が正しい必要があります。
- 表示色はモニタープロファイル差の影響を受けます。
- 丸めにより値がわずかに変化することがあります。
よくある質問
- 値が少しずれるのはなぜ？
- 丸め処理や表示環境差が原因です。
- 短縮HEXは使えますか？
- 有効構文なら利用可能で、内部で展開される場合があります。
- アルファ値は扱えますか？
- 現UIの対応範囲を確認してください（基本はHEX/RGB/HSL）。
このツールを埋め込む
以下のiframeをHTMLページに貼り付けると、カラーコード変換をあなたのサイトに埋め込めます: