Palette — Draw

Palette is a list of colors with helpers for pulling entries out of it in a controlled way. It generates colors in OKLCH, so a fixed lightness reads as the same lightness across every hue.

`Palette`は色のリストで、そこから色を規則立てて取り出すための補助メソッドを備えています。色はOKLCHで生成されるため、明度を固定すればどの色相でも同じ明るさに見えます。

public/lib/Palette.js, public/lib/color.js — copied from the stroke_designer project. public/lib/SchemePaletteMaker.js builds on them.

Gamut

OKLCH describes colors sRGB cannot display. maxChromaAt(L, H) binary-searches the largest chroma that stays inside the sRGB gamut at a given lightness and hue, and generation never asks for more than that. mostVibrantL(H) scans for the lightness at which a hue reaches its highest chroma. Both live in color.js.

OKLCHはsRGBでは表示できない色も表せます。`maxChromaAt(L, H)`は、指定した明度と色相でsRGBの色域に収まる最大の彩度を二分探索で求めます。生成処理がそれを超える値を使うことはありません。`mostVibrantL(H)`は、ある色相が最大の彩度に達する明度を走査して求めます。どちらも`color.js`にあります。

Generating

Palette.fromHues(hues, options) returns one entry per hue × luminosity step.

`Palette.fromHues(hues, options)` は、色相と明度ステップの組み合わせごとに1つのエントリを返します。

nLum — luminosity steps per hue. Default 4.
色相あたりの明度ステップ数。既定値は 4。
lumHigh / lumLow — the lightness range the steps span. Defaults 0.85 / 0.30.
ステップが分布する明度の範囲。既定値は0.85/0.30。
vibHigh / vibLow — the ends of the chroma multiplier range. Defaults 0.95 / 0.30. See Chroma below, since neither is applied directly.
彩度の倍率の範囲の両端。既定値は 0.95 / 0.30。どちらもそのまま適用されるわけではないため、下記のChromaを参照してください。

Steps are not spaced evenly between lumLow and lumHigh. The generator finds the lightness at which that hue reaches its maximum chroma (mostVibrantL(H)), snaps the nearest step to it, then redistributes the remaining steps on either side. Every hue therefore contributes one entry at the lightness where it can be most chromatic. That entry is not at the hue’s maximum chroma, because the multiplier below applies to it like any other.

ステップは `lumLow` と `lumHigh` の間に等間隔で配置されるわけではありません。生成処理は、その色相が最大彩度に達する明度を `mostVibrantL(H)` で求め、最も近いステップをそこにスナップさせたうえで、残りのステップを両側に配分し直します。そのため、どの色相にも、最も鮮やかになれる明度のエントリが1つ含まれます。ただしそのエントリは、他と同じように下記の倍率が掛かるため、色相の最大彩度そのものではありません。

The first and last entries normally land exactly on lumHigh and lumLow. They do not when the snapped step is itself the first or last one, in which case that end takes the vibrant lightness and the requested bound is unused. At nLum: 5, lumHigh: 0.88, lumLow: 0.28 this happens at hues 80, 90, 140, 150, 160, and 200.

最初と最後のエントリは通常、ちょうど`lumHigh`と`lumLow`に置かれます。ただし、スナップされたステップが最初または最後のステップそのものである場合はそうなりません。そのときは、その端には最も鮮やかになる明度が入り、指定した境界値は使われません。`nLum: 5, lumHigh: 0.88, lumLow: 0.28` では、色相80、90、140、150、160、200でこれが起こります。

Chroma

Each entry starts from maxChromaAt(L, H) and takes a fraction of it. The fraction varies per entry, rising with how chromatic that lightness and hue could be.

各エントリの彩度は、`maxChromaAt(L, H)`を基準に、その何割かを取った値です。この割合はエントリごとに異なり、その明度と色相がどれだけ鮮やかになれるかに応じて大きくなります。

t = min(1, maxC / 0.4)
C = maxC × (vibLow + (vibHigh − vibLow) × t)

0.4 is the reference for the most chromatic color the model expects to meet. vibHigh is therefore a ceiling rather than a setting: it applies only where maxC reaches 0.4, which sRGB does not do. At the defaults the largest fraction any entry takes is about 0.78, and no entry anywhere in the palette sits at its own maxC.

0.4は、このモデルが想定する最も鮮やかな色の基準値です。したがって `vibHigh` は設定値というより上限です。これが適用されるのは `maxC` が0.4に達する場合だけであり、sRGBではそこに届きません。既定値では、エントリに掛かる割合は最大でもおよそ0.78で、パレットのどのエントリも自身の`maxC`には達しません。

The multiplier rises with maxC, so the entry with the most headroom stays the most chromatic of its row. Setting vibLow above vibHigh inverts that relationship and the ordering no longer holds.

倍率は `maxC` とともに大きくなるため、余裕が最も大きいエントリが行のなかで最も鮮やかなままになります。`vibLow` を `vibHigh` より大きく設定するとこの関係が反転し、その順序は保たれなくなります。

Two other constructors take colors that already exist: fromHexArray(hexes) for plain strings, and fromEntries(entries) for objects that already carry L, C, and H.

既存の色を受け取るコンストラクタも2つあります。単純な文字列の配列には `fromHexArray(hexes)`、`L`・`C`・`H` をすでに持つオブジェクトには `fromEntries(entries)` を使います。

