メッシュグラデーション生成

メッシュグラデーションは、CSSのグラデーションのように1本の線に沿って混ぜるのではなく、キャンバス上のそれぞれの位置にある複数の色を混ぜ合わせます。やわらかく有機的な見た目から、壁紙、ヒーローセクション、アプリのスプラッシュ画面で人気があります。このジェネレーターは、色の点（またはシードからのランダムな点）を配置し、すべての点から各ピクセルをOKLab色空間で混色して濁りを防ぎ、必要に応じてバンディング対策のノイズを加え、PNG、JPG、WebPで保存します。すべてブラウザー内で処理されます。

使い方

1. 色の点を1行に1つ、「色 x% y%」の形式で入力するか、ランダムな色とシードを選びます。
2. サイズのプリセットまたはカスタムサイズを選びます。
3. 色をどのくらいやわらかく混ぜるか、OKLabとsRGBのどちらで混ぜるかを選びます。
4. 大きな画面向けには少しノイズ（2〜6%）を加え、形式を選んでダウンロードします。

計算式

color(pixel) = Σ wᵢ × colorᵢ ÷ Σ wᵢ, with wᵢ = 1 ÷ (dᵢ² + 0.04²)^(p ÷ 2)

dᵢ はピクセルから点iまでの距離（画像の対角線に対する相対値）で、pは1.6（とてもやわらかい）、2.4（標準）、3.6（くっきり）です。小さな0.04の項は各点の頂点を丸め、硬いスポットとして目立たないようにします。色はOKLab座標で平均するため、青から黄への混色が灰色を経由しません。透けた点はCSSと同様に不透明度で重み付けされ、暗くならずに薄くなります。混色は最大250,000サンプルの格子で計算し、双線形補間で拡大します。

計算例

既定の4つの点（10% 15%のコーラル #FF6B6B、85% 10%の黄 #FFD93D、80% 85%の緑 #6BCB77、15% 80%の青 #4D96FF）では、1920 × 1080の画像は(192, 162)でコーラル、(1536, 918)で緑になり、その間はOKLabのやわらかい混色になります。0% 50%の黒と100% 50%の白の2点をsRGBで混ぜると、両方から等距離の中間地点は約 #808080 の中間グレーになります。