跳转到正文
▦

Palette Generator

ベース色から調和のとれたパレットを生成。

Base
#3b82f6
vs white 3.68:1 · failvs black 5.71:1 · AA
Analogous 1
#3bf6af
vs white 1.4:1 · failvs black 14.99:1 · AA
Analogous 2
#3be0f6
vs white 1.59:1 · failvs black 13.18:1 · AA
Analogous 3
#513bf6
vs white 6.35:1 · AAvs black 3.31:1 · fail
Analogous 4
#af3bf6
vs white 4.39:1 · near AAvs black 4.78:1 · AA
:root {
  --color-base: #3b82f6;
  --color-analogous-1: #3bf6af;
  --color-analogous-2: #3be0f6;
  --color-analogous-3: #513bf6;
  --color-analogous-4: #af3bf6;
}

Palettes rotate the base colour around the hue wheel. Contrast figures are reference values against white/black — always re-check the actual text/background pair you use.

关于Palette Generator

A palette generator rotates a base color around the hue wheel to derive a harmonious set of colors automatically. Most tools stop at showing swatches — toco.tools adds paste-ready code export and WCAG contrast figures on top. Pick CSS custom properties, a Tailwind `theme.extend.colors` fragment, SCSS variables, JSON, or a plain HEX list, and drop the result straight into your project. Each harmony mode suits a different job. Complementary pairs the base with its opposite hue (+180°) for strong contrast — good for CTA buttons and accents. Analogous groups neighboring hues (±30°, ±60°) into a naturally cohesive set, useful for tonal ramps and background gradients. Triadic splits the wheel into three equal hues (+120°, +240°) for variety that is gentler than complementary but still lively — common in illustration and icon sets. Tetradic (four hues), split-complementary (both neighbors of the complement), and monochromatic (lightness only, same hue) round out the options. Each swatch shows its contrast ratio against white and black with a WCAG pass/fail hint — a reference only; check the actual text/background pair you plan to use with the contrast-checker tool. Treat generated palettes as a starting point to refine against brand guidelines and accessibility requirements. Everything runs in your browser; colors are never sent to a server.

使用方法

  1. Enter a base color as HEX, RGB, or HSL (or pick with the color input)
  2. Choose a harmony mode: complementary, analogous, triadic, and more
  3. Check contrast on each swatch, then copy CSS, Tailwind, SCSS, or JSON

常见问题

What is a palette generator?

A tool that rotates one base color around the hue wheel to automatically produce a set of harmonious colors, saving the trial-and-error of picking matching hues by hand.

What's the difference between complementary, analogous, and triadic?

Complementary uses the opposite hue (+180°) for strong contrast. Analogous groups neighboring hues (±30°, ±60°) for a naturally cohesive look. Triadic splits the wheel into three equal hues (+120°, +240°) for variety without the harshness of complementary. Pick complementary for accents, analogous for cohesion, and triadic for liveliness.

Can I paste the output straight into Tailwind config?

Yes. The Tailwind tab outputs an object fragment ready to paste into `theme.extend.colors`. CSS variables, SCSS variables, JSON, and a plain HEX list are also available.

What are the contrast figures on each swatch for?

They show the WCAG contrast ratio of each color against white and black backgrounds, as a rough guide to legibility as text. Always verify the specific text/background pair you'll actually use with the contrast-checker tool.

Is my color data sent anywhere?

No. Palette generation and code formatting run entirely in your browser's JavaScript; nothing is sent to toco.tools's servers.