リストの平均色

ブランドキット、グラフ系列、デザイントークンのファイルから hex スウォッチの山を渡されたとき、集合全体を代表する色が一つ必要になることがよくあります。フォルダのサムネイル、パレット平均のチップ、既定の塗り、あるいは新しいトークンが集団を意外な色相へ引っ張っていないかの確認です。このリスト平均色の計算機は hex 色の一覧を受け取り、赤・緑・青チャネルの算術平均を 0–255 の整数へ丸めたうえで、CSS に貼れる 6 桁の hex トークンを返します。経路は決定的で、同じリストは常に同じ hex になります。

色リストの RGB 平均がどう計算されるか

hex 色のリストを送ってください。各スウォッチは 0 から 255 の範囲の 3 つの整数チャネルへ展開されます。#f00 のような 3 桁の省略形は各ニブルを倍にするので、#f00 と #FF0000 は同じ純赤です。

先頭のハッシュは任意で、検証前に取り除きます。0x 接頭辞は拒否され、パック整数が色トークンと誤認されることはありません。すべてのスウォッチを解析したあと、ソルバは赤・緑・青をそれぞれ足し、色の個数で割ります。

その商がそのチャネルの算術平均です。各平均は正の数に対する半分切り上げの規則で最も近い整数へ丸められ、127.5 は 128 になり、結果は合法な 0–255 帯へクランプされます。3 つの整数は先頭ハッシュ付きの大文字 6 桁 hex になります。

線形 RGB 平均は LAB や HSL の知覚的中点ではありません。ネオン黄とほぼ黒の紺は、チャネル空間が均一でないため、明るい親の方へ平均を引っ張ることがあります。それが本製品の文書化された契約であり、デザイナーが表計算やテーマスクリプトですでに求めている平均と同じです。

色が 1 つだけのリストも合法で、正規化のあと自分自身を返します。同じ hex の 2 コピーもその hex を返します。純赤・純緑・純青を合わせると中間の灰色になり、各チャネルが 3 標本で 255 を合計するからです。

入力契約、検証、応答の形

hex 文字列の配列です。カンマ・空白・セミコロン・縦棒で区切った文字列も受け付け、トークンへ分割します。メモファイルからパレットを貼るときに便利です。

各トークンは任意の先頭ハッシュ付きの 16 進 3 桁または 6 桁でなければなりません。成功時、本体は次を返します。例：colors が #FF0000、#00FF00、#0000FF なら hex は #555555 です。

各チャネル平均が 255 を 3 で割った 85 になるからです。例：黒と白は #808080 です。255 を 2 で割ると 128 に丸まるからです。

スタイルファイル用に一つのトークンが要るときは hex を、キャンバスやコントラスト検査が分離チャネルを期待するときは rgb をお使いください。

1色で全体を代表させたいとき

デザインシステムは、フォルダ、Figma コンポーネントのサムネイル、多数のトークンを一度に表すマーケティングタイルのために、ブランドパレットを一つのチップへ畳みます。チャートライブラリは、すでに使っている線の集合から既定の系列色を選び、新しい線が偶然ぶつかるのを防ぎます。

継続的インテグレーションのジョブは返された hex をハッシュし、トークン変更がレビューの許容を超えてパレット平均をずらしたときにビルドを落とします。このランディングはリストの平均色専用です。選んだ比率でちょうど 2 つの hex を混ぜる color.mix ではなく、写真の画素を読む画像の支配色抽出器でもありません。

検索意図が「これらのスウォッチを要約する」であり、2 色を混ぜるのでもなく、形式変換でもなく、ビットマップから色を引くのでもないときに選んでください。リストは 256 スウォッチ以下に保ち、テストで hex と rgb を固定すれば、独自の色管理ライブラリを立てずに、チケット、LMS プラグイン、エッジワーカー向けの再現可能な要約色が得られます。