カラー → RGB

RGB 色とは？

RGB 色は、赤・緑・青の 3 つのプライマリチャンネルの強度を指定して色を表す方法です。各チャンネルは 0 から 255 までの整数で、0 は完全にオフ、255 は完全にオンを意味します。3 つのチャンネルを組み合わせることで 1670 万色以上を表現できます。例えば rgb(14, 165, 233) は赤 14、緑 165、青 233 を混ぜたスカイブルーです。RGB は加法混色モデルと呼ばれ、3 チャンネルすべてを最大強度（255, 255, 255）にすると白になり、すべて 0（0, 0, 0）にすると黒になります。

RGB モデルは、ほとんどのディスプレイが光を発する方法を反映しています。スマートフォン、モニター、テレビ画面の各ピクセルは微小な赤・緑・青のサブピクセルで構成され、デバイスは RGB 値に応じて各サブピクセルの明るさを設定します。これが RGB が Web と CSS のネイティブな色空間である理由です。

RGB 色を使う場面

印刷物ではなく画面を扱う場合、RGB がデフォルトの色形式です。よくある場面は以下の通りです：

• CSS スタイリング。 rgb() と rgba() 関数は 3 つまたは 4 つの数値を受け取り、すべてのブラウザが対応します。
• Canvas と画像処理。 Canvas API はピクセルデータを RGBA 配列として扱うため、画像フィルタやエフェクト、操作は RGB 値に直接作用します。
• ゲームとグラフィックスプログラミング。 WebGL、Three.js、ほとんどのグラフィックスライブラリはマテリアルカラー、ライティング、クリアカラーに RGB 入力を受け取ります。
• アニメーションと補間。 RGB チャンネルは線形なため、2 つの RGB 色間のアニメーションは直接的です。
• アクセシビリティツール。 コントラストチェッカーは WCAG 比率を評価する際、RGB 値から輝度を計算します。
• データビジュアライゼーション。 D3、Chart.js、ECharts などのチャートライブラリはシリーズ、塗り、線に RGB 色指定を受け付けます。

印刷作業では、プリンターは減法混色モデルを使用するため RGB を CMYK に変換する必要があります。しかし画面に表示するものには RGB が適しています。

RGB と HEX、HSL の違い

RGB、HEX、HSL はどれも同じ sRGB 色を異なる方法で表します。RGB は赤・緑・青チャンネルを 10 進整数（0–255）で表します。HEX は同じチャンネルを 16 進ペア（00–FF）でエンコードするため、rgb(14, 165, 233) と #0EA5E9 は数学的に同じです。HSL は色相（0–360°）、彩度（0–100%）、輝度（0–100%）で色を表し、輝度を変えると予測可能なティントとシェードができるためデザイナーにとって直感的です。

計算、アニメーション、API 呼び出しに数値チャンネルが必要な場合は RGB を使います。CSS やデザインツール用のコンパクトで共有しやすいコードが必要な場合は HEX を使います。パレットを構築したり色の知覚輝度を微調整する場合は HSL を使います。

一般的な RGB 色

下表はよく使われる色とその RGB 値の一覧です。

名前	RGB	HEX
黒	rgb(0, 0, 0)	#000000
白	rgb(255, 255, 255)	#FFFFFF
赤	rgb(255, 0, 0)	#FF0000
緑	rgb(0, 255, 0)	#00FF00
青	rgb(0, 0, 255)	#0000FF
スカイブルー	rgb(14, 165, 233)	#0EA5E9
黄	rgb(255, 255, 0)	#FFFF00

CSS の rgba() 形式では 0 から 1 の 4 つ目の値で透明度を追加できます。例えば rgba(14, 165, 233, 0.5) は 50% の不透明度を表します。

色を RGB に変換する方法

このツールでの変換は一瞬で、すべてブラウザ内で完結します。アップロード、登録、インストールは不要です。以下の手順で行います：

1. 色を選ぶ。 カラーピッカーを使うか、HEX 入力欄に 6 桁の HEX コード（# 付きまたはなし）を入力します。
2. 結果を確認。 R、G、B 値がリアルタイムで更新され、rgb() 文字列とプレビュー見本も同期的に更新されます。
3. RGB をコピー。「RGB をコピー」ボタンをクリックして rgb(r, g, b) 文字列をコピーし、CSS、コード、ドキュメントに貼り付けます。

すべてのステップは JavaScript でブラウザのローカルで実行されるため、色の選択はサーバーにアップロードされません。これにより変換は完全にプライベートかつ即時に行われます。