RGB カラーを Hex に変換
rgb()/rgba()、またはカンマ区切りのチャンネルを入れると、#RRGGBB または #RRGGBBAA が得られます。ライブプレビュー付きで、CSS やデザイン受け渡しに便利です。
例
行をクリックすると入力に反映して変換します
| 入力 | 出力 | — |
|---|---|---|
CSS に書いた RGB を、デザインツールやスタイルガイド向けの Hex に戻したいときに便利です。入力形式はゆるめに受け付けます。
RGB を Hex にするには
- rgb()/rgba()、またはカンマ区切りのチャンネルを入力
- 完全不透明でないアルファがあるとき、8 桁 Hex になります
- プレビューで色を見てからコピー
こんなときに向いています
- rgb()/rgba() から Hex へ戻す
- 関数形式でもカンマ区切りでも入力できる
- ブラウザ内ですぐ色を確認できる
よくある使い方
- CSS の色をパレットやデザイントークンへ戻す
- 半透明を 8 桁 Hex にしてモバイル UI へ渡す
- Hex を RGB に と行き来して値を突き合わせる
ちょっとした注意
- アルファは 0–1 でも 0–255 でも解釈します
- HSL 起点なら HSL を Hex に / Hex を HSL に
よくある質問
- どの RGB 形式が使えますか？
- rgb(255, 87, 51)、rgba(...)、または 255, 87, 51 です。アルファは 0–1 でも 0–255 でも構いません。
- いつ 8 桁 Hex になりますか？
- アルファがあり、かつ完全不透明でないとき、出力は #RRGGBBAA になります。