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记录等！

密码生成工具

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

哈希值生成工具

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

在线代码运行器

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

代码依赖分析工具

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

二维码生成工具

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

二维码解码器

支持上传图片、粘贴截图和摄像头识别二维码内容，适合客服、运营和日常扫码核验

正则表达式工具

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

字符编码工具

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

HTML Entity 编解码器

在普通文本与 HTML 实体之间快速转换，适合前端模板、邮件内容和 CMS 富文本处理

CSS代码生成工具

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

CSS 玻璃化生成器

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

HTML、CSS、JS工具

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

Crontab表达式解析工具

Crontab表达式解析工具

    问题反馈