このツールに問題がありますか?

「HEXからRGBAへの変換 オンライン」について

このツールは hex を RGBA 表記に変換します。A はアルファチャネル(0〜1 の不透明度)。#FF5733 のような hex には透過が含まれませんが、rgba(255, 87, 51, 0.5) のように指定すれば、オーバーレイやグラデーション、デザイントークンで半透明バリアントを使えます。

ツールチップ、モーダル背景、薄いチャートバー、ウォーターマークなど、半透明 UI には不可欠。hex 8 桁(#FF5733FF)も同等ですが、RGBA のほうがデザイナーに広く理解されています。

ブランドカラーへの透過追加、無効ボタンの淡色化、透過レイヤーで色を視覚的にミックスする、といった用途に。

このツールの使い方

hex(任意 alpha 付き)を RGBA に変換する手順

  1. hex 値を入力

    「Hex (#RGB … #RRGGBBAA)」欄に hex を入力。4 種類の長さに対応:`#RGB`、`#RGBA`、`#RRGGBB`、`#RRGGBBAA` — 先頭の `#` は任意、大文字小文字は無視。

  2. alpha の解釈

    hex に alpha が含まれていれば(4 桁または 8 桁)それを使用、無ければ alpha は既定で 1(完全不透明)。バイト値を 255 で割って 0〜1 の浮動小数にし、小数 4 桁に丸めます。

  3. 「実行」

    出力は `r`, `g`, `b`(0〜255)、`a`(0〜1 の float)、`alphaByte`(0〜255)、`hex`(正規化された 8 桁)、`hexRgb`(alpha なしの 6 桁)、`rgbaCss`(コピペ可能な `rgba(r, g, b, a)` 文字列)。

  4. hex と hexRgb の使い分け

    8 桁 hex に対応する CSS では `hex`、レガシーの 6 桁 hex に別の `opacity` や `rgba()` を組み合わせるなら `hexRgb` を選んでください。