配色方案生成器

从任意基准色生成和谐的配色方案。支持互补色、邻近色、三角色和单色方案。

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.

哪种方案最适合网站？▼

邻近色（相近的色调）传达出平静与统一感。互补色为行动号召营造强烈对比。单色方案是最稳妥的专业选择。