HEX → RGBA 変換
#RGB・#RGBA・#RRGGBB・#RRGGBBAA を alpha まで正確にデコードして rgba() へ変換。ライブスウォッチとコピー可能な結果。
ツールを開く — HEX → RGBA 変換HEX → RGBA 変換 vs RGBA → HEX 変換
HEX → RGBA 変換 と RGBA → HEX 変換 — どう違う？
結論から: 両者は鏡の関係です。HEX to RGBA は #RGB、#RGBA、#RRGGBB、#RRGGBBAA をバイト単位で正確な rgba() にデコードします。RGBA to HEX は rgb()、rgba() を #RRGGBB または 8 桁の #RRGGBBAA にエンコードします。目的の形式へ向かう方向のツールを選んでください。
HEX → RGBA 変換 と RGBA → HEX 変換 の比較
| HEX → RGBA 変換 | RGBA → HEX 変換 | |
|---|---|---|
| 用途 | #RGB・#RGBA・#RRGGBB・#RRGGBBAA を alpha まで正確にデコードして rgba() へ変換。ライブスウォッチとコピー可能な結果。 | rgb()・rgba() を #RRGGBB または #RRGGBBAA に変換。チャネルごとの確認と alpha の正確な丸めをローカルで行う。 |
| 入力 | #RGB、#RGBA、#RRGGBB、#RRGGBBAA | rgb() または rgba()。パーセント記法は拒否されます |
| 出力 | バイト単位で正確な alpha をデコードした rgba() とライブスウォッチ | 大文字の #RRGGBB。alpha が 1 未満の場合は #RRGGBBAA |
| 主な用途 | HEX トークンから CSS や canvas 用の rgba() を書く場合 | 色をデザインシステムや従来ツール向けの短い HEX に圧縮する場合 |
主な違い
HEX → RGBA 変換 vs RGBA → HEX 変換
役割
作業次第どちらも色記法の変換ですが、方向が逆です。一方は HEX をデコードし、もう一方は HEX をエンコードします。
入力
作業次第HEX 側は 4 種類の短縮形と完全形を受け付けます。RGBA 側は関数記法を受け付けますが、パーセント記法は拒否します。
出力
作業次第両方ともコピー可能な文字列とライブスウォッチを出します。rgba() は alpha を明示し、HEX は透明度がある場合のみ 2 桁追加します。
向いている用途
作業次第rgba() が必要なら HEX to RGBA。デザインシステム向けのコンパクトなトークンが必要なら RGBA to HEX です。
対象のツール
RGBA → HEX 変換
rgb()・rgba() を #RRGGBB または #RRGGBBAA に変換。チャネルごとの確認と alpha の正確な丸めをローカルで行う。
ツールを開く — RGBA → HEX 変換関連比較
ほかの Toolars ツール比較
よくある質問
HEX → RGBA 変換 と RGBA → HEX 変換 はどう違いますか？
一方は HEX を rgba() にデコードします。#RGB や #RGBA の短縮形は桁を展開します。もう一方は rgb()、rgba() を HEX にエンコードします。alpha は 255 倍して丸め、透明度がある場合のみ 8 桁で出力します。精度基準は同じで、方向だけが逆です。
HEX → RGBA 変換 と RGBA → HEX 変換 は一緒に使えますか？
はい。合わせると往復検査になります。HEX 値を rgba() に変換して戻してください。元の桁が復元できなければ、どちらかの入力がツールが意図的に拒否する構文だったことになります。