SchemePaletteMaker

SchemePaletteMaker generates a Palette from three inputs: a key hue, a color count, and a scheme. The scheme decides everything else: which hues are used, and how light and how saturated each color is. new SchemePaletteMaker({ hue, count, scheme, seed }).generate() returns a regular Palette, with the key color first.

`SchemePaletteMaker`は、3つの入力から`Palette`を生成します。基準の色相、色数、配色です。それ以外はすべて配色が決めます。どの色相を使うか、そして各色の明るさと彩度です。`new SchemePaletteMaker({ hue, count, scheme, seed }).generate()`は通常の`Palette`を返し、基準の色が先頭に来ます。

mono — every color at the key hue. The first at the hue's most vibrant point, the rest dividing L as evenly as that fixed first color allows, each at the largest chroma available.
すべての色は基準の色相に揃えられます。最初の色は、その色相が最も鮮やかになる点に配置され、残りの色は、その最初の色が許す範囲で明度の幅を均等に分割して配置します。彩度は、各明度で取りうる最大値です。
vivid-dark — the whole wheel divided evenly from the key hue; the half nearest the key hue vivid at each hue's representative lightness, the far half dark.
色相環全体を基準の色相から均等に分割します。基準に近い半分は各色相の代表的な明度で鮮やかな色になり、遠い半分は暗い色になります。
pastel-cluster — hues clustered around the key hue, all light and low in chroma.
色相を基準の色相のまわりに集め、すべて明るく、彩度の低い色にします。
dark-cluster — the same clustering, tighter, every color dark.
同じクラスタをより狭くし、すべての色を暗くしたものです。
vivid-wheel — the whole wheel divided evenly, every color at its own hue's most vibrant point.
色相環全体を均等に分割し、各色をその色相が最も鮮やかになる点に配置します。
black — every color black.
すべての色が黒です。

Every scheme except black jitters the hue and lightness of the colors other than the key color. The jitter derives from seed, so the same settings reproduce the same palette. PALETTE_SCHEMES lists the schemes with display labels.

`black`を除くすべての配色は、基準の色以外の色相と明度を揺らします。揺らぎは`seed`から導かれるため、同じ設定からは同じパレットが再現されます。`PALETTE_SCHEMES`は表示名付きの配色の一覧です。

representativeL(H) is the lightness of a hue’s most prototypical color, the one people recognize by the simplest color term (red, green, blue, pink). That color sits at a particular lightness, not at the hue’s max-chroma point: yellow is only yellow when bright, while green and blue are their names well below their chroma peaks. Anchored per color term (red 0.58, orange 0.72, yellow 0.90, yellow-green 0.82, green 0.50, cyan 0.70, blue 0.45, purple 0.45, magenta 0.58, pink 0.78) and interpolated around the wheel. The prototypes are cultural: which terms are basic, and where their colors sit, varies between cultures, and the anchors are one such choice.

`representativeL(H)`は、その色相の最も典型的な色の明度です。赤、緑、青、ピンクといった、いちばん単純な色名で誰もが思い浮かべる色です。その色は特定の明度にあり、色相の彩度が最大になる点とは一致しません。黄色は明るいときだけ黄色であり、緑や青は、彩度のピークよりずっと低い明度でその名前の色になります。色名ごとの基準値（赤0.58、橙0.72、黄0.90、黄緑0.82、緑0.50、シアン0.70、青0.45、紫0.45、マゼンタ0.58、ピンク0.78）を色相環に沿って補間します。この典型は文化に依存します。どの色名が基本になるか、その色がどこにあるかは文化によって異なり、この基準値はそのひとつの選択です。

Three helpers support the demos: paperColor(hue) returns a near-white paper tint of a hue for a background, paperGradient(palette) returns a two-color paper-tint gradient spec for a board clear, and randomSchemePalette(scheme, count) returns a schemed palette at a random key hue and seed.

デモ用の補助が3つあります。`paperColor(hue)`は、背景用に、その色相をわずかに帯びた白に近い紙のような色を返します。`paperGradient(palette)`は、ボードのクリアに使う、2色の紙のようなグラデーションの指定を返します。`randomSchemePalette(scheme, count)`は、ランダムな基準色相とシードで配色付きパレットを返します。

Selecting

spread(n) — n entries evenly distributed across the palette. Every hue and step stays represented no matter how many entries the settings produced.
パレット全体から等間隔にn個のエントリを取ります。設定によってエントリ数がどう変わっても、すべての色相とステップが漏れなく含まれます。
sample(t) — the entry at fractional position t.
位置 t（0〜1）にあるエントリ。
pickPair(i) — an entry and its counterpart roughly half-way round the palette, for a two-color gradient. Deterministic when i is given.
あるエントリと、パレット上でほぼ半周先にあるエントリの組。2色のグラデーション用です。i を指定すれば決定論的になります。
pick() — a random entry.
ランダムなエントリ。
toHexArray(), entries, length — the raw list.
生のリストへのアクセス。

pick() and a bare pickPair() call Math.random(). Pass an index to pickPair(i) for a deterministic result.

pick() と引数なしの pickPair() は Math.random() を呼びます。決定論的な結果が必要な場合は pickPair(i) にインデックスを渡してください。