配色（カラーハーモニー）とは？

色相環上の位置で選んだ色の組み合わせです。類似色は隣り合い、補色は向かい合い、トライアドは均等な間隔で並びます。

シェードとティントとは？

1つの色を暗くしたもの、明るくしたものです。濃淡スケールは、デザインシステムと同じように50（最も明るい）から950（最も暗い）までの11段階です。

CSS変数、Tailwindのテーマ、JSON、またはHEXコードの一覧として書き出してください。

いいえ。パレットは端末内で作成されます。

はい。無料でお使いいただけます。登録もインストールも不要です。

無料・登録不要で、ブラウザで動作します。キーを押すだけでカラーパレットを生成し、気に入った色はロックできます。ベースカラーから類似色、補色、トライアドの配色でパレットを作ることも。CSS変数、Tailwind、JSONで書き出せます。

または Space を押します。気に入った色はロックすると残せます。

ベースカラー配色

配色の調和は色相環の上で色相を回転させます。類似色は近い色、補色は反対側の色、トライアドは3つの色相を等間隔に配置します。

濃淡をクリックするとコピーされます。パレットの別の色を選ぶと、その濃淡が表示されます。

CSS変数TailwindJSONHEXリスト

:root {
  --color-1: #1a1446;
  --color-2: #2f5bff;
  --color-3: #3ddc97;
  --color-4: #ffe14d;
  --color-5: #ff7ac6;
}

パレットはお使いのデバイス上で作成されます。

配色（カラーハーモニー）とは？: 色相環上の位置で選んだ色の組み合わせです。類似色は隣り合い、補色は向かい合い、トライアドは均等な間隔で並びます。
シェードとティントとは？: 1つの色を暗くしたもの、明るくしたものです。濃淡スケールは、デザインシステムと同じように50（最も明るい）から950（最も暗い）までの11段階です。
パレットをコードで使うには？: CSS変数、Tailwindのテーマ、JSON、またはHEXコードの一覧として書き出してください。
何かアップロードされますか？: いいえ。パレットは端末内で作成されます。
カラーパレット生成は無料ですか？: はい。無料でお使いいただけます。登録もインストールも不要です。