颜色主题生成器
从任何十六进制颜色生成补色、类似色、三角配色和单色调色板。导出到 Tailwind、CSS 变量、SCSS、Material UI 等。
选择基础颜色
RGB
0, 82, 204
HSL
216°, 100%, 40%
快速预设
颜色和谐方案
Two colors opposite on the color wheel — high contrast, bold pairings.
#0052CC
0,82,204
216°,100%,40%
#CC7A00
204,122,0
36°,100%,40%
阴影与色调
相同色调从最浅到最深——用于设计系统色阶。
#E5F0FF
229,240,255
215°,100%,95%
#B3D1FF
179,209,255
216°,100%,85%
#80B3FF
128,179,255
216°,100%,75%
#3385FF
51,133,255
216°,100%,60%
#005CE6
0,92,230
216°,100%,45%
#003D99
0,61,153
216°,100%,30%
#002966
0,41,102
216°,100%,20%
#001433
0,20,51
216°,100%,10%
框架导出
导出已生成的颜色色阶，直接粘贴到你的项目中。
@import "tailwindcss";
@theme {
--color-brand-50: #F0F6FF;
--color-brand-100: #DCEAFE;
--color-brand-200: #B4D1FD;
--color-brand-300: #74AAFB;
--color-brand-400: #2E80FA;
--color-brand-500: #065FE5;
--color-brand-600: #054AB3;
--color-brand-700: #033886;
--color-brand-800: #02275E;
--color-brand-900: #02193C;
--color-brand-950: #010E23;
--color-brand: #0052CC;
}生成的色阶 (11 steps)
所有方案速览
Complementary
Analogous
Triadic
Split-Complementary
Tetradic
Monochromatic
颜色和谐详解
颜色和谐方案源自色轮上颜色之间的关系。补色相对放置，产生高对比度。类似色相邻放置，感觉内聚。三角配色方案使用三种均匀分布的颜色来实现生动的平衡。
设计系统导出
框架导出选项卡为 Tailwind CSS v3/v4、Material UI、Chakra UI、shadcn/ui、CSS 自定义属性和 SCSS 变量生成现成的颜色色阶。
使用方法
- 输入或选择一个十六进制颜色。
- 浏览和谐方案——补色、类似色、三角配色等。
- 切换到框架导出，为你的设计系统下载或复制色阶。
所有颜色计算都在你的浏览器中进行——不会向任何服务器发送任何内容。
常见问题
- 支持哪些颜色格式？
- 输入接受十六进制（#RRGGBB 或 #RGB）。输出显示每个色样的十六进制、RGB 和 HSL。
- 可以导出到 Tailwind CSS 吗？
- 可以。框架导出部分生成 Tailwind v3 和 v4 色阶，以及 CSS 变量、SCSS、Material UI、Chakra UI 和 shadcn/ui 格式。
- 这个工具免费吗？
- 是的，完全免费，无需注册。