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

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

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

ベースカラーを選択

生成されたパレット

クリックで色をコピー

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:
アクセントカラー(明度を下げた色)