写给前端开发者的设计指南——Tailwind CSS 4.0 色彩设计与应用

编者按：本系列文章适用于热衷于创建易用且美观的网站与应用程序的开发者。 这份设计初学者投喂学习指南，会教你如何运用设计范式，创建属于自己的用户界面（UI）。 你会学习到如何选择颜色(Colors)，并有效利用布局(Layout)与组件(Components)来构建网站与应用程序。 希望你在读完本系列后，能够掌握一些基本的设计原则，从而设计出美观的网站与应用程序。

色彩相关知识

在介绍tailwind CSS 框架之前，我们先来回顾一下上一篇的主要内容：

我们介绍了色彩的原色、间色与复色的相关理论知识，这三者直接的关系刚好验证了中国道家哲学：

原色混合成间色，间色与原色构成复色，然后再混合成更多色彩...

而这些我们能够识别出来的不同色彩，主要是依赖色相（Hue）这一特征。它是区分不同颜色的基本特征。

然后通过给色彩加入不同纯度的白色、黑色与灰色，就能改变该色彩的饱和度（Saturation），用行话来说分别是调整色彩的明色调(Tint)、暗色调(Shade)与灰色调(Tone)。

那为什么需要调整色彩的饱和度？

因为过于饱和（纯度太深）的颜色容易给人刺眼或不适感。

接下来我们学习了如何进行色彩搭配，目标是构建和谐色彩。方法包括：单色组合、类似色组合、互补色组合、三色组合。

偷偷提醒一下，如果忘记了这些概念，请返回上一篇 回顾一下吧。

最后分享了比较简单的色彩心理学，即常见的颜色在文化中所代表的意义，比如绿色、黄色、粉色等鲜艳色彩能为网站注入更年轻活泼的气息；相比之下，深蓝色和黑色则更容易营造出商务化或企业化的感觉。

色彩理论对于前端的重要性

那有前端就开始说了：这些理论知识，对于我这个搬砖的牛马有啥用啊？

也许你们团队有非常专业的设计师，网站的色彩搭配你根本不care，通过sketch或者Figma 直接复制到代码中即可。但你有没有想过，设计师为什么要用这几种色彩搭配，这种配色方案符合色彩搭配的哪种组合方式，当前主色是否符合产品价值观...

如果你能够想通这些问题，恭喜你获得了在设计规范方面与设计师或产品经理battle的能力，也许这种能力恰好是你晋升更高职级的敲门砖。

也许你是一名独立开发者，全栈是的你必备技能，而审美感是你打造优秀用户体验的必要条件。即使coding 能力再强，用户打开你的网站应用，看到的却是晃眼睛的banner，流量变现从何谈起？

所以，作为一名前端开发者，无论是做天选打工人还是精益创业者，花些时间去学习一些设计方面的知识，能够跨专业沟通才是你主导某项业务的开端。

也许你已经从事前端开发多年，甚至你已经是高级前端了，你正在主导一个内部项目。遗憾的是，该项目在资源优先级方面远没有那些ToC的项目高，所以你主导的这个项目缺少设计资源。聪明的你，在技术选型方面考虑到了成熟开源的UI框架，你只需要根据框架的官方文档调用各种组件熟练开发完成。这对你都不是问题。然而，当你把demo 发给项目 相关方看时，他们却要求能不能给加个换皮肤或主题的功能。

这时候或许一万只羊驼在你心里奔腾，平静后你是做还是不做呢？

不甘的牛马考虑到排期进度选择了与项目相关方进行battle：“这个需求不在排期内，没有时间做”。

而作为技术驱动型的高级前端选择挑战自己，不是表明我可以随意被编排，而是我能解锁新技能，这可以作为本周团队技术分享的主题。

巧合的是，这个项目使用的UI框架集成了Tailwind CSS。

Tailwind CSS 是什么

Tailwind CSS 是一个以实用程序优先（utility-first）的 CSS 框架，用于快速构建现代化的、自定义设计的网站，而无需离开 HTML 代码。

