カラーパレット生成

このジェネレーターは、デザイナーがパレットを作る手順に沿って色を組み合わせます。色相どうしの関係（類似色・補色・トライアドなど）か雰囲気（パステル・アースカラー・ネオン）を選び、明度に変化をつけて、背景・文字・アクセントとして一緒に使いやすい組み合わせにします。色は、同じ間隔が同じ見た目の差になるOKLCH空間で作り、結果はすべてsRGBの色域に収めるので、表示どおりの色になります。

使い方

1. 必要な色の数（3〜10）とスタイルを選びます。
2. 必要なら、基準色（この色を中心にパレットを作ります）と残したい色を1行に1色ずつ入力します。
3. 「計算」を押すと新しいパレットができ、結果の下のシード値で同じパレットを再現できます。
4. 書き出し形式を選んでコードをコピーするか、SVGの帯をダウンロードします。

計算式

基準の色相 h₀ からのずらし方：類似色は h₀ ± k·Δ（Δ ≈ 22〜36°）、補色は h₀ と h₀ + 180°、トライアドは + 120°/240°、スプリットは + 150°/210°、テトラードは + 90°/180°/270°、パステルとネオンは黄金角137.5°ずつ進めます。明度はOKLCHで0.3〜0.9に広げます。

シード値つきの mulberry32 乱数が小さなランダムのずれを加えます。OKLCHの色がsRGBの外に出た場合は、色相と明度を保ったまま二分法で彩度を下げ、収まるようにします。

計算例

#264653、#2A9D8F、#E9C46A を残して3色を求めると、ちょうどこの3色が返ります。同じ色を残して5色を求めると、#264653を中心に選んだスタイルに沿った生成色が2色加わります。赤・ライム・青をJSONで書き出すと ["#ff0000","#00ff00","#0000ff"] です。