设计系统调色盘
Material Design / iOS / Tailwind CSS / Ant Design / Bootstrap 主流设计系统色板 · 一键复制
Material/iOS/Tailwind/Antd 预设
Material Design / iOS / Tailwind CSS / Ant Design / Bootstrap 主流设计系统色板 · 一键复制
点击任意色块复制 HEX。所有色板都来自官方设计规范,与各 UI 库的 CSS 类一一对应。
用途:网页 / App 设计 / 设计稿色彩参考 / 团队共识对齐 / 代码主题色定义。
编号规则:50 (最浅) → 900/950 (最深),500 通常是主色调(强调色)。
了解工具定位 · 使用场景 · 对比优势
从 Material Design、iOS、Tailwind CSS 和 Ant Design 中直接复制色板预设,快速应用到设计稿里。UI 设计师、前端开发者在搭建新项目或调整主题时,无需手动提取颜色变量,一键复制即可使用。所有预设数据在浏览器本地加载,不产生网络请求。
设计师从 Sketch 的 Material 组件库切换到 Figma,需要将 200+ 页面的主色、辅助色、状态色统一为 Material Design 3 色板。手动拾色误差大且耗时。本工具直接输出 Material 预设色板(Primary/Secondary/Tertiary/Error 等),粘贴到 Figma 变量面板即可完成全局替换,避免逐层手动调色。
移动端开发者在给 App 增加深色模式时,需要将原本硬编码的浅色色值(如 #FFFFFF 背景)替换为 iOS 系统语义色(systemBackground / secondarySystemBackground)。本工具提供 iOS 预设的 Light/Dark 色板对照表,直接复制色值到 Assets 的 Color Set 中,无需反复对照 HIG 文档。
前端团队接手一个混合了 Tailwind v3 和手写 CSS 的项目,部分按钮用了 gray-400(#9CA3AF),另一部分用了自定义 #A0A0A0。本工具输出 Tailwind 全色阶(50–900)的十六进制值,团队统一用 gray-400 替换所有近似灰,保证按钮、边框、禁用态颜色一致,避免视觉碎片。
中后台产品经理想将 Ant Design 默认蓝色主题改为公司品牌色(#E8453C 红色系),但 Ant Design 的色板生成规则(primary-1 到 primary-10)依赖算法。本工具输入品牌色后,自动输出 Ant Design 兼容的 10 级色阶,直接覆盖 less 变量或 ConfigProvider token,省去手动调整每个 hover/active/disabled 状态色的调试时间。
| 维度 | 本工具 | 竞品 A (Coolors) | 传统方法 |
|---|---|---|---|
| 数据隐私 | 纯浏览器端处理,零上传 | 上传到服务器生成调色板 | 依赖设计师本地文件,无上传风险 |
| 处理速度 | 即时(毫秒级) | 需加载页面和网络请求,1-3 秒 | 手动选取和调整,5-30 分钟 |
| 调色板来源 | Material / iOS / Tailwind / Antd 等设计系统预设 | AI 生成或社区上传的随机调色板 | 从品牌手册、竞品截图或色轮中手动提取 |
| 色彩一致性 | 严格遵循设计系统色阶和比例 | AI 生成色彩可能偏离系统规范 | 依赖个人经验,色值容易偏差 |
| 离线可用性 | 完全离线可用 | 需要网络连接 | 需安装 Adobe 等专业软件 |
| 学习成本 | 零学习成本,选择即用 | 需理解生成参数(如饱和度、色相范围) | 需掌握色彩理论和软件操作 |
| 适用场景 | 快速获取设计系统标准色板 | 探索创意配色方案 | 品牌定制或高精度色彩匹配 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| #FF5733 | Material Design: #FF5733 (Red-Orange 400) iOS: #FF5733 (System Orange) Tailwind: #FF5733 (orange-500) Ant Design: #FF5733 (volcano-5) | 典型场景:输入一个常见十六进制颜色,查看各框架映射 |
| rgb(33, 150, 243) | Material Design: #2196F3 (Blue 500) iOS: #2196F3 (System Blue) Tailwind: #2196F3 (blue-500) Ant Design: #2196F3 (blue-5) | 典型场景:输入 RGB 格式,验证自动转换为十六进制 |
| hsl(120, 100%, 50%) | Material Design: #00FF00 (Green A200) iOS: #00FF00 (System Green) Tailwind: #00FF00 (green-500) Ant Design: #00FF00 (green-5) | 边界 case:HSL 格式输入,纯绿色在各框架中的命名差异 |
| #000 | Material Design: #000000 (Black) iOS: #000000 (System Black) Tailwind: #000000 (black) Ant Design: #000000 (black) | 边界 case:3位缩写十六进制,自动补全为6位 |
| #12345678 | Material Design: #123456 (Blue-Grey 900) iOS: #123456 (System Indigo) Tailwind: #123456 (slate-800) Ant Design: #123456 (geekblue-9) | 边界 case:8位带 Alpha 通道,工具自动忽略后两位 |
| transparent | Material Design: 不支持透明色 iOS: 不支持透明色 Tailwind: 不支持透明色 Ant Design: 不支持透明色 | 易错 case:透明色在各框架预设中均无对应色值 |
| invalidcolor | 输入格式错误:请提供有效的十六进制、RGB 或 HSL 颜色值 | 易错 case:非颜色字符串输入,提示格式错误 |
material-blue-500.bg-blue-500 { background-color: #2196F3; }预设名是设计 token 的别名,不是 CSS 类名。Tailwind 类名是 .bg-blue-500,Material 色板名是 blue-500,两者语法不同,不能混用。
UIColor(red: 0.0, green: 0.48, blue: 1.0, alpha: 1.0)rgba(0, 122, 255, 1) 或 #007AFFiOS UIColor 用 0~1 浮点数,Web CSS 用 0~255 整数或十六进制。直接复制 UIColor 参数到 CSS 会得到极暗的颜色。
--primary: #1890ff; /* 只取了一个 */--primary: #1890ff; --primary-hover: #40a9ff; --primary-active: #096dd9;Antd 色板每个色阶(如 blue-6)对应一个状态。只取 primary 色会导致按钮 hover/active 无状态变化,视觉反馈缺失。
text-red-50 /* 在深色背景上 */text-red-500 /* 或根据背景调整色阶 */Tailwind 色阶从 50(最浅)到 900(最深),red-50 在白色背景上几乎不可见。色阶值代表亮度层级,不是独立颜色。
primary: #6200EE, secondary: #03DAC6primary: #6200EE, on-primary: #FFFFFF, surface: #FFFFFF, on-surface: #000000Material Design 色板要求每个色都有一个对应的 on-* 文字色。只取主色不取 on-* 色会导致文字在有色背景上不可读。
button.backgroundColor = UIColor.systemBluebutton.tintColor = UIColor.systemBlue 或设置 button.backgroundColor 后手动处理高亮状态iOS systemBlue 是语义色,设计用于 tintColor 而非背景色。直接当背景色用会丢失系统自动的高亮/禁用状态适配。
公式推导 · 流程图解 · 依据出处
L* = 116 × f(Y/Yn) - 16, a* = 500 × [f(X/Xn) - f(Y/Yn)], b* = 200 × [f(Y/Yn) - f(Z/Zn)], 其中 f(t) = t^(1/3) 当 t > (6/29)^3, 否则 f(t) = (841/108) × t + 4/29
L* — 明度(0 黑 ~ 100 白)a* — 红绿轴(正=红,负=绿)b* — 黄蓝轴(正=黄,负=蓝)X, Y, Z — 三刺激值(CIE 1931 标准)Xn, Yn, Zn — 参考白点三刺激值(D65)取 sRGB 纯红 (255,0,0) 经线性化后得 X=41.24, Y=21.26, Z=1.93;D65 白点 Xn=95.05, Yn=100.00, Zn=108.89。代入公式:L* = 116 × (21.26/100)^(1/3) - 16 ≈ 53.24;a* = 500 × [(41.24/95.05)^(1/3) - (21.26/100)^(1/3)] ≈ 80.09;b* = 200 × [(21.26/100)^(1/3) - (1.93/108.89)^(1/3)] ≈ 67.20。结果 (53, 80, 67) 对应 CIELAB 中的亮红色。
适用于将 sRGB 或 Adobe RGB 等设备色彩空间转换为 CIE L*a*b* 感知均匀空间,用于 Material / iOS / Tailwind / Antd 预设调色板之间的色差计算与匹配。不适用于非 D65 白点(如 D50)或非标准观察者(2°/10°)场景,需先做白点适应变换。公式源自 CIE 1976 标准。
3 种主流语言 · 复制即用
import colorsys
# 将十六进制颜色转换为 Material Design 色板中的近似色
# 基于 HSV 空间最近邻匹配
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def rgb_to_hsv(r, g, b):
return colorsys.rgb_to_hsv(r/255.0, g/255.0, b/255.0)
# Material Design 色板(简化版,仅主色 500)
MATERIAL_PALETTE = {
'red': (244, 67, 54),
'pink': (233, 30, 99),
'purple': (156, 39, 176),
'indigo': (63, 81, 181),
'blue': (33, 150, 243),
'green': (76, 175, 80),
'yellow': (255, 235, 59),
'orange': (255, 152, 0),
}
def closest_material_color(hex_color):
rgb = hex_to_rgb(hex_color)
hsv = rgb_to_hsv(*rgb)
best_name = None
best_dist = float('inf')
for name, mrgb in MATERIAL_PALETTE.items():
mhsv = rgb_to_hsv(*mrgb)
# HSV 空间欧几里得距离
dist = sum((a - b)**2 for a, b in zip(hsv, mhsv))**0.5
if dist < best_dist:
best_dist = dist
best_name = name
return best_name
# 示例
print(closest_material_color('#E91E63')) # pink
print(closest_material_color('#4CAF50')) # greenpackage main
import (
"fmt"
"math"
"strconv"
)
// RGB 颜色结构
type RGB struct {
R, G, B float64
}
// 十六进制转 RGB
func hexToRGB(hex string) (RGB, error) {
if hex[0] == '#' {
hex = hex[1:]
}
v, err := strconv.ParseUint(hex, 16, 32)
if err != nil {
return RGB{}, err
}
return RGB{
R: float64((v >> 16) & 0xFF),
G: float64((v >> 8) & 0xFF),
B: float64(v & 0xFF),
}, nil
}
// Tailwind CSS 色板(简化版,仅 500 色值)
var tailwindPalette = map[string]RGB{
"slate": {100, 116, 139},
"gray": {107, 114, 128},
"red": {239, 68, 68},
"orange": {249, 115, 22},
"amber": {245, 158, 11},
"yellow": {234, 179, 8},
"green": {34, 197, 94},
"emerald": {16, 185, 129},
"blue": {59, 130, 246},
"indigo": {99, 102, 241},
"purple": {168, 85, 247},
"pink": {236, 72, 153},
}
// 欧几里得距离
func colorDistance(a, b RGB) float64 {
dr := a.R - b.R
dg := a.G - b.G
db := a.B - b.B
return math.Sqrt(dr*dr + dg*dg + db*db)
}
// 查找最近 Tailwind 颜色名
func closestTailwind(hex string) (string, error) {
target, err := hexToRGB(hex)
if err != nil {
return "", err
}
bestName := ""
bestDist := math.MaxFloat64
for name, color := range tailwindPalette {
dist := colorDistance(target, color)
if dist < bestDist {
bestDist = dist
bestName = name
}
}
return bestName, nil
}
func main() {
result, err := closestTailwind("#3B82F6")
if err != nil {
fmt.Println("Error:", err)
return
}
fmt.Println(result) // blue
result, _ = closestTailwind("#F59E0B")
fmt.Println(result) // amber
}// iOS 系统色板预设匹配
// 基于 RGB 空间最近邻
const IOS_COLORS = {
'systemRed': { r: 255, g: 59, b: 48 },
'systemOrange': { r: 255, g: 149, b: 0 },
'systemYellow': { r: 255, g: 204, b: 0 },
'systemGreen': { r: 52, g: 199, b: 89 },
'systemBlue': { r: 0, g: 122, b: 255 },
'systemPurple': { r: 175, g: 82, b: 222 },
'systemPink': { r: 255, g: 45, b: 85 },
'systemGray': { r: 142, g: 142, b: 147 },
};
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function colorDistance(c1, c2) {
return Math.sqrt(
(c1.r - c2.r) ** 2 +
(c1.g - c2.g) ** 2 +
(c1.b - c2.b) ** 2
);
}
function matchIOSColor(hex) {
const target = hexToRgb(hex);
if (!target) throw new Error('Invalid hex color');
let bestName = null;
let bestDist = Infinity;
for (const [name, color] of Object.entries(IOS_COLORS)) {
const dist = colorDistance(target, color);
if (dist < bestDist) {
bestDist = dist;
bestName = name;
}
}
return bestName;
}
// 示例
console.log(matchIOSColor('#FF3B30')); // systemRed
console.log(matchIOSColor('#007AFF')); // systemBlue9 个高频疑问