透明度を失わずにHEXとRGBAを変換

透過色をコピーした後に不透明色になってしまう場合は、どの出力をコピーしたかを確認してください。6桁のHEXカラーは赤・緑・青の情報のみで、アルファチャンネルは含みません。カラーコンバーターでは、透明度を保持したい場合はHEX・アルファ付き、RGBA、HSLA、またはモダンCSSを使ってください。

変換する色にrgba(255, 136, 0, 0.5)を試してみてください。プレビューはチェッカーボード、白、暗い背景の上に同じオレンジ色を表示します。不透明と透過の出力が並んでいるので、どちらを選ぶかが重要です。

アルファを保持する出力をコピーする

この入力に対してツールは以下を生成します：

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

必要な形式の横にあるコピー ボタンを使ってください。CSS変数をコピーは2つの変数を提供します：--colorは不透明で、--color-alphaはモダンなRGB構文で透明度を保持します。オーバーレイに最初の変数を使うと、同じスニペット内に2番目の変数があっても不透明になります。

CSS例をダウンロードして、自分のスタイルシートで試せます。表記は要素やCSSプロパティを自動で選びません。

50%がHEXで約50.2%になる理由

CSSは8桁HEXカラーの最後の2桁をアルファに使います。00は完全に透明、FFは完全に不透明です。MDNのHEXリファレンスに順序と省略記法が説明されています。

アルファのバイト値は256段階あります。0と255の中間は127.5なので、このコンバーターは50%を128（80）に丸めます。バイト値を読み戻すと128 ÷ 255で約50.1961%になります。

#FF880080を入力に貼り付けると、ツールはrgba(255, 136, 0, 0.501961)を表示します。この小さな変化は量子化であり、別の不透明度設定ではありません。正確に0.5を保持したい場合は小数アルファ形式を使ってください。表示される小数値は他の入力で丸められることがあります。

短縮HEXは大きな差を隠すことがある

以下の入力は混同しやすいです：

4桁HEXでは、各桁の文字をもう一度繰り返します。最後の8は88になり、80にはなりません。つまり上記の短縮形は50%の省略形ではありません。変換結果にはこれら3つの入力とオレンジの例が含まれています。

配布前に背景を確認する

色の値が一致しても、背景によって見え方は変わります。コンバーターの白と暗いプレビューで、オーバーレイが背後に依存することを確認してください。テキストの場合は実際のテキストと背景の組み合わせもチェックしてください。別のコントラストガイドで詳しく説明しています。

このコンバーターはリストされたHEX、RGB、HSL、HSV入力を扱います。CSS変数、transparent以外の名前付き色、広色域は解決しません。CMYK出力はプリントプロファイルなしの近似値で、HSV/CMYK表記はスタイルシートに貼り付けるCSS値ではありません。

これらの例は2026年10月21日にツールで検証しました。結果記録には解析済みチャネルとフォーマット済み出力が保存されています。表示キャリブレーションや印刷色のテストではありません。