0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ハロプロメンバーカラーの公式によるCSS指定への感謝の表明③:単純HSL指定の限界と新たなLoopUIの提示

0
Last updated at Posted at 2026-05-26

これまでハロプロメンバーカラーの公式指定に端を発して、2本の記事で新たな8RGB指定(8RGB Specification)の提案をnoteに、その妥当性の検証をQiitaで行いました。

その最後でソートの話をしましたが、RGBの値でソートできることはとても有意義で機械的にはこれが最適と思うのですが、知覚的に色相が並ばないことに気持ち悪さを感じました。知覚的といえば、HLS色空間があります。色相(Hue)・彩度(Saturation)・輝度(Lightness)の3つの値で色を指定する方法でOfficeのカラーピッカーでHSの2次元とLの1次元から色を選択したことがある人は多いと思います。

毎回このUIで思い浮かぶ色が指定できない、細かすぎる、0°と360°が隣にないという面倒さを感じていたこともあり、このHLSを同じように単純化できないかと考えました。本来Hは360°、SとLは100%で計算され、それこそソートなどできません。なのでこのHとSとLを8RGB法により量子化した値を使って、Hkeyを7段階(無彩色を-1として、後6色の指定)、Lkeyを最大値と最小値の和、Skeyを最大値と最小値の差ととても単純化させる単純HSL指定を思いつき、UIにおいても円環でステップ刻みに選択できないかと考えました。

発想は悪くないと思うのですが、実際にエクセルでちまちま512色の8RGB法の結果をこの単純HSL指定で計算すると、かなりHLSがかぶってしまう、要するに別の色が同じ単純HSL指定になってしまい、限界を感じました。ただ発想は悪くないと思います、毎回あの二次元から選ぶ際にデザインに疎いと、上手くHとSが指定できない、なぜかというと2次元だから、本来Hとは角度で指定されているものでぐるっと回るものです、そして動径方向にSがきて、別の1次元でLを指定するはずです。

そこでHとSを円環で指定する方法を考えました、またLも無段階で指定できるのが一番かと思いますが、それだと純色、L=0.5の選択がかなり難しいです。なのでLだけ単純化、0.5を中心に9段階で選ぶ方法を考え、それをUIに簡単ですが落とし込んだのが以下です。ループHS9ステップ色空間指定法(英:Loop H S 9 step L Specification Method)のデモとなります。
https://tools.yxmxgxn.workers.dev/loophs/

色か円環で並びとてもきれいです。特に輝度を中心にした時はまさに虹です。よく使う純色は半径方向の端(S=100%)に位置し、赤が0°、黄が60°、緑が120°と60°刻みで並んでいます。また無彩色の黒と白はLが0と8になり、円環がグレーアウトするように設計しました。実際よくつかう純色に近い色は細かく指定でき、明るすぎたり暗すぎる色は端に追いやられています。

まだまだUIはデモ段階ですが、そのわかりやすさは触っていただければわかります。このUIで選んだ結果は#$NNNで返る=HSLは"探す軸"でアドレスじゃないということを追記します。またこの色空間はハロプロメンバーの公式色指定に端を発するものなので、ハロプロメンバーの話に触れないといけないような気がします。そこで全メンバーのHSLを円環でどこに位置するかをUI上に再現しました。ただ全メンバーは3次元空間にいるためそれを同時に位置させることは難しく、Lで刻んでとかも考えましたが、ここは単純にLを無視してHSだけで配置させました。クリックすると情報が出ます。

同じ色に複数人いる場合は人数が円の中にか書いてあり、またLが違うものは円環から色が浮いていることがわかります。また配置から見て赤からピンクに人が密集しており、120°方向の緑が空白になっています。そこで本当のこの論をハロプロメンバーの追加が発表された2026年5月26日に書いているため、以下で締めたいと思います。

オタク「新メンバーが発表されたね!メンバーカラーは何かな?」
私「色空間の配置から言って現在のハロプロ・BEYOOOOONDSに欠けるのはH120°方向で現在のハロプロメンバーはLが深いから光るような色、#40FF40すなわち、名付けるならルミナスグリーン、モーニング娘。同じく緑方向が空白だがそこにはポツンと山﨑愛生がいる、BEYOOOOONDSと同じ色は考えにくいので、青方向また鮮やかな色が足りないので、#6060FF、名付けるならネオンブルーかな」

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?