KOENJP

配色パレットジェネレーター

PALETTE · GENERATOR

スペースキーで5色の配色パレットをランダム生成。気に入った色はロックして残せます。類似色・補色などの配色ルールを選び、CSS変数・SCSS・JSONなどで書き出せます。

Space 生成 · Ctrl+Z 元に戻す
HOW TO

使い方

  1. スペースキーを押すか「新しいパレット」をクリックすると、5色の配色が生成されます。
  2. 残したい色はロックします。ロックした色は再生成しても変わりません。
  3. 配色ルール(ランダム・類似色・補色・トライアド・単色)を選びます。
  4. HEXコードをクリックでコピー、スポイトアイコンで色を自分で指定できます。「元に戻す」ボタンで1つ前に戻せます。
  5. 「エクスポート」でCSS変数・SCSS・JSONなどの形式でコピー、「リンクをコピー」で共有できます。
PAIRS WELL WITH

あわせて使いたいツール

FAQ

よくある質問

配色ルールはどういう仕組みですか?

色相環をもとに色相を選びます。類似色は隣り合う色相、補色は反対側の色相、トライアドは3つの色相を均等に配置し、単色は1つの色相の明るさと鮮やかさを変えて作ります。

作ったパレットを共有できますか?

はい。パレットはページのURLに保存されるので、「リンクをコピー」で同じ色がそのまま開くリンクを共有できます。

書き出す変数名は変えられますか?

はい。エクスポート画面で変数名を変えると、コード内の変数名がすべてその名前に更新されます。