配色方案產生器

從任意基準色產生和諧的配色方案。支援互補色、鄰近色、三角色和單色方案。

Complementary

#6366F1

#F1EE63

Analogous

#63ADF1

#6366F1

#A763F1

Triadic

#6366F1

#F16366

#66F163

Split Complement

#6366F1

#F1A763

#ADF163

Tetradic

#6366F1

#F163AD

#F1EE63

#63F1A7

Monochromatic

#0F13AC

#1D21EB

#6366F1

#A1A3F7

#D0D1FB

如何使用本工具

1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
2
Watch the six scheme rows update instantly as you change the base color.
3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.

色彩理論根據色輪上的位置來定義和諧的色彩關係。互補色位於相對的位置（180°）。鄰近色彼此相鄰（30°）。三角配色方案使用三種等距的顏色（120°）。本工具會從你選定的基準色出發計算出每一種方案，為你提供一個建立在成熟色彩理論之上的起始調色盤。

Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.

哪種方案最適合網站？▼

鄰近色（相近的色調）傳達出平靜與統一感。互補色為行動號召營造強烈對比。單色方案是最穩妥的專業選擇。