Color Palette Generatorの使い方

ベースカラーを選択し、色彩調和ルールを選ぶと、バランスの取れた配色パレットが自動生成されます。類似色、補色、トライアド、分裂補色、テトラッド、モノクロマティックの6種類のルールに対応。各色をクリックでHEXコードをコピー、「CSS変数コピー」でCSS custom propertiesとしてエクスポートできます。

How to Use the Color Palette Generator

This tool generates harmonious color palettes based on color theory. Choose a base color and a harmony rule (analogous, complementary, triadic, split-complementary, tetradic, or monochromatic) to create a balanced palette. Click any color to copy its HEX code, or export the entire palette as CSS custom properties. The random generator uses the golden angle algorithm for visually pleasing color distribution. All color values are shown in HEX, RGB, and HSL formats.

調和ルールの使い分け / Harmony Rules

ルール / Rule	特徴 / Character	向いている用途 / Best for
類似色 (Analogous)	色相環の隣接色。穏やかで統一感 Adjacent hues; calm and cohesive	背景・落ち着いたUI Backgrounds, calm UIs
補色 (Complementary)	正反対の色相。強いコントラスト Opposite hues; high contrast	CTAボタン・強調 CTAs and emphasis
トライアド (Triadic)	120°間隔の3色。バランス良く鮮やか Three hues 120° apart	イラスト・グラフ配色 Illustrations, charts
分裂補色 (Split-complementary)	補色の両隣を使う。補色より扱いやすい Softer than complementary	初心者のアクセント選び Safe accent picking
モノクロマティック	同一色相の明度違い。失敗しにくい One hue, varied lightness	ブランド単色展開・ダークモード設計 Brand shades, dark mode

よくある落とし穴 / Common Pitfalls

彩度の暴走 -- 生成色をそのまま大面積に使うと疲れる配色に。背景には彩度を落として使う
Desaturate generated colors for large surfaces
コントラスト未確認 -- 調和していても文字が読めるとは限らない。Contrast CheckerでWCAG確認を
Harmony does not guarantee readable text contrast
60-30-10を無視 -- 5色を均等に使うと散らかる。主60%・副30%・強調10%の配分が定石
Apply the 60-30-10 distribution rule

Why browser-only?

Palette exploration is iterative — dozens of generations before the right one. Doing that against a server adds latency and leaks your brand direction. This generator computes harmonies locally with simple HSL math: instant results, full offline support, zero requests. Extract palettes from existing images with our Image Color Extractor.

配色の生成・コピーは全てブラウザ内で完結します。手持ち画像からの抽出はImage Color Extractor、 OKLCH変換はColor Converterをどうぞ。

HEX	RGB	HSL
#3CE0F6	rgb(60, 224, 246)	hsl(187, 91%, 60%)
#3B82F6	rgb(59, 130, 246)	hsl(217, 91%, 60%)
#523CF6	rgb(82, 60, 246)	hsl(247, 91%, 60%)

Color Palette Generator