简单来说，它提供了一大堆预先构建好的、单一用途的 CSS 类（称为“实用程序类”或“原子化类”），你可以像搭积木一样直接在 HTML 元素的 class 属性中组合这些类，从而实现你想要的样式。

直接上代码：

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
    <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
    <div>
        <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
        <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
    </div>
</div>

以上代码是普通的HTML代码，它的特别之处在于div、img等页面元素使用了Tailwind CSS 框架内置的CSS类名，通过直接组合使用这些预定义好的CSS类名，就可以实现你想要的样式。

归纳一下上述代码出现的CSS类，包括：

• display 和 padding 工具类（flex、shrink-0 和 p-6）用于控制整体布局。
• 最大宽度和外边距工具类（max-w-sm 和 mx-auto）用于限定卡片宽度并使其水平居中。
• 背景色、圆角和阴影工具类（bg-white、rounded-xl 和 shadow-lg）用于美化卡片外观。
• 宽度和高度工具类（size-12）用于设置 Logo 图片的宽高。
• 间距工具类（gap-x-4）用于处理 Logo 与文本之间的间距。
• 字体大小、颜色和字重工具类（text-xl、text-black、font-medium 等）用于美化卡片文本。

以上，我们对tailwind 框架有了初步地认识。下面正式进入我们今天的主题。

Tailwind CSS 4.0 内置的颜色变量

Tailwind CSS 4.0 中定义了两种关于颜色的CSS变量，一种是基础颜色，另一种是调色板颜色。

基础颜色

基础颜色是最基本的黑白两色，它们在任何设计中都扮演着重要角色：

• 黑色 (black)
• 白色 (white)
• 透明（transparent）

调色板颜色

调色板使用了更加鲜艳的P3色域，包含了一套精心设计的、丰富的内置颜色系列。

简单来说，P3 色域是一种色彩空间（Color Space），它能够显示的颜色范围比我们过去长期使用的sRGB(标准RGB)色域要广泛得多，它能带来更丰富、更接近真实的颜色。

这些颜色系列包括:

• 中性色 (Neutrals): slate (石板灰), gray (灰), zinc (锌灰), neutral (中性灰), stone (石头灰)

• 彩色 (Colors): red (红), orange (橙), amber (琥珀), yellow (黄), lime (酸橙), green (绿), emerald (祖母绿), teal (青), cyan (青蓝), sky (天蓝), blue (蓝), indigo (靛蓝), violet (紫罗兰), purple (紫), fuchsia (紫红), pink (粉), rose (玫瑰)

每个颜色系列代表着一种色相（Hue），而每个系列通常包含从 50 (最浅) 到 950 (最深) 的 11 个色阶，其中500 通常是该颜色的“基础”或“中间”色调

色阶亦称色彩权重（Color Weight）, 可以通过改变色彩的饱和度或明亮度来实现不同的色彩权重。

在Tailwind 4.0中，通过 oklch 定义不同的颜色(色相与色阶)。

oklch 是什么？

oklch 是现代CSS中一个颜色函数，它允许你以一种更符合人类视觉感知的方式来定义颜色。它基于 OKLab 色彩空间，并使用 LCH（亮度、彩度、色相）模型来表示颜色。

函数解析：

• OK: 指的是其基于的 OKLab 色彩空间。OKLab 是一个较新的色彩空间，其设计目标是提供更好的感知均匀性，意味着当你在该空间中改变颜色的数值时，视觉上的变化也应该是均匀和可预测的。
• L: 代表 Lightness (亮度) ，表示颜色的感知亮度。通常接受一个百分比 (0% - 100%) 或者一个小数 (0 - 1) 。
  • 0% 或 0 代表完全黑色。
  • 100% 或 1 代表完全白色 (或在该色相和彩度下能达到的最亮色)。
