ToolDeck

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

任意のベースカラーから補色・類似色・三角・四角配色スキームを生成

サンプルを試す

ベースカラー

配色スキーム

生成されたパレット

カラーパレットとは?

カラーパレットとは、デザインで一緒に使うために選ばれた色の固定セットです。ブランド・ウェブサイト・イラストのベースカラーを1色決めたとき、隣り合わせても違和感のない補完色が必要になります。カラーパレットの生成は、色彩理論のルール——具体的には標準HSLカラーホイール上の幾何学的な関係——を適用することで、その選択を自動化します。

HSL(色相・彩度・明度)カラーホイールは、色相を360度の円上に配置します。赤は0度、緑は120度、青は240度に位置します。すべての配色スキームは、ベースカラーから特定の角度にある色相を選択することで機能します。たとえば補色ペアは180度離れた2色を使用します。類似色セットはどちらかの側30度以内の色を選びます。選択した色相がホイール上に均等に分散し、特定の領域に集中しないため、これらの幾何学的なルールはバランスの取れた組み合わせを生み出します。

このツールは任意のhex形式の色を入力として受け取り、HSLに変換し、選択したスキームで定義された角度だけ色相を回転させ、結果をhexに戻します。補色・類似色・三角・分割補色・四角・モノクロマティックの6つのスキームに対応しており、それぞれ2〜5色の異なる数の出力色を生成します。

このカラーパレットジェネレーターを使う理由

試行錯誤でうまく合う色を探すのは時間がかかり、一貫性も保ちにくいものです。パレットジェネレーターは色彩理論のルールを瞬時に適用し、どのベースカラーからでも数学的にバランスの取れた結果をすぐに提供します。

即時パレット生成
ベースカラーとスキームの種類を選択すると、パレットがすぐに表示されます。フォームの送信もローディング画面も不要です。ベースカラーを変更すると出力がリアルタイムで更新されます。
🎨
6つの配色スキーム
補色・類似色・三角・分割補色・四角・モノクロマティックから選択できます。各スキームは高コントラストのペアから繊細な単一色相グラデーションまで、異なる視覚効果をもたらします。
🔒
プライバシー優先の処理
すべての色計算はブラウザ内で実行されます。色のデータが外部サーバーに送信されることはありません。ページ読み込み後はオフラインでも動作します。
📋
ワンクリックエクスポート
hex値を個別にコピーするか、パレット全体をワンクリックでコピーできます。CSS・Figma・Tailwindの設定ファイル、または任意のhex値を受け付けるデザインツールに直接貼り付けられます。

カラーパレットジェネレーターのユースケース

UIテーマの作成
新しいアプリを開発するフロントエンドエンジニアは、ブランドカラーを起点にして、プライマリ・セカンダリ・アクセントトークン用のパレット全体を生成できます。三角または四角スキームなら、ボタン・リンク・アラート・背景に使えるだけの色の多様性が得られます。
デザインシステムのカラートークン
デザインシステムのエンジニアは、モノクロマティックパレットを使って単一ブランドカラーの明度スケールを生成し、各ステップを名前付きトークン(例:blue-100〜blue-900)にマッピングします。
データ可視化
データエンジニアやアナリストは、グラフの系列に衝突しない識別しやすい色が必要です。類似色または三角スキームなら、3〜6系列に十分なコントラストを持ちながら、グラフ全体の視覚的な統一感を保てます。
マーケティングのランディングページ
キャンペーンページを制作するデザイナーは、ブランドのメインカラーを起点に分割補色スキームを使うことで、ロゴと衝突せずにCTAボタンやハイライトセクション用のアクセントカラーを見つけられます。
アクセシビリティのペアリング
WCAGの準拠をテストするQAエンジニアは、生成したパレットの色をペアにしてコントラストチェッカーで検証します。補色または分割補色スキームから始めると、輝度コントラストの高いペアが得られることが多いです。
色彩理論の学習
デザインを学ぶ学生は、同じベースカラーで6つのスキームを切り替えることで、各幾何学的配置がホイール上でどのように色相を分散させるかを確認できます。視覚的な出力により、抽象的な角度の概念が具体的に理解できます。

