Tailwind 完整调色板生成器
支持 HEX、RGB、HSL、CSS 变量与类，参考 shadcn/ui 颜色系列，可直接复制粘贴
配置
留空时使用各系列的默认 500 色值
中性灰
格式:
中性灰-50
中性灰-100
中性灰-200
中性灰-300
中性灰-400
中性灰-500
中性灰-600
中性灰-700
中性灰-800
中性灰-900
中性灰-950
石灰
格式:
石灰-50
石灰-100
石灰-200
石灰-300
石灰-400
石灰-500
石灰-600
石灰-700
石灰-800
石灰-900
石灰-950
锌灰
格式:
锌灰-50
锌灰-100
锌灰-200
锌灰-300
锌灰-400
锌灰-500
锌灰-600
锌灰-700
锌灰-800
锌灰-900
锌灰-950
板岩灰
格式:
板岩灰-50
板岩灰-100
板岩灰-200
板岩灰-300
板岩灰-400
板岩灰-500
板岩灰-600
板岩灰-700
板岩灰-800
板岩灰-900
板岩灰-950
标准灰
格式:
标准灰-50
标准灰-100
标准灰-200
标准灰-300
标准灰-400
标准灰-500
标准灰-600
标准灰-700
标准灰-800
标准灰-900
标准灰-950
正红
格式:
正红-50
正红-100
正红-200
正红-300
正红-400
正红-500
正红-600
正红-700
正红-800
正红-900
正红-950
橙红
格式:
橙红-50
橙红-100
橙红-200
橙红-300
橙红-400
橙红-500
橙红-600
橙红-700
橙红-800
橙红-900
橙红-950
琥珀黄
格式:
琥珀黄-50
琥珀黄-100
琥珀黄-200
琥珀黄-300
琥珀黄-400
琥珀黄-500
琥珀黄-600
琥珀黄-700
琥珀黄-800
琥珀黄-900
琥珀黄-950
柠檬黄
格式:
柠檬黄-50
柠檬黄-100
柠檬黄-200
柠檬黄-300
柠檬黄-400
柠檬黄-500
柠檬黄-600
柠檬黄-700
柠檬黄-800
柠檬黄-900
柠檬黄-950
青柠绿
格式:
青柠绿-50
青柠绿-100
青柠绿-200
青柠绿-300
青柠绿-400
青柠绿-500
青柠绿-600
青柠绿-700
青柠绿-800
青柠绿-900
青柠绿-950
草绿
格式:
草绿-50
草绿-100
草绿-200
草绿-300
草绿-400
草绿-500
草绿-600
草绿-700
草绿-800
草绿-900
草绿-950
祖母绿
格式:
祖母绿-50
祖母绿-100
祖母绿-200
祖母绿-300
祖母绿-400
祖母绿-500
祖母绿-600
祖母绿-700
祖母绿-800
祖母绿-900
祖母绿-950
凫蓝
格式:
凫蓝-50
凫蓝-100
凫蓝-200
凫蓝-300
凫蓝-400
凫蓝-500
凫蓝-600
凫蓝-700
凫蓝-800
凫蓝-900
凫蓝-950
青蓝
格式:
青蓝-50
青蓝-100
青蓝-200
青蓝-300
青蓝-400
青蓝-500
青蓝-600
青蓝-700
青蓝-800
青蓝-900
青蓝-950
天青蓝
格式:
天青蓝-50
天青蓝-100
天青蓝-200
天青蓝-300
天青蓝-400
天青蓝-500
天青蓝-600
天青蓝-700
天青蓝-800
天青蓝-900
天青蓝-950
钴蓝
格式:
钴蓝-50
钴蓝-100
钴蓝-200
钴蓝-300
钴蓝-400
钴蓝-500
钴蓝-600
钴蓝-700
钴蓝-800
钴蓝-900
钴蓝-950
靛青
格式:
靛青-50
靛青-100
靛青-200
靛青-300
靛青-400
靛青-500
靛青-600
靛青-700
靛青-800
靛青-900
靛青-950
紫罗兰
格式:
紫罗兰-50
紫罗兰-100
紫罗兰-200
紫罗兰-300
紫罗兰-400
紫罗兰-500
紫罗兰-600
紫罗兰-700
紫罗兰-800
紫罗兰-900
紫罗兰-950
紫晶
格式:
紫晶-50
紫晶-100
紫晶-200
紫晶-300
紫晶-400
紫晶-500
紫晶-600
紫晶-700
紫晶-800
紫晶-900
紫晶-950
品红
格式:
品红-50
品红-100
品红-200
品红-300
品红-400
品红-500
品红-600
品红-700
品红-800
品红-900
品红-950
粉红
格式:
粉红-50
粉红-100
粉红-200
粉红-300
粉红-400
粉红-500
粉红-600
粉红-700
粉红-800
粉红-900
粉红-950
玫瑰红
格式:
玫瑰红-50
玫瑰红-100
玫瑰红-200
玫瑰红-300
玫瑰红-400
玫瑰红-500
玫瑰红-600
玫瑰红-700
玫瑰红-800
玫瑰红-900
玫瑰红-950
使用说明与技巧
- 在“配置”中选择需要的颜色系列，或使用“全部/清空”。
- 可填写自定义 HEX 基色以生成对应色阶。
- 在“预览与复制”中点击颜色卡片进行复制，右上角可切换格式。
- 在“CSS 变量/类”页签中复制代码并粘贴到项目。
HEX
RGB
HSL
CSS 变量
CSS 类
快速集成示例
CSS 变量
:root {--blue-500: #3b82f6; --neutral-200: #e5e7eb;}CSS 类
.bg-blue-600 { background-color: var(--blue-600); }
.text-neutral-900 { color: var(--neutral-900); }最佳实践
- 统一主色，辅助色不超过两种，避免视觉噪音。
- 按钮与文本保证对比度，浅底用深色文本，深底用浅色文本。
- 使用 200-300 边框色获得更柔和的分隔效果。