配色方案生成器

选一个主色，按互补、类似、三角、四角或单色规则生成配色，并导出 CSS 变量。

配色模式

#64ADF2复制

#648AF2复制

#6467F2复制

#8564F2复制

#A864F2复制

CSS 变量

:root {
  --color-1: #64ADF2;
  --color-2: #648AF2;
  --color-3: #6467F2;
  --color-4: #8564F2;
  --color-5: #A864F2;
}

相关工具

选取或粘贴颜色，HEX、RGB、HSL 格式互转，自动生成同色系色板。

调两个颜色和角度实时预览 CSS 渐变代码，一键复制。

拖动滑块调出盒阴影效果，实时预览并生成 CSS 代码。

四角圆角独立调整实时预览，生成 CSS border-radius 代码。

预览系统字体效果，字号字重可调，选字体不再靠猜。