Skip to content
Yunedia Tools

パレット生成

ベースカラーから調和する配色(補色・類似色・三色配色・明暗展開など)を生成する。CSS形式で書き出せる。

スウォッチをクリックするとHEX値をコピーできます。

使い方

  1. ベースカラーをスウォッチか HEX 入力で選ぶ。
  2. 配色方式(補色、類似色、三色配色など)を選ぶ。シェードとティント、類似色では色数も調整できる。
  3. スウォッチをクリックすると、その色の HEX 値をコピーできる。
  4. パレット全体は CSS 変数(--color-1 など)または HEX 一覧としてまとめてコピーできる。

注意事項

パレットは色相環上の角度と HSL の明度から計算する。補色は色相を180度回転させ、三色配色は120度ずつ、類似色は±40度の範囲で段階的にずらす。シェードは明度を下げ、ティントは白へ近づける。生成はすべてブラウザ内で完結する。

よくある質問

配色方式によって色数が固定されるのはなぜ?
補色(2色)、三色配色(3色)、分裂補色(3色)、四色配色(4色)は色相の幾何学で色数が決まるためだ。色数を自由に変えられるのは類似色、シェード、ティントのみになる。
生成したパレットは保存される?
保存されない。ページを離れると消えるため、必要な場合は CSS 変数としてコピーして自分のプロジェクトに貼り付けてほしい。