カラーコンバーター（HEX、RGB、HSL） よくある質問

HEXをRGBに変換するにはどうすればいいですか？

16進数のカラーコードをRGBに変換するには、6桁の16進文字列 #RRGGBB を3つのペアに分割し、各ペアを16進数（base-16）から10進数（base-10）に変換します。

例： #FF5733

• FF = 255（赤）
• 57 = 87（緑）
• 33 = 51（青）
• 結果：rgb(255, 87, 51)

省略形の16進数（#F53）の場合は、まず各桁をペアに展開します：#F53 は #FF5533 になります。桁は2倍に展開されます：FはFFに、5は55に、3は33になります。

8桁の16進数（#RRGGBBAA）も同じ仕組みですが、アルファチャンネル用にペアが1つ追加されます。#FF573380 はアルファチャンネルとして 80（128、約50%の不透明度）を追加します。

即座に変換したい場合は、当社のカラーコンバーターをご利用ください。アルファ付き・なしの短い16進数・長い16進数など、すべての形式に対応しています。

RGBとRGBAの違いは何ですか？

RGBは赤、緑、青のチャンネルを使って色を定義します。RGBAはRGBに不透明度を制御するアルファチャンネルを追加したものです。アルファ値は0.0（完全に透明）から1.0（完全に不透明）までの範囲です。

rgb(255, 0, 0)         /* 完全に不透明な赤 */
rgba(255, 0, 0, 0.5)  /* 50%の不透明度の赤 */

最新のCSS（CSS Color Level 4）では、rgba() エイリアスはもう必要ありません。rgb() 関数は現在、オプションのアルファチャンネルを受け付けます：

rgb(255 0 0 / 0.5)  /* モダン構文、50%の不透明度の赤 */

すべてのモダンブラウザがこの構文をサポートしています。従来の rgba() 関数はどこでも動作し、削除されることもありませんが、新しいコードではスラッシュ構文を使った rgb() を使用するのが推奨される方法です。

RGBをHSLに変換するにはどうすればいいですか？

RGBをHSLに変換するには3つのステップがあります：

1. 正規化 — RGB値を0〜1の範囲に変換します（255で割ります）
2. 最小値と最大値を見つける — 正規化した3つの値の最小値と最大値を求めます — 最小値と最大値の平均が明度（L）です
3. 色相と彩度を計算する — どのチャンネルが最大かと、最大値と最小値の差に基づいて計算します

数式はどの色チャンネルが支配的かによって変わります：

• 赤が最大の場合：色相 =（緑 - 青）/（最大 - 最小）
• 緑が最大の場合：色相 = 2 +（青 - 赤）/（最大 - 最小）
• 青が最大の場合：色相 = 4 +（赤 - 緑）/（最大 - 最小）
• 彩度は明度に依存します：L > 0.5 の場合、彩度 =（最大 - 最小）/（2 - 最大 - 最小）、それ以外の場合、彩度 =（最大 - 最小）/（最大 + 最小）

計算は決して単純ではなく、間違いやすいので、カラーコンバーターツールを使って即座に結果を得ることをお勧めします。

色が画面によって違って見えるのはなぜですか？

色の見え方は、いくつかの理由で画面ごとに異なります：

画面のキャリブレーション — ほとんどの一般向け画面はカラーキャリブレーションされていません。工場出荷時のデフォルトは、明るさ、コントラスト、色温度が大きく異なります。

色域の違い — 画面によって対応できる色の範囲が異なります。sRGBがWeb標準ですが、最近のスマートフォンやノートパソコンの多くはDCI-P3（25%広い）に対応しています。sRGB色域の外にある色は、ワイド色域ディスプレイでは正しく見えますが、標準ディスプレイでは切り詰められたりシフトしたりします。

ディスプレイ技術 — OLED画面はLCD画面よりも深い黒とより鮮やかな色を生み出します。IPSパネルはTNパネルよりも色精度が優れています。

視野角 — 特に低価格帯のディスプレイでは、斜めから見ると色がずれて見えます。

明るさと周囲の光 — 暗い部屋で50%の明るさの画面は、直射日光の下で100%の明るさの同じ画面とは違って見えます。

違いを最小限に抑えるには： sRGB色空間で作業し、ハードウェアキャリブレーターでモニターを調整し、リリース前に複数のデバイスでデザインをテストしてください。

HSLカラーモデルは何に適していますか？

HSL（色相、彩度、明度）はプログラムによる色操作に最適です。その大きな利点は、1つのチャンネルが「色」の情報（色相）を担い、他の2つが色相の値に依存せずに外観を制御することです。

HSLが簡単にするもの：

• カラーパレット — 同じ色相を保ち、明度と彩度を変えて完全なカラースケールを作成
• ホバー状態とアクティブ状態 — 明度を一定の割合で変更：hsl(220, 80%, 50%) → hsl(220, 80%, 60%)
• ダークモード — すべての色の明度を下げる：各色の明度から30%を引く
• テーマ — 色相の値を入れ替えて、同じ彩度/明度構造からまったく新しい配色を生成
• 無効状態 — 彩度を下げて要素を脱色：hsl(220, 80%, 50%) → hsl(220, 30%, 70%)

