Monu Tools

カラーパレット生成

ベースカラーからティント・シェードのスケールと補色・類似色・三色配色を生成します。

カラーパレット生成の使い方

  1. 01

    ベースカラーを選択するか16進数値を入力します。

  2. 02

    明から暗へのスケールとハーモニーカラーを確認します。

  3. 03

    スウォッチをクリックすると16進数コードをコピーします。

What this generator does

This color palette generator turns a single base color into a full light-to-dark scale plus complementary, analogous and triadic harmonies, with every swatch copyable as a hex code in one click.

Everything is computed in your browser from the color you enter, so nothing is uploaded.

How the tint and shade scale is built

The tint and shade scale keeps the base hue and saturation and spreads the lightness from light to dark, giving a consistent set of steps. This is exactly the kind of scale a design system uses for backgrounds, borders, text and states.

Complementary, analogous and triadic harmonies

The harmonies come from color theory, based on rotating the hue around the color wheel. Complementary is the opposite hue for strong contrast, analogous is the neighboring hues for a calm, cohesive look, and triadic is three evenly spaced hues for a balanced, vibrant set.

Building a palette from a brand color

Together these give you a practical starting palette from a brand color: a scale for your neutrals and shades, and harmonies for accents and highlights, without guessing hex codes by hand.

Enter a base color with the swatch picker or by hex, and the palette updates instantly so you can explore variations quickly.

よくある質問

スケールはどのように構築されますか?

ベースの色相と彩度を保持し、明度を明から暗へ分散させ、デザインシステムのカラースケールに似た一貫したティントとシェードのセットを生成します。

補色・類似色・三色配色とは何ですか?

色相を回転させることに基づくカラーハーモニーの関係です。補色は反対側、類似色は隣接、三色配色はカラーホイール上で等間隔に配置されます。

どこかにアップロードされますか?

いいえ。パレットは入力したカラーからブラウザ内で完全に計算されます。

このツールを埋め込む

このツールをご自身のウェブサイトに追加できます。下のコードをコピーしてください。内容は自動的に最新の状態に保たれます。

<iframe src="https://monu.tools/embed/ja/color-palette-generator" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

関連ツール