• C: 代表 Chroma (彩度) ，表示颜色的“鲜艳程度”或“色彩的强度”，类似于饱和度，但彩度更侧重于颜色与同样亮度灰色的差异程度。它是一个非负数，通常从 0 开始。0 表示完全没有色彩（即灰色）
• H: 代表 Hue (色相) ，- 表示颜色在色轮上的角度，决定了它是什么颜色（如红、黄、绿、蓝等）。它是一个角度值，单位可以是：
  • deg (度): 0deg 到 360deg (例如, 0deg 或 360deg 通常是红色，120deg 是绿色，240deg 是蓝色)。
  • rad (弧度)
  • grad (百分度)
  • turn (圈)
  • 如果省略单位，则默认为度 (deg)。

来看下源码对颜色变量的定义：

/* oklch函数接受3个参数:
   * 1. 亮度 (0-100%)
   * 2. 色度 (饱和度)
   * 3. 色相 (0-360度) 
   */
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);

  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
  ......

可以看出，Tailwind 实现颜色变量的核心是通过其预定义的、数字化的颜色命名系统。

颜色变量的数值代表着该颜色不同的色阶（权重）：数值越低，表示颜色越浅（更接近白色，即增加了明色调/Tint）；数值越高，则表示颜色越深（更接近黑色，即增加了暗色调/Shade）

tailwind 4.0 色彩选择与应用

上面我们介绍了tailwind 4.0 色彩相关的变量。

面对如此多的颜色变量，作为前端开发者，我们该如何选择使用呢？

当然，目前互联网公司都有自己的VI系统，我们可以借鉴或直接拿过来用。

如果你的项目没有视觉规范参考的话，作为没有设计资源的你只能靠自己搞定了。

选择主色

首先，我们应该根据企业性质或者业务场景来确定网站的主色（primary color）。这就涉及到前面讲到的色彩所代表的心理学意义了。

针对tailwind 调色板颜色，我把每种颜色所代表的意义与适用行业整理成了表格，可以作为参考

确定整体配色方案

确定主色之后，可以根据之前介绍的单色组合、互补色组合、邻近色组合或三色组合原则来选择其他辅助色。

如果你不想在这方面花精力，或者有着选择困难症。那可以使用一些配色APP 来帮你生成色彩方案。这里推荐几个在线应用：

• Eva Design System: Deep learning color generator

• 专门为Tailwind设计

• coolors.co/

• www.bairesdev.com/

把自定义配色方案配置到tailwind.config中

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9', // 你的品牌主色
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49', // 你甚至可以添加更多的色阶，如 950
        },
        'custom-gray': { // 另一个自定义色阶示例
          light: '#f7fafc',
          DEFAULT: '#edf2f7', // DEFAULT 关键字代表基础色，例如 text-custom-gray
          medium: '#e2e8f0',
          dark: '#a0aec0',
        }
      },
    },
  },
  plugins: [],
}

定义好后，你就可以像使用 Tailwind 内置颜色一样使用你的自定义色阶了：

<div class="bg-brand-500 text-white p-4">
  This uses our main brand color.
</div>

<p class="text-brand-700 hover:text-brand-900">
  Link using a darker shade of our brand color.
</p>

<div class="bg-custom-gray-light border border-custom-gray-medium p-3">
  A light gray box.
</div>

色阶应用的设计原则

为了在实际项目中有效应用 Tailwind CSS 的色阶，需要遵循以下设计原则：

视觉层次感

• 使用不同色阶区分主要、次要和辅助元素。例如：

  • 主要按钮：bg-blue-500
  • 次要按钮：bg-blue-300
  • 禁用状态：bg-gray-200

• 确保文本与背景的对比度符合无障碍标准（WCAG），例如深色文本（如 text-gray-900）搭配浅色背景（如 bg-gray-100）。

品牌一致性

• 选择 2-3 个主要颜色系列（如 blue 和 gray），并在项目中限制色阶范围（如仅使用 100、300、500、700），以保持一致性。
• 如果品牌色不在默认调色板中，可以通过 Tailwind 配置文件（tailwind.config.js，方法见上面）自定义颜色，确保色阶与默认系统类似。

情感引导