配色スキームの比較

すべての配色スキームは、HSLホイール上のベースカラーからの色相回転角度に基づいて色を選択します。下の表は各スキーム・生成される色の数・回転角度・最も適したデザインの用途をまとめたものです。

スキーム色数色相角度最適な用途
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

HSLカラーホイールの回転の仕組み

このツールのすべてのパレット生成はHSLカラーモデルに基づいています。3つの軸を理解することで、各スキームでベースカラーがどのように変換されるかを予測できます。

色相(0〜360)
カラーホイール上の角度による位置。0が赤、60が黄、120が緑、180がシアン、240が青、300がマゼンタです。配色スキームは彩度と明度を固定したまま、この値を回転させます。
彩度(0〜100%)
色の鮮やかさ。100%は完全に彩度が高く、0%はグレーです。配色スキームはベースの彩度を保持するため、生成されたすべての色が同じ鮮やかさを共有します。
明度(0〜100%)
色の明るさ。0%は黒、50%が純粋な色相、100%は白です。モノクロマティックスキームは明度を変化させてトーンスケールを作成し、他のすべてのスキームは明度を一定に保ちます。

コード例

HSL変換と色相回転を使ってプログラムでカラーパレットを生成します。

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

よくある質問

補色と分割補色の違いは何ですか?
補色はカラーホイール上でちょうど180度離れた2色を使い、最大の色相コントラストをもたらします。分割補色は直接の反対色の代わりに、ベースから150度と210度の位置にある2色を使用し、強いコントラストを保ちながら視覚的な緊張感を和らげます。分割補色はUIデザインで扱いやすく、どちらのアクセントカラーもベースカラーと直接対立しません。
UIパレットには何色が適切ですか?
ほとんどのデザインシステムは、プライマリ・セカンダリ・ニュートラル・1〜2色のアクセントという3〜5色のコア色相を使用します。各コア色相はその後、明度スケール(100〜900)を持ちます。コア色相には三角または四角スキームから始め、各色相に対してモノクロマティックスケールを生成する方法が効果的です。
これらのパレットをTailwind CSSで使えますか?
はい。hex値をコピーして、tailwind.config.jsまたはtailwind.config.tsファイルのcolorsオブジェクトに追加します。モノクロマティックスケールの場合は、Tailwindの命名規則に合わせて各シェードに番号付きのキー(50・100・200など)をマッピングします。
生成された色がくすんで見えるのはなぜですか?
ベースカラーの彩度が低い場合や、明度が極端(0%または100%に非常に近い)な場合、回転後の色相も同様にくすんで見えます。ジェネレーターはベースカラーの彩度と明度の値をそのまま保持します。鮮やかなパレットを得るには、彩度50%以上・明度30〜70%の範囲のベースカラーを選んでください。
HSLとHSV/HSBの違いは何ですか?
HSLとHSVはどちらも円形の色相軸を使用しますが、明るさの定義が異なります。HSLでは明度50%が純粋な色相で100%が白です。HSV(HSBとも呼ばれる)では、明るさ100%が純粋な色相であり、彩度を下げなければ白には到達できません。ほとんどのパレットジェネレーターがHSLを使用するのは、明度軸が色の明るさの知覚により直感的に対応しているためです。
配色スキームとアクセシビリティはどのように関係しますか?
色の調和とWCAGのコントラストは別の問題です。補色ペアは最大の色相コントラストを持ちますが、テキストの読みやすさに必要な輝度コントラストが十分とは限りません。パレットを生成した後は、前景・背景の各ペアをWCAG AA(通常テキストで4.5:1)に対してテストしてください。明度が近い色は色相の関係に関わらず基準を満たしません。
HSLはCSSのhsl()関数と同じですか?
はい。CSSのhsl()関数は3つの引数を取ります:色相(度数・0〜360)・彩度(パーセンテージ)・明度(パーセンテージ)です。CSS Color Level 4では、スラッシュ区切りのアルファ値も使用できます:hsl(240 60% 50% / 0.8)。このジェネレーターが使用するHSLモデルはCSS仕様と完全に一致しているため、色相・彩度・明度の値をそのままスタイルシートに貼り付けられます。