HSLが得意でないこと：

HSLは知覚的に均一ではありません。同じ明度の値を持つ2つの色（例：hsl(60, 100%, 50%) — 明るい黄色と hsl(240, 100%, 50%) — 純粋な青）は、知覚される明るさが大きく異なります。知覚的に均一な色操作には、代わりにOKLCHを使用してください。

16進数の色の#はどういう意味ですか？

# プレフィックス（ハッシュ記号またはナンバーサイン）は、続く文字が16進数のカラー値を表すことをCSSパーサーに伝えます。CSSとHTMLで16進数のカラーコードの標準表記です。

完全な形式は #RRGGBB または #RRGGBBAA です：

| コンポーネント | 意味 | 例（#FF5733） | |-----------|---------|---------------------| | # | 16進プレフィックス | 必須の識別子 | | RR | 赤チャンネル | FF（255） | | GG | 緑チャンネル | 57（87） | | BB | 青チャンネル | 33（51） |

HTMLでは、# はアンカーリンク（<a href="#section">）にも使われますが、CSSコンテキストや style 属性では常に16進数の色を示します。HTMLはまた、# を必要としない従来の「名前付きカラー」（red、blue、rebeccapurple のような140の定義済み名前）もサポートしています。

色域とは何ですか？なぜ重要ですか？

色域（カラーガマット）とは、デバイスが表示できる、または色空間が表現できる色の範囲です。画面やファイル形式で利用できる色の「語彙」と考えてください。

一般的な色域、狭いものから広いものへ：

| 色空間 | 相対サイズ | 使用箇所 | |-------------|--------------|------------| | sRGB | ベースライン | Web標準、ほとんどのモニター、すべてのブラウザ | | Adobe RGB | 約50%広い | プロ写真、印刷 | | DCI-P3 | 約25%広い | 最近のスマートフォン、Mac、多くのノートパソコン | | Rec. 2020 | 約75%広い | HDRテレビ、ハイエンドディスプレイ |

なぜ重要か： 画面の色域の外にある色は正確に表示できません。デバイスは最も近い色域内の値に色をクリップするか、近似します。これが、デザインファイルの鮮やかな深紅が標準的なノートパソコンの画面ではくすんで見える理由です。

Webデザインの場合： 常にsRGBでデザインするか、色がsRGBセーフであることを確認してください。OKLCHと display-p3 色空間を使うとより広い色域をターゲットにできますが、標準画面用のsRGBフォールバックを用意する必要があります。

16進数とアルファ付き16進数の違いは何ですか？

標準の16進数（#FF5733）は6桁を使用し、アルファチャンネルがなく、色は常に完全に不透明です。アルファ付き16進数（#FF573380）は8桁を使用し、末尾にアルファ（不透明度）チャンネル用の16進数2桁が追加されます。

16進数でのアルファ値：

| 16進ペア | 10進数 | 不透明度 | |----------|---------|---------| | 00 | 0 | 完全に透明 | | 80 | 128 | 約50%の不透明度 | | FF | 255 | 完全に不透明 |

例：

#FF5733     — 半透明のない赤みがかったオレンジ
#FF5733FF   — 同じ色、完全に不透明（冗長なFF）
#FF573380   — 同じ色、50%透明
#FF573300   — 同じ色、完全に不可視

アルファ付きの4桁の省略形16進数もあります：#F538 は #FF553388（50%の不透明度）に展開されます。

ブラウザサポート： 8桁の16進数はすべてのモダンブラウザでサポートされています。従来のブラウザ（Internet Explorer）をサポートする場合は、代わりに rgba() を使用してください。

Webサイトのアクセシブルな色を選ぶにはどうすればいいですか？

アクセシブルなカラーシステムを構築するためのステップバイステップのプロセスです：

1. プライマリのブランドカラーから始める。 ブランドを表す色相を選び、HSLまたはOKLCHを使って非常に明るい色（背景）から非常に暗い色（テキスト）までの完全なスケールを作成します。

2. テキストをほぼ黒に設定する。 白背景の本文テキストは #1A1A1A から #333333 にします。純白の上に純黒（#000000）を使うのは避けてください — 一部の読者に目の疲れを引き起こします。白の上の濃いグレーは読みやすさが向上します。

3. すべての前景-背景ペアを確認する。 テキストと背景のすべての組み合わせがWCAG基準を満たす必要があります：

• 通常テキスト：4.5:1以上（WCAG AA）
• 大きなテキスト：3:1以上（WCAG AA）
• 本文テキストは7:1を目指す（WCAG AAA）

4. 色だけを唯一の区別手段にしない。 リンクには下線を付ける必要があります（異なる色だけではなく）。エラー状態にはアイコンまたはテキストを含める必要があります。チャートにはパターンまたはラベルを使用する必要があります。

5. 色覚異常シミュレーターでテストする。 第一色盲（赤緑）が最も一般的なタイプです。色知覚がなくてもデザインが機能することを確認してください。

6. グレースケールで確認する。 デザインがグレースケールに変換すると意味を失う場合、情報を伝えるために色に頼りすぎています。

当社のカラーコンバーターを使えば、任意の2色間のコントラスト比を即座に確認できます。