HEX透明度計算ツールとアルファ値の一覧表

HEX透明度計算ツール

HEX透明度の一覧表とRGBAカラーピッカー（#RRGGBBAA） | We.Inc

どんなHEXカラーにも透明度を加えられます。不透明度を選んで、8桁のHEX、rgba、hsla、Android用の値をコピーし、明るい背景、暗い背景、市松模様の上での見え方を確認できます。0〜100%のアルファ値の一覧表付きです。

HEXカラーを透明にするには、アルファ値として16進数を2桁追加し、#RRGGBBAAの形にします。この2桁は不透明度に255を掛けた値を16進数で書いたもので、50%なら80、75%ならBF、25%なら40になります。下で色と不透明度を選べば、8桁のHEXと、それに対応するrgbaとhslaの値が得られます。

よく使う不透明度の値

不透明度
アルファの2桁
#4F98FBでの例

色を選び、不透明度のスライダーを動かして、コードに必要な形式をコピーしましょう。プレビューでは、白、黒、市松模様の上に重ねた色と、それぞれの上で混ざり合った結果の単色を表示します。

基本の色を入力するか選びます。3桁、6桁、8桁のHEXのどれでも使え、アルファの2桁が含まれていればスライダーに反映されます。
スライダーを動かすか、0から100までのパーセント値を入力します。
8桁のHEX、rgba()、スラッシュを使った最新のrgb()、hsla()、またはAndroid用の#AARRGGBB形式をコピーします。
単色の代替が必要な場合や、文字のコントラストを確かめたい場合は、白と黒の上で混ざった色を確認します。

アルファの2桁は丸められるため、パーセント値が元どおりに戻るとは限りません。16進数の80は255のうちの128で、50.2%にあたりますが、どんな画面でも十分な精度です。
Androidの色リソースはアルファを先頭に置き（#AARRGGBB）、CSSとは逆です。これを取り違えるのは、アプリで色がおかしく見えるよくある原因です。
文字のコントラストは、透明な色ではなく混ざった後の色で確認しましょう。白の上の60%の黒と、写真の上の60%の黒とでは、読みやすさがまったく違います。
opacityプロパティを使うのは、子要素も含めた要素全体を薄くしたいときだけにしましょう。背景だけを透かして文字ははっきりさせたいなら、代わりに背景色にアルファを入れます。

よくある質問

8桁のHEXカラーはすべてのブラウザーで使えますか？

はい。#RRGGBBAAと#RGBAの形式はCSS Color Level 4で定められたもので、Chrome、Edge、Firefox、Safariの現行バージョンすべてで動作します。非常に古いブラウザーは無視するので、そうしたブラウザーをまだサポートしている場合に限り、rgba()の代替を追加しましょう。

不透明度をHEXに変換するには？

不透明度（0から1）に255を掛け、整数に丸めて、16進数2桁で書きます。30%の場合、0.3 × 255 = 76.5で、丸めると77になり、16進数では4Dです。このページの一覧表には、5%刻みのすべての値を載せています。

#RRGGBBAAとrgba()は同じですか？

同じ色を表しています。rgba(79, 152, 251, 0.5)と#4F98FB80は、HEXのアルファのわずかな丸めを除けば、まったく同じに表示されます。コードベースですでに使っているほうを選びましょう。

4桁のHEXはどうですか？

アルファの2桁の読み方

16進数の2桁は00からFFまで、つまり0から255までを表します。アルファの2桁も同じ尺度を使い、00が完全な透明、FFが完全な不透明です。よく使う値が最初は妙に見えるのはそのためです。255の半分は127.5なので、50%は128に丸められ、16進数では80になります。
デザイナーは、デザインファイルから色を書き出すとき、不透明度を別の数値にしていることがよくあります。それを1つの8桁の値にまとめれば、デザイントークンやTailwindの設定にそのまま入れやすくなります。

Tailwindでの透明な色

Tailwindでは、bg-sky-500/50のように色名の後にスラッシュを付けて不透明度を加えます。これはテーマ内のどの色にも使えます。独自の色なら、bg-[#4F98FB80]のような任意の値で8桁のHEXをそのまま指定できます。
内部的には、Tailwind 4はcolor-mix()で色を透明と混ぜ合わせ、それより古いバージョンはアルファ付きのrgb()を使います。画面上の結果は、このツールが出すHEXの値と同じです。

色と不透明度を選ぶ

ピッカー

HEXカラー

不透明度：{n}%

#4F98FBや#48Fのように、HEXカラーを入力してください。

白の上

黒の上

市松模様の上

の見た目：

8桁のHEX

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

HEX透明度計算ツールとアルファ値の一覧表