• 根据色阶的情感影响选择合适的颜色：

  • 浅色阶（如 bg-green-100）传递轻松、友好的感觉，适合成功提示。
  • 深色阶（如 bg-red-800）传递强烈、紧急的感觉，适合错误警告。

• 参考之前提到的颜色心理学，选择适合业务场景的色阶。

主题切换 (Light/Dark Mode)

• Tailwind 支持暗色模式前缀 dark:，可以为同一元素设置不同色阶。

• 例如，浅色模式下背景为 bg-gray-100，暗色模式下为 dark:bg-gray-800。

• 示例：

  <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4">支持暗色模式</div>
  

色阶（色彩权重）的应用

Tailwind CSS 的默认颜色调色板每种颜色有 11 个色阶，从最浅到最深：

• 50：最浅，几乎接近白色，常用于背景或微妙的高光。
• 100-400：浅到中等色调，适合背景、边框或次要元素。
• 500：标准色调，通常是颜色的“典型”代表色，常用于主要元素。
• 600-950：中等到深色调，适合强调、文本或前景元素。

例如，bg-blue-500 是标准蓝色，而 bg-blue-100 是非常浅的蓝色，bg-blue-900 是深蓝色。这些色阶是基于视觉感知调整的，确保在不同色阶间有足够的对比度，同时保持和谐。

色阶可以通过类名直接应用到 HTML 元素上，适用于背景色、前景色、边框色、文本色等。以下是具体应用场景和方法：

背景色 (Background Color)

• 用法：使用 bg-[color]-[shade] 类，如 bg-gray-100 或 bg-blue-500。

• 场景：

  • 浅色阶（如 bg-gray-100）适合页面背景或卡片背景，营造轻盈感。
  • 中等色阶（如 bg-blue-500）适合按钮、导航栏等主要元素，吸引注意力。
  • 深色阶（如 bg-gray-800）适合暗色主题背景或强调区域。

• 示例：

  <div class="bg-blue-100 p-4">浅蓝色背景</div>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">标准蓝色按钮</button>
  <footer class="bg-gray-800 text-gray-200 p-4">深灰色页脚</footer>
  

文本色 (Text Color)

• 用法：使用 text-[color]-[shade] 类，如 text-red-600。

• 场景：

  • 深色阶（如 text-gray-900）适合正文，确保可读性。
  • 中等色阶（如 text-blue-600）适合链接或强调文本。
  • 浅色阶（如 text-gray-400）适合次要文本或占位符。

• 示例：

  <p class="text-gray-900">主要内容文本</p>
  <a href="#" class="text-blue-600 hover:text-blue-800">链接文本</a>
  <small class="text-gray-400">次要说明</small>
  

边框色 (Border Color)

• 用法：使用 border-[color]-[shade] 类，如 border-green-300。

• 场景：

  • 浅色阶（如 border-gray-200）适合分隔线或卡片边框，保持低调。
  • 中等色阶（如 border-red-500）适合错误提示框或警告边框。

• 示例：

  html
  <div class="border border-gray-200 p-4 rounded">卡片边框</div>
  <div class="border border-red-500 p-4 rounded">错误提示</div>
  

 交互状态 (Hover, Focus, Active)

• 用法：结合交互状态伪类，如 hover:bg-blue-600 或 focus:border-blue-400。

• 场景：

  • 使用比基础色阶稍深或稍浅的色阶来表示交互状态，增强反馈。
  • 例如，按钮默认 bg-blue-500，悬停时 hover:bg-blue-600，点击时 active:bg-blue-700。

• 示例：

  <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded transition">点击我</button>
  

渐变色 (Gradient)

• 用法：使用 from-[color]-[shade] 和 to-[color]-[shade] 类创建渐变背景。

• 场景：使用相邻色阶（如 from-blue-400 to-blue-600）创建平滑过渡效果，适合标题背景或装饰元素。

• 示例：

  <div class="bg-gradient-to-r from-blue-400 to-blue-600 text-white p-4">渐变背景</div>