シンデレラの233個のピーナッツ：「完璧な」パレットの色を選択

テキストモードでゲームを開発する過程で、100を超えるアニメーションASCIIスプライトを描画する必要がありました。 リリース後、ゲームは予想外に良いレビューを受け、継続することが決定されました。 最初の部分のスプライトを描画し、多数のカラーオプションと多数の異なるパレットを試してみたところ、私は自分の「完璧な」色のセットが常に必要であることに気付きました。 数百時間の描画に対して、パレットの理想性に関する次の基準が開発されました。

• 簡潔：パレット内の少数の色。 色のセット全体を一目でカバーできます。
• 完全性：パレットの色は、色空間を均一かつ十分に濃くする必要があります。
• 離散性：パレットの色は目によって互いに異なるはずです。
• グループ化：色を適切にグループ化して、適切な色をすばやく見つける必要があります。

これらの基準をすべて満たす正確な233色のセットを選択できることがわかりました。



色の選択を開始し、色空間全体を見てみましょう。 RGBキューブ、HSBシリンダー/コーンとして表すことができます。これらは最も一般的な加算モデルです。







これらの3次元形状の「内側」から色を選択することは便利ではありません。 したがって、グラフィックエディターは、任意の色を選択するためのさまざまな便利で美しい方法を考え出します。 ただし、すべてのカラーモデルには、少なくとも3つの次元があることに注意してください。







ASCIIグラフィックの場合、この色の「連続体」はすべて不要です。 任意の色を選択すると、編集が難しくなります。 実際には、各キャラクターは画面上のかなり広い領域を占有し、キャラクターは原則として触れません。 違いに気付くために、キャラクターの色は目によって異なります。







そのため、個別のパレットが必要です。 非常に多くの異なるパレットがあります。 これらは、現代のパレットと、過去のコンピューター技術から生まれたレトロなパレットの両方です。







すべての多様性にもかかわらず、私は自分の要件を満たすパレットを見つけられませんでした。 これは驚くことではありません。 レトロなパレットは鉄の能力によって決定されました。 モダンパレットは、原則として、デザインで特定のスタイルを実装するために構成されています。



ほとんどのグラフィックエディターでは、カスタムパレットを作成できます。 しかし、パレットの色をグループ化する組み込み機能は、私の目的には十分ではありませんでした。 そこで、自分でパレットを組み立てることにしました。

手続きパレット？

パレットのドット色を色空間内で均等に分散するとどうなりますか？ たとえば、RGBモデルの各色成分は6つの部分に分割されます。 216色を取得します。



問題は、人が色を直線的に知覚しないことです。 パレットの緑の色合いは「結合」し、青は離散的すぎます。 色に関する興味深い資料を次に示します。



ポイントンの色に関するよくある質問

手動選択のみ！

70年代に開発されたRGBモデルの非線形変換であるHSBモデルにより、より直感的に色を選択できます。 モデルの最初のコンポーネントは色相-色調です。 どんな色調がありますか？ たとえば、ニーモニックフレーズのように、「すべてのハンターはキジがどこに座っているかを知りたい」



7色のトーン： 赤、オレンジ、黄色、緑、シアン、青、紫



これは明らかに十分ではありません！ そして、例えば、ピンクやターコイズはどこですか？ 12個のトーンのより完全なセットが「ダイヤル」パレットによって提供され、ダイヤルの各時間には独自の色が付いています。



12色のトーン： 赤、オレンジ、黄色、ライム、緑、アクアマリン、ターコイズ、青、青、紫、ピンク、ラズベリー



結果の色相値はまだ離散的です。 隣接するトーン間の目の違いが同じになるように、いくつかのトーンを追加しました。 結果は私に合った。



15色のトーン： 赤、オレンジ、ゴールデン、イエロー、ライム、グリーン、アクアマリン、ターコイズ、ブルー、ブルー、ウルトラマリン、パープル、ピンク、ラズベリー、スカーレット







15の色調のそれぞれについて、彩度-彩度と明るさ-明るさのコンポーネントを設定できます。 たとえば、オレンジ、紫、ライムの多くの彩度と輝度の値がここにあります。







よく知られたパレットがあります。このパレットでは、彩度と明度のコンポーネントが1行に引き伸ばされています。







このパレットでは、すべての色空間が一般的に表現されているように見えるかもしれません。 ここにそれがあります-よくグループ化された色の完璧なパレット。 しかし、いいえ、複数の明度と彩度を持つ色はまったくありません。 たとえば、上の図で強調表示されているライラック色は、このパレット内の明るさを下げることはできません。



興味深いことに、このパレットの色は、HSBモデルの円柱/円錐面を形成します。 シリンダー/コーンの内側からの色はありません。



15色のトーンに戻ります。 それぞれについて、輝度と彩度のコンポーネントに従って個別のレイアウトを構築します。 コンポーネントの値は、100％、80％、60％、40％、20％のように均一に選択されます。







多くの場合、明度と彩度の値の空間は正方形ではなく、三角形の形で表されます。 実際には、人間の目は、低輝度での彩度の変化を区別します。



この場合、三角形は次のようになります。輝度が低い行では、提供される彩度オプションが少なくなります。







悪くない！ それでは、微調整を始めましょう。 各色相について、輝度成分と彩度成分は均等に分布していました。 しかし、人間の目は明るさを非線形に知覚します。 さらに、色調が異なると、明るさの知覚も異なります。



色の明るさを推定するために最も一般的に使用される式の1つは次のとおりです。







色の明るさは、モニターのタイプと個人の視覚の個々の特性に依存することを理解しておく必要があります。この式は、CRTモニターについても導き出されました。 ただし、青成分の全体的な明るさへの寄与は赤の寄与よりも小さく、それが緑の寄与よりも小さいという事実を反映しています。 これは肉眼で見ることができます。たとえば、青色を20％の輝度と比較し、緑色を20％の輝度と比較するだけで十分です。 青ははるかに暗いです！



暗い色を揃えて、視覚的な明るさの減少をより線形にするために、次の変換を適用しました。











数式は少し大きく見えますが、実際は単純です。 入力は、輝度レベルY、色調（r、g、b）、および輝度nの階調数です。 大きなブラケットの内側には、トーンに応じて暗い色が配置されます。 0.7の累乗に上げると、輝度の変化が視覚的に均一になります。 より良い結果を達成するために、手動で度数0.15と0.7を選択しました。



彩度を均等にするには、次の簡単な変換で十分でした：







次数0.65も手動で選択されました。 以下のGIFアニメーションは、変換前と変換後のオプションを示しています。 暗い色がよりよく見えるように、背景を黒にしました。 色の明るさと彩度がより均一になったかどうかを自分で判断してください。 私の意見では、はい、それは良くなりました。







グレーの濃淡を追加し、結果の色をグループ化するために残ります。 結果はそのようなパレットでした。







私はシンデレラ用に233個のナッツを手に入れました-ASCIIグラフィックエディター用に233色、これは美しいです！





Facebookの私のグループtextpuzzlelabでお会いできてうれしいです。ここでは、このパレットの色をASCIIスタイルの画像に適用する方法を見ることができます。







パレットの作業はまだ完了していません。 現在のバージョンは0.8です。 問題の1つは、彩度が変化すると、黄色、ライム、緑、アクアマリン、ターコイズの離散性基準が完全に満たされないことです。 私が何をすべきかを理解するまで。



コメントや提案を喜んで受け入れます。 1組の目は良好で、2組以上の方が優れています！