Grabient について

1 · キーフレーム

キーフレームは、自分で選ぶ色です。アニメーションと同じように、いくつか設定すると、その間の色が補われます。パレットには2〜8個のキーフレームがあり、グラデーションに沿って等間隔に並びます。グラデーションはそのすべてを通ります：

各キーフレームは、OKLCH の3つの数値で表されます。明度 L は 0（黒）から 1（白）までです。彩度 C は色の鮮やかさで、0 はグレー、画面で最も鮮やかな色は 0.3 前後です。色相 H は色相環上の角度で、単位は度です。

2 · 数式

明度、彩度、色相には、それぞれ専用の曲線があり、上のグラフに描かれています。各曲線はキーフレームを通り、その間でなめらかに曲がります。どの位置の色も、その位置で読み取った3本の曲線の値です。

CSS や Figma のグラデーションは、カラーストップの間を直線でつなぎます。そのため、色の変化の速さが変わる所に、かすかな境目が見えることがあります。

数式の t は、グラデーションの始まりの 0 から終わりの 1 まで変化します。キーフレームが K 個のとき、0 から数えたキーフレーム i は t = i / (K − 1) の位置にあります。各曲線は Catmull–Rom スプラインで、gamut() が色を画面に収めます（セクション 6）：

color(t) = gamut( L(t), C(t), H(t) )

// one axis: a Catmull–Rom spline through K evenly spaced valuesconst { min, max, floor } = Math;function spline(v, t) {  const K = v.length, x = min(max(t, 0), 1) * (K - 1);  const i = min(K - 2, floor(x)), u = x - i;  const p0 = v[max(i - 1, 0)], p1 = v[i];  const p2 = v[i + 1], p3 = v[min(i + 2, K - 1)];  return p1 + 0.5 * u * (p2 - p0    + u * (2*p0 - 5*p1 + 4*p2 - p3    + u * (3*(p1 - p2) + p3 - p0)));}// the color at t from the keyframes' L, C and H. A spline can overshoot// between keyframes, so L is kept in 0..1 and C at 0 or more. The// browser fits an oklch() color to the screen (section 6).function color(L, C, H, t) {  const l = min(max(spline(L, t), 0), 1), c = max(spline(C, t), 0);  return `oklch(${l} ${c} ${spline(H, t)})`;}

3 · 色数

グラデーションを描くとき、Grabient は等間隔の点で色を取り出します。取り出す色の数が色数です。最初と最後の色は、最初と最後のキーフレームです。グラデーションのスタイルでは、取り出した色をカラーストップとして使います。帯のスタイルでは、それぞれの色を単色の帯として表示します。色数がキーフレームの数より少なくなることはありません：

4 · なぜ OKLCH か

RGB と HSL は画面が光をどう混ぜるかを表すもので、その数値は見た目と合わないことがよくあります。純粋な黄色と純粋な青は、HSL の明度がどちらも 50% ですが、黄色のほうがずっと明るく見えます。OKLCH では 0.97 と 0.45 です。OKLCH は Björn Ottosson の OKLab を極座標で表したもので、数値の変化が等しければ見た目の変化も等しくなるように作られています。2つの色を両方の方法で混ぜたもの：

明度、彩度、色相はそれぞれ独立しているので、キーフレームの色相を変えても明度は変わりません。

5 · 360° を超える色相

2つの色相の間を、グラデーションは色相環のどちら回りにも進めますが、多くのツールは近いほうを通ります。Grabient では、色相は 360° を超えても数え続けられます。690° は 330° と同じ色で、1周あとにあたります。グラデーションは、その道のりをすべてたどります：

パレットの移動量は、最後の色相から最初の色相を引いた値で、周回も含みます。そのため、虹をひと回りすると 360° 移動します。隣り合うキーフレームは、最大 540° まで離れることができます。

6 · 画面に表示できない色

OKLCH では、画面が表示できるよりも鮮やかな色も表せます。そうした色では、Grabient は明度と色相を保ったまま、色が収まるまで彩度を下げます。標準的な画面では sRGB に、広色域の画面では Display P3 に収めます。CSS Color 4 も oklch() の色に同じことを行います：

7 · レシピ

いくつかのパレットと、それぞれを作る曲線です：

逆順は、キーフレームの並びを逆にします。反転はネガを作ります。明度 L はそれぞれ 1 − L になり、色相はそれぞれ 180° 回転します。

8 · シード

どのパレットのアドレスにもシードが含まれています。シードは、キーフレームを表す短いコードです。最初の図のシードは kW6iw33i87sY6O2wq7rmZ07I です。

シードは、k の後にキーフレームをビット単位で詰めたものです。明度に8ビット、彩度に8ビット、最初の色相に9ビット、以降の色相にはそれぞれ10ビットを使い、直前の色相からの変化として保存します：

キーフレームが2つならシードは11文字、8つなら37文字です。どのパレットにもシードはちょうど1つだけです。

カラーコードから設定したキーフレームは、その色を24ビットで正確に保ちます。そうしたシードは9〜50文字です。