设计配色

无需文档的大局级颜色搜索板

一张表看完!极其丝滑宏大的 Tailwind CSS 全线色彩面板(由 Slate 一直到 Rose,含 950 黑阶)。不再每次都需要跑回官网查 "emerald-400 的对撞色是多少"。

DesignTailwindCSS

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接,或在支持的设备上调用系统分享。

设计配色

Tailwind 50-950 全色谱

🔍
当前选中: -
显示 0 / 0

使用场景

  • 写页面时需要一个深邃背景色和一个显眼的主亮按钮,直接在一张表上比对 indigo-900 和 emerald-400。

如何使用

  1. 支持两种复制模式(传类名 或 直接传 HEX 数值供普通 CSS 项目使用)。

示例输入输出

Search

500

List

All base brights shown

FAQ

颜色是v3的吗?

是基于最新的官方标配。保留了全部常用中性色。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具,减少重复搜索。

CSS 具名颜色

CSS 具名颜色 - 标准色名速查

可用

查阅 W3C/CSS 标准具名颜色与对应色值,可按关键词筛选 Tomato、Cyan 等可直接用于样式的颜色名,适合原生 CSS 快速取色。

CSS 颜色 速查

CSS 转 Tailwind

CSS 转 Tailwind - 声明映射工具

可用

将单块 CSS 声明尽量映射为 Tailwind 工具类,常见布局、间距与颜色可匹配到标准类,复杂值会退回任意值写法,适合把样例样式迁到 utility-first。

CSS Tailwind 转换