RGBA ↔ HEX 変換

色コード変換完全ガイド：HEXとRGBAの違いと使い分け

ウェブフロントエンド開発やUIデザインにおいて、カラーコードの指定は避けて通れない基本要素です。もっとも一般的に使われる「HEX（16進数）」と「RGBA（RGB＋アルファチャンネル）」ですが、初心者のうちはどちらを使うべきか迷うことも多いでしょう。このガイドでは、両者の技術的な仕組みの違い、メリット・デメリット、そしてモダンなCSS開発における正しい使い分け方を解説します。

HEXコード（16進数カラーコード）とは？

HEXコードは、赤（Red）、緑（Green）、青（Blue）の光の三原色を、それぞれ00からFFまでの16進数（Hexadecimal）で表現したものです。先頭にシャープ（#）をつけて記述します。

/* 真っ赤な色を指定する場合 */
color: #FF0000;

/* 同じ値が続く場合は3桁に省略可能 */
color: #F00;

RGBAとは？（アルファチャンネルの魔法）

RGBAは、Red・Green・Blueの数値をそれぞれ0から255の10進数で指定し、さらに4つ目のパラメータとして「不透明度（Alpha）」を指定する記法です。アルファ値は0.0（完全な透明）から1.0（完全な不透明）の間の小数で記述します。

/* 半透明の青色を指定する場合（アルファ値 0.5 = 50%） */
background-color: rgba(0, 0, 255, 0.5);

RGBAの最大の強み：「背景との重ね合わせ」

HEXコード単体では（後述する8桁HEXを除き）単色ベタ塗りしか表現できません。しかし、RGBAでアルファ値を下げることで、カードUIの影（box-shadow: rgba(0,0,0,0.1)）や、背景の画像がうっすら透けて見えるオーバーレイ効果、Glassmorphism（すりガラス風UI）などを簡単に実装できます。

8桁のHEXコード（HEXA）の台頭

「透明度を使いたいならRGBA」というのが長年のCSSの常識でしたが、モダンブラウザではHEXコードの末尾に2桁の透明度（00〜FF）を追加した「8桁のHEXコード（#RRGGBBAA）」が完全にサポートされています。

8桁HEXは短く書けるメリットがありますが、「10%の透明度は16進数でいくつか？（答え：1A）」を人間が暗算するのは不可能です。そのため、透明度を微調整しながらコーディングする場面では、直感的に0.1や0.5と書けるRGBAの方が現在でも好んで使われます。

実務でのベストプラクティス（使い分けルール）

1. ブランドカラーやベースの配色： 短くてFigma等からコピペしやすい HEX (#RRGGBB) を使います。
2. 要素のドロップシャドウ： 影の濃さを微調整しやすい RGBA を使います（例: rgba(0,0,0,0.15)）。
3. CSS変数（カスタムプロパティ）との連携： 近年流行しているテクニックとして、RGBの数値部分だけを変数化し、各コンポーネントで透明度だけを変える手法があります。

:root {
  /* HEX値ではなく、RGBのカンマ区切り値を定義 */
  --brand-color-rgb: 99, 102, 241;
}

.button {
  background-color: rgba(var(--brand-color-rgb), 1);   /* 不透明ボタン */
}
.button-soft {
  background-color: rgba(var(--brand-color-rgb), 0.1); /* 10%透明な薄いボタン */
}