配色作成

配色ジェネレーター - カラーパレットを自動生成

ワンクリックで配色を自動生成。スペースキーで切り替え、気に入った色をロックし、CSS・SCSS・Tailwind・JSON で書き出せます。

5 色

≈ DarkSlateGray

≈ DarkGreen

≈ LightCyan

≈ DarkCyan

≈ SkyBlue

各色の上で読みやすい文字色

:root {
  --color-1: #1F2917;
  --color-2: #006C41;
  --color-3: #D7F1ED;
  --color-4: #0095A8;
  --color-5: #94C3E2;
}

配色は OKLCH 色空間で生成されるため、明るさの段階が均等で、色同士のバランスが整います。類似色・補色・パステルなどのスタイルを選び、残したい色をロックして、イメージに合うまで生成を続けましょう。URL は配色ごとに更新されるので、ブックマークや共有も簡単です。

配色ジェネレーターはどのように色を選びますか？

ベースとなる色相を選び、類似色・補色・トライアド・モノクロマティック・パステルのルールで OKLCH 上に他の色を配置します。明るさを暗い色から明るい色まで分散させるので、どの配色にも使えるコントラストがあります。

1 色だけ残して他の色を変えられますか？

はい。鍵のボタンで色をロックすると、その位置に固定され、次の配色の色相の基準になります。各色を直接編集することもできます。

配色を共有するには？

ページの URL には常に現在の色が含まれます（例：?colors=1F2917-006C41-D7F1ED）。リンクをコピーして共有やブックマークに使えます。

生成した配色はアクセシブルですか？

各色に最も読みやすい文字色とコントラスト比を表示します。色覚シミュレーションで、色覚特性のある人にも重要な色が区別できるか確認しましょう。