RGBカラーとは？

画面は、赤・緑・青の光を混ぜ合わせることで、あらゆる色を作ります。RGBカラーでは、この3つのチャンネルそれぞれの強度を、0（消灯）から255（最大）までの数値で表します。そのため、rgb(255, 0, 0)は純粋な赤、rgb(0, 0, 0)は黒、rgb(255, 255, 255)は白になります。同じ色は#ff0000のようなHEXコードでも記述でき、16進数の各2桁が1つのチャンネルを表します。

ツールの説明

このツールでは、色をチャンネルごとに編集できます。最初に使用する色を選択または貼り付け、その後、赤・緑・青のスライダーを動かすか正確な値を入力すると、変更結果をリアルタイムで確認できます。編集した色は、CSS、デザインツール、ゲームエンジン、シェーダーコードで使用される各種表記で表示され、すぐにコピーできます。

機能

  • 赤・緑・青のチャンネルを、スライダーまたは0～255の正確な数値で編集
  • 色を選択するか、HEX、RGB、HSLなどの形式で貼り付けて開始
  • 色をHEX、rgb()、rgb()パーセント、正規化した0～1の値、10進整数、16進整数で取得
  • ブラウザ上で動作

仕組み

各チャンネルは0～255の整数です。この範囲外の値は範囲内に収められ、小数は丸められます。正規化された値では、各チャンネルを255で割ります。整数形式では、チャンネルを0xRRGGBBとして1つの24ビット数にまとめます。

ヒント

  • GLSL、HLSL、Unity、および色を浮動小数点数として受け取るその他のAPIでは、正規化された0～1の値を使用します。
  • 10進整数は、Discordの埋め込みや一部のスプレッドシート、データベースで使用される形式です。