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
使用说明与技巧

  1. 在“配置”中选择需要的颜色系列，或使用“全部/清空”。
  2. 可填写自定义 HEX 基色以生成对应色阶。
  3. 在“预览与复制”中点击颜色卡片进行复制，右上角可切换格式。
  4. 在“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 边框色获得更柔和的分隔效果。

其他工具

API工具

API工具，支持查询API，API结果，API记录等！

代码差异对比

比较两段文本的差异，支持显示差异、间隔阴影和差异下划线

SQL查询工具

SQL查询工具，支持查询SQL，SQL结果，SQL记录等！

密码生成工具

密码生成工具，支持查询密码，密码结果，密码记录等！

哈希值生成工具

专业的哈希值生成工具，支持多种哈希算法，快速生成文件和文本的哈希值。

在线代码运行器

在线代码运行器，支持多种编程语言

代码依赖分析工具

专业的依赖分析工具，支持多种语言的依赖分析，方便在项目中管理和维护依赖。

二维码生成工具

二维码生成工具，支持查询二维码，二维码结果，二维码记录等！

正则表达式工具

正则表达式工具，支持查询正则表达式，正则表达式结果，正则表达式记录等！

字符编码工具

专业的字符编码工具，支持多种字符编码，方便在不同系统之间转换。

CSS代码生成工具

CSS代码生成工具，支持查询CSS代码，CSS代码结果，CSS代码记录等！

CSS 玻璃化生成器

玻璃化生成器，支持查询玻璃化生成器，玻璃化生成器结果，玻璃化生成器记录等！

HTML、CSS、JS工具

HTML、CSS、JS工具，支持查询HTML、CSS、JS，HTML、CSS、JS结果，HTML、CSS、JS记录等！

Crontab表达式解析工具

Crontab表达式解析工具