TL
ツールラボ
💰寄付する
💰寄付する

カラーパレットジェネレーター

色彩理論に基づく調和のとれたカラーパレットを生成。

このツールについて

カラーパレットジェネレーターは7つの色彩理論原則(補色、トライアド、アナログ、スプリット補色、テトラッド、モノクロマティック、シェード)を使用して、任意のベースカラーから調和のとれた配色を作成します。

各スウォッチは16進数コードを表示し、クリックで値をコピーできます。このツールは内部的にHSL色空間を使用してカラーホイール上の正確な角度を計算します。

使い方

  1. カラーピッカーをクリックするか、8つのプリセットスウォッチからベースカラーを設定します。
  2. タブバーからハーモニースキームを選択します(補色、トライアドなど)。
  3. パレットが即座に生成され、各スウォッチに16進数コードが表示されます。
  4. スウォッチをクリックして16進数コードをクリップボードにコピーします。

カラーハーモニースキーム

補色 — 対向する2色;高コントラスト。トライアド — 120°間隔の3色;バランスが良い。アナログ — ホイール上で隣接した色;自然な調和。スプリット補色 — ベース+補色の両隣。テトラッド — 90°間隔の4色。モノクロマティック — 1色のティントとシェード。シェード — 1色相の全明度範囲。

活用事例

UI/UXデザイナーはWebやモバイルアプリのカラーシステム構築に使います。グラフィックデザイナーはブランドアイデンティティや広告素材のパレット選定に活用します。Webデベロッパーは16進数コードをCSS変数やTailwindの設定に直接貼り付けます。

よくある質問

  • カラーコードの形式は?すべての色は16進数形式(#RRGGBB)で表示され、CSS・Figma・その他デザインツールにすぐ貼り付けられます。
  • 各スキームで何色生成されますか?補色: 2色。トライアド/スプリット: 3色。テトラッド: 4色。アナログ: 4色。モノクロ/シェード: 5〜9色。
  • Webサイトに最適なスキームは?落ち着いたプロらしい印象にはアナログ、高コントラストにはコンプリメンタリー、ミニマルにはモノクロマティックが向いています。