グラデーションカラーパレット

2つの色と、その間に入れる色の数を選びましょう。色を1つずつコピーするか、必要な形式でパレットを書き出せます。

開始色

終了色

色の数

インスピレーションになるグラデーション

片側にカーソルを合わせると、その端の色が表示されます。グラデーションをタップすると上で開きます。

開始色と終了色を、カラーコードの入力またはカラーピッカーで選び、その間に入れる色の数を3〜12で指定します。中間色は人間の見え方に近い色空間（OKLab）で計算されるため、色と色の間隔が均等に見え、途中に濁ったグレーが出ることもありません。

このツールでは、コード付きの個別の色が手に入り、1色ずつ使えます。Tailwindのカラースケール、グラフ、プレゼン資料、Webサイトのセクションなどにぴったりです。ある色から別の色へなめらかに変わる背景が必要なら、CSSのグラデーションジェネレーターを使ってください。

グラデーションカラーパレットとは？

ある色から別の色へ少しずつ変化していく色の並びです。たとえば、ピンクから水色までを7段階で、といった具合です。それぞれの色に固有のHEXコードがあり、個別に使えます。

パレットには何色まで入れられますか？

3〜12色です。色が少ないと段差がはっきりし、多いと変化がなめらかになって選べる色も増えます。

どの形式で書き出せますか？

すぐ使えるグラデーション付きのCSS変数、HEXコードのリスト、Tailwindの設定、JSON、SVG、PNG画像です。パレットジェネレーターで開いて、さらに編集することもできます。

中間色がグレーっぽくならないのはなぜ？

OKLabという、人間の見え方に合わせて設計された色空間で混色を計算しているからです。ピンクと緑のような反対色をRGBでそのまま混ぜると、くすんだ色を経由してしまいますが、OKLabなら変化がよりクリアで均等になります。

作ったパレットは共有できますか？

はい。ページのURLに2つの色と色数が保存されるので、URLをコピーして送るだけです。

グラデーションジェネレーターとの違いは？

グラデーションジェネレーターは、CSSで連続した背景を作るツールです。このツールは2色の間にある色を個別に取り出して、1色ずつ使えるようにします。

無料ですか？

はい、登録不要で回数制限もありません。お気に入りのグラデーションはハートで保存でき、このブラウザに保存されます。