Tints and Shades Generator 工具指南

什么是 Tints and Shades Generator？

Tints and Shades Generator 是一个可以从单一基础颜色生成“看起来非常自然、符合人眼感受”的颜色变体的网页工具。

Tints（浅色调） 是将基础颜色与白色混合得到的更浅颜色，Shades（深色调） 是将基础颜色与黑色混合得到的更深颜色。

但这个工具并不是简单地混合颜色。它采用了最新的 oklch 色彩空间 技术，让颜色变化更贴近人的感官，过渡更自然。

oklch 可以根据“亮度”“色相”“饱和度”来调整颜色，更符合人类的视觉感知。所以无论你选择什么颜色，生成的渐变都很自然、舒服。

比如，把蓝色变浅时，不会变成灰蒙蒙的水蓝，而是依然保持清澈的蓝色感；变深时也不会变成脏灰色，而是有深度的蓝色。

正因如此，设计师和开发者无需手动逐个调整颜色，就能瞬间获得统一且美丽的调色板。无论是网页设计、UI还是品牌色彩，这个工具都非常实用。

为什么创建这个工具？

你是否曾经想过：“这个颜色很棒，但我想要更浅的版本”或“我想要更深、更有层次的色调”？

但手动调整颜色时，往往会变得暗淡或不太理想。

Tints and Shades Generator 就是为了解决这些颜色烦恼而诞生的。只需一个颜色，就能获得完整、自然的渐变——再也不会出现奇怪或暗淡的过渡。每个颜色都能保持自己的特色，亮度和饱和度的平衡也始终很棒。

技术细节与优势

本工具所有颜色混合和渐变都采用 oklch 色彩空间。 oklch 专为匹配人类视觉感知而设计，所以生成的渐变比传统的 RGB 或 Lab 混合自然得多。

• 与白色（#fff）和黑色（#000）的混合都在 oklch 中完成
• TailwindCSS 的色彩比例也是用 oklch 生成
• 无论你选什么颜色，都能得到平滑、符合感官的渐变

这意味着颜色几乎不会失真，亮度和饱和度的平衡也总是很理想。

什么时候使用？

创建网站或应用时

"我已经决定了主色调，但考虑按钮悬停颜色、背景颜色、文字颜色...太overwhelming了" → 从一个颜色获得完整的统一颜色集合

使用TailwindCSS时

"我想定义自定义颜色，但要考虑从50到950的所有比例？" → "✨Tailwind"标签页立即创建可直接使用的颜色比例

决定品牌颜色时

"我已经决定了标志颜色，但需要整个网站的颜色变体" → 在保持品牌颜色一致性的同时获得丰富的颜色选择

如何使用（让我们试试看）

步骤1：选择颜色

• 在左上角的颜色输入字段中输入 #3b82f6（这是蓝色）
• 或点击旁边的颜色选择器（小方形按钮）选择您喜欢的任何颜色
• ※目前仅支持HEX格式（以#开头的6位颜色代码）

步骤2：调整强度

• 移动右侧的"Weight"滑块
• 较小的数字创建渐进变化，较大的数字创建大胆变化
• 默认设置"5"效果很好，但可根据您的偏好调整

步骤3：查看和复制结果

屏幕中央将显示调色板：

• 浅色（Tints）：像将白色与原始颜色混合
• 原始颜色（Base）：您输入的确切颜色（带警告图标）
• 深色（Shades）：像将黑色与原始颜色混合

点击您喜欢的任何颜色来复制其代码。您应该看到右上角出现"Copied!"。

步骤4：调整显示（可选）

在右侧设置中，您可以：

• 主题切换：在暗色模式下也检查颜色
• 显示选项：添加边框或隐藏代码
• 步长大小：精细调整到0.1%增量

使用不同标签页

• All：查看所有颜色（这是默认设置）
• Tints：当您只想看浅色时
• Shades：当您只想看深色时
• ✨Tailwind：TailwindCSS颜色比例格式（50-950）

实用技巧

对颜色选择不确定时：点击左上角的🔄按钮获取随机颜色。您可能会发现意想不到的东西。

进行精细调整时：将Weight设置下的"步长大小"设为0.1，可实现极其精确的控制。

提高工作流程效率：为经常使用的颜色的URL添加书签。颜色通过?color=参数保存。

这个工具是本着"缩短颜色决策时间，让您可以将更多时间用于创作"的想法而创建的。希望它能帮助您创造出精彩的作品。