カラーパレットジェネレーター
任意のベースカラーから補色・類似色・三角・四角配色スキームを生成
ベースカラー
配色スキーム
生成されたパレット
カラーパレットとは?
カラーパレットとは、デザインで一緒に使うために選ばれた色の固定セットです。ブランド・ウェブサイト・イラストのベースカラーを1色決めたとき、隣り合わせても違和感のない補完色が必要になります。カラーパレットの生成は、色彩理論のルール——具体的には標準HSLカラーホイール上の幾何学的な関係——を適用することで、その選択を自動化します。
HSL(色相・彩度・明度)カラーホイールは、色相を360度の円上に配置します。赤は0度、緑は120度、青は240度に位置します。すべての配色スキームは、ベースカラーから特定の角度にある色相を選択することで機能します。たとえば補色ペアは180度離れた2色を使用します。類似色セットはどちらかの側30度以内の色を選びます。選択した色相がホイール上に均等に分散し、特定の領域に集中しないため、これらの幾何学的なルールはバランスの取れた組み合わせを生み出します。
このツールは任意のhex形式の色を入力として受け取り、HSLに変換し、選択したスキームで定義された角度だけ色相を回転させ、結果をhexに戻します。補色・類似色・三角・分割補色・四角・モノクロマティックの6つのスキームに対応しており、それぞれ2〜5色の異なる数の出力色を生成します。
このカラーパレットジェネレーターを使う理由
試行錯誤でうまく合う色を探すのは時間がかかり、一貫性も保ちにくいものです。パレットジェネレーターは色彩理論のルールを瞬時に適用し、どのベースカラーからでも数学的にバランスの取れた結果をすぐに提供します。
カラーパレットジェネレーターのユースケース
配色スキームの比較
すべての配色スキームは、HSLホイール上のベースカラーからの色相回転角度に基づいて色を選択します。下の表は各スキーム・生成される色の数・回転角度・最も適したデザインの用途をまとめたものです。
| スキーム | 色数 | 色相角度 | 最適な用途 |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, single-brand pages |
HSLカラーホイールの回転の仕組み
このツールのすべてのパレット生成はHSLカラーモデルに基づいています。3つの軸を理解することで、各スキームでベースカラーがどのように変換されるかを予測できます。
コード例
HSL変換と色相回転を使ってプログラムでカラーパレットを生成します。
// 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"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']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
}