カラーパレット生成

ベースカラーから相性・三元色・類似の配色を HEX と CSS 変数で生成。

無料登録不要
オプション
パレット

  • #646C3D

    hsl(70, 28%, 33%)

  • #4C6C3D

    hsl(100, 28%, 33%)

  • #3D6C44

    hsl(130, 28%, 33%)

  • #3D6C5C

    hsl(160, 28%, 33%)

  • #3D646C

    hsl(190, 28%, 33%)

CSS 変数
:root {
  --brand-1: #646C3D;
  --brand-2: #4C6C3D;
  --brand-3: #3D6C44;
  --brand-4: #3D6C5C;
  --brand-5: #3D646C;
}

ベースカラーから相性・三元色・類似の配色を HEX と CSS 変数で生成。

ブランドカラー選びの難点は、1 色では画面を支えきれないことです。このツールは色相環の理論を用いてベースカラーから一式のパレットを導き出します——類似色、同系色、補色、分裂補色、三元色、四元色——そして HEX、HSL、貼り付けで使える CSS 変数を返します。

使い方

  1. 1カラーピッカーか HEX 値を入力してベースカラーを決めます。
  2. 2配色を切り替えて、同じベースが各理論でどうなるか確認します。
  3. 3一式または CSS 変数をデザインファイルやコードにコピーします。

よくある質問

関連ツール