カラーパレット生成

カラーパレット生成ツールです。基準 HEX、配色（補色・類似・スプリット・トライアド・テトラード・単色）とスタイルを選びます。スウォッチをロックして再生成すると、#3B82F6 の補色ではその青が残り、他だけ作り直します。

ロックした色は生成で残りません。2–8 色。矢印で並べ替え。HEX は編集できます。

帯プレビュー（色覚モードはこの表示だけ変えます）。

クリックするとコピーします

すべての組み合わせのコントラスト。4.5 以上は本文 AA。 · 文字のコントラストは 色の変換

例 — スウォッチをクリック

Color Palette Generator

This is a color palette generator: from one HEX it builds a set that follows a color-wheel harmony, the same idea as Adobe Color and Figma’s generator. Complementary is opposite on the wheel (H + 180°). Analogous walks ±20° and ±40°. Split complementary uses ±150°. Triadic is 120° / 240°. Tetradic is 90° / 180° / 270°. Monochromatic keeps H and S and steps L. #3B82F6 complementary includes that blue and its opposite. Styles (pastel, vivid, muted, earthy) change saturation and lightness, not the hue rule. HEX to Tailwind finds a default class; tint / shade mixes one color toward white or black. This page is a multi-color scheme.

How to use

  1. Set the base HEX (or the eyedropper / picker). Choose Harmony and Style, then Generate. Random picks a new base first.
  2. Lock a swatch so the next Generate keeps it and rebuilds the others. 2–8 colors. Add color appends the HEX field. × removes (not below 2). Arrows reorder like Figma.
  3. Edit the HEX on a swatch. Undo / Redo walk the last 40 states. Hue / saturation / lightness sliders shift unlocked colors together.
  4. Chips and Copy result copy the HEX list. CSS variables and JSON are extra exports. Download PDF prints HEX-labeled swatches.
  5. The contrast table is every pair’s WCAG ratio; 4.5+ shows AA. Full text-on-background checks stay on Color Converter. Color-blind view recolours the bar only (Protanopia, Deuteranopia, Tritanopia).

Harmonies, styles and limits

Hues are computed in HSL. Complementary of #3B82F6 (H ≈ 217°) sits near 37°. Pastel lowers S and raises L; vivid raises S; muted lowers S; earthy keeps mid S and lower L. Empty Generate uses #3B82F6. More than 8 colors is rejected. PDF labels stay HEX because the built-in font cannot cover every script. Nothing is uploaded; there is no account and no AI prompt box.

Where to use it

  • Brand or UI tokens: primary, accent, surface, text.
  • Checking whether two palette colors pass AA before you pick type colors.
  • Handing a PDF or a CSS :root block to a teammate.

Frequently asked questions

Is this the same as tint / shade?

No. Tint / shade mixes one HEX toward white or black. This page places several hues on the wheel.

Does lock survive Random?

Yes. Locked swatches stay; unlocked ones are replaced.

Is the color-blind view a diagnosis?

No. It is a rough RGB matrix preview, not a clinical simulation.

Related tools

Tint / shade: Tint Shade Generator. Contrast: Color Converter. 216 chart: Web Safe Colors.