便利ツールハブシンプルに使える便利ツール集

カラーパレット生成ツール

色彩理論に基づいた調和するカラーパレットを自動生成

ベースカラーを選択

生成されたパレット

クリックで色をコピー

CSSコード

:root {
  --color-primary: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #513bf6;
  --color-analogous-2: #3bdff6;
  --color-accent: #0953cc;
}

使い方

  • 1.カラーピッカーまたはHex入力でベースカラーを選択
  • 2.色彩理論に基づいた5色のパレットが自動生成されます
  • 3.Hex / RGB / HSL形式を切り替えてCSSコードを取得
  • 4.コピーボタンでクリップボードにコピー

※ 選択したベースカラーは自動的にブラウザに保存されます

生成される色の説明

primary:
選択したベースカラー
complementary:
補色（色相+180度）
analogous-1:
類似色1（色相+30度）
analogous-2:
類似色2（色相-30度）
accent:
アクセントカラー（明度を下げた色）