WebTools
🇺🇸🇯🇵🇨🇳🇰🇷

カラー不透明度ツール

色と不透明度を選んでrgba・hsla・hex8・CSS変数を出力します。

Color Opacity Tool

#3B82F6
rgba()rgba(59, 130, 246, 0.80)
hsla()hsla(217, 91%, 60%, 0.80)
hex8#3B82F6CC
CSS var--color: rgba(59, 130, 246, 0.80);

関連ツール

カラーコード変換（HEX/RGB/HSL）CSSカラー名一覧グラデーション生成カラーコントラスト確認

カラー不透明度ツールの主な使い方・用途

  • ✓CSSの透明度設定
  • ✓rgba/hslaカラーコードの生成
  • ✓デザインシステムの色管理
  • ✓透過背景の色設定
  • ✓CSS変数の生成

使い方（ステップ別）

  1. 1
    色を選ぶ— カラーピッカーで基本色を選択します。
  2. 2
    不透明度を設定する— スライダーで0〜100%の不透明度を設定します。
  3. 3
    カラーコードをコピーする— rgba・hsla・hex8・CSS変数の各形式をコピーできます。

このツールの特徴

  • ●rgba・hsla・hex8形式の出力
  • ●CSS変数形式での出力
  • ●リアルタイムプレビュー表示
  • ●各形式ごとのコピーボタン

このツールについて

色と不透明度を選んでrgba・hsla・hex8・CSS変数を出力します。