design / 可用工具

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

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

DesignTailwindCSS

收藏工具

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

快捷操作

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

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

设计与布局

Tailwind 50-950 全色谱

🔍

使用场景

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

如何使用

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

示例输入输出

Search

500

List

All base brights shown

FAQ

颜色是v3的吗?

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

工具列表

相关推荐

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

CSS 147 具名标准色典

复古免配置 Web 原生色块字典

可用

W3C 规范级 CSS 万维网颜色字典速查表。无需使用复杂的 RGB,即刻检索诸如 Tomato、Cyan 等可直接内嵌于浏览器样式的极简颜色名。

Design System Dictionary

CSS 单块转 Tailwind 类

陈旧样式向 Utility Class 原则转换器

可用

复制一段别人的远古 `.class { display: flex; margin-top: 16px; }`,它将会使用正则探针嗅探尽量匹配还原成 Tailwind 的 `flex mt-4` 紧凑类。

Design Tailwind Converter