调色板预设

Material/iOS/Tailwind/Antd 预设

422 次访问
DESIGN SYSTEM PALETTES

设计系统调色盘

Material Design / iOS / Tailwind CSS / Ant Design / Bootstrap 主流设计系统色板 · 一键复制

设计系统

Tailwind CSS
Material Design
Ant Design
iOS
Bootstrap

Tailwind CSS

使用提示

点击任意色块复制 HEX。所有色板都来自官方设计规范,与各 UI 库的 CSS 类一一对应。

用途:网页 / App 设计 / 设计稿色彩参考 / 团队共识对齐 / 代码主题色定义。

编号规则:50 (最浅) → 900/950 (最深),500 通常是主色调(强调色)。

关于本工具

了解工具定位 · 使用场景 · 对比优势

从 Material Design、iOS、Tailwind CSS 和 Ant Design 中直接复制色板预设,快速应用到设计稿里。UI 设计师、前端开发者在搭建新项目或调整主题时,无需手动提取颜色变量,一键复制即可使用。所有预设数据在浏览器本地加载,不产生网络请求。

使用场景

🎨

Material 主题迁移

设计师从 Sketch 的 Material 组件库切换到 Figma,需要将 200+ 页面的主色、辅助色、状态色统一为 Material Design 3 色板。手动拾色误差大且耗时。本工具直接输出 Material 预设色板(Primary/Secondary/Tertiary/Error 等),粘贴到 Figma 变量面板即可完成全局替换,避免逐层手动调色。

📱

iOS 深色模式适配

移动端开发者在给 App 增加深色模式时,需要将原本硬编码的浅色色值(如 #FFFFFF 背景)替换为 iOS 系统语义色(systemBackground / secondarySystemBackground)。本工具提供 iOS 预设的 Light/Dark 色板对照表,直接复制色值到 Assets 的 Color Set 中,无需反复对照 HIG 文档。

🌐

Tailwind 色板对齐

前端团队接手一个混合了 Tailwind v3 和手写 CSS 的项目,部分按钮用了 gray-400(#9CA3AF),另一部分用了自定义 #A0A0A0。本工具输出 Tailwind 全色阶(50–900)的十六进制值,团队统一用 gray-400 替换所有近似灰,保证按钮、边框、禁用态颜色一致,避免视觉碎片。

🏢

Ant Design 品牌色定制

中后台产品经理想将 Ant Design 默认蓝色主题改为公司品牌色(#E8453C 红色系),但 Ant Design 的色板生成规则(primary-1 到 primary-10)依赖算法。本工具输入品牌色后,自动输出 Ant Design 兼容的 10 级色阶,直接覆盖 less 变量或 ConfigProvider token,省去手动调整每个 hover/active/disabled 状态色的调试时间。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (Coolors)传统方法
数据隐私纯浏览器端处理,零上传上传到服务器生成调色板依赖设计师本地文件,无上传风险
处理速度即时(毫秒级)需加载页面和网络请求,1-3 秒手动选取和调整,5-30 分钟
调色板来源Material / iOS / Tailwind / Antd 等设计系统预设AI 生成或社区上传的随机调色板从品牌手册、竞品截图或色轮中手动提取
色彩一致性严格遵循设计系统色阶和比例AI 生成色彩可能偏离系统规范依赖个人经验,色值容易偏差
离线可用性完全离线可用需要网络连接需安装 Adobe 等专业软件
学习成本零学习成本,选择即用需理解生成参数(如饱和度、色相范围)需掌握色彩理论和软件操作
适用场景快速获取设计系统标准色板探索创意配色方案品牌定制或高精度色彩匹配

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在「预设」下拉菜单中,选择 Material、iOS、Tailwind 或 Antd 色板
  2. 点击色板中的任意色块,自动复制该颜色的 HEX 值到剪贴板
  3. 点击色块旁的「预览」按钮,在右侧面板查看该颜色在对应设计系统下的实际应用效果

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
#FF5733Material 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 格式输入,纯绿色在各框架中的命名差异
#000Material Design: #000000 (Black) iOS: #000000 (System Black) Tailwind: #000000 (black) Ant Design: #000000 (black)边界 case:3位缩写十六进制,自动补全为6位
#12345678Material Design: #123456 (Blue-Grey 900) iOS: #123456 (System Indigo) Tailwind: #123456 (slate-800) Ant Design: #123456 (geekblue-9)边界 case:8位带 Alpha 通道,工具自动忽略后两位
transparentMaterial Design: 不支持透明色 iOS: 不支持透明色 Tailwind: 不支持透明色 Ant Design: 不支持透明色易错 case:透明色在各框架预设中均无对应色值
invalidcolor输入格式错误:请提供有效的十六进制、RGB 或 HSL 颜色值易错 case:非颜色字符串输入,提示格式错误

常见错误对照6 个常踩的坑 · 错误 → 修复

1. 把预设名当 CSS 类名直接复制

错误
material-blue-500
修复
.bg-blue-500 { background-color: #2196F3; }

预设名是设计 token 的别名,不是 CSS 类名。Tailwind 类名是 .bg-blue-500,Material 色板名是 blue-500,两者语法不同,不能混用。

2. 从 iOS 预设里直接取 RGB 值给 Web 用

错误
UIColor(red: 0.0, green: 0.48, blue: 1.0, alpha: 1.0)
修复
rgba(0, 122, 255, 1) 或 #007AFF

iOS UIColor 用 0~1 浮点数,Web CSS 用 0~255 整数或十六进制。直接复制 UIColor 参数到 CSS 会得到极暗的颜色。

3. Antd 色板里取了 primary 色但没取对应的 hover/active

错误
--primary: #1890ff; /* 只取了一个 */
修复
--primary: #1890ff; --primary-hover: #40a9ff; --primary-active: #096dd9;

Antd 色板每个色阶(如 blue-6)对应一个状态。只取 primary 色会导致按钮 hover/active 无状态变化,视觉反馈缺失。

4. 把 Tailwind 色板里的 50/100/200 当独立色用,忽略色阶关系

错误
text-red-50 /* 在深色背景上 */
修复
text-red-500 /* 或根据背景调整色阶 */

Tailwind 色阶从 50(最浅)到 900(最深),red-50 在白色背景上几乎不可见。色阶值代表亮度层级,不是独立颜色。

5. Material Design 色板里取了 primary 和 secondary 但没取 surface/on-surface

错误
primary: #6200EE, secondary: #03DAC6
修复
primary: #6200EE, on-primary: #FFFFFF, surface: #FFFFFF, on-surface: #000000

Material Design 色板要求每个色都有一个对应的 on-* 文字色。只取主色不取 on-* 色会导致文字在有色背景上不可读。

6. 把 iOS 色板里的 systemBlue 直接当成 UIButton 背景色

错误
button.backgroundColor = UIColor.systemBlue
修复
button.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 标准。

原理图

选择预设Material / iOS / Tailwind / Antd浏览器内解析纯前端计算,无网络请求生成色板色值 / 色阶 / 色卡关键行为用户选择预设名称(如 Material 主色)浏览器根据预设规则生成完整色板(无后端)
用户输入 本地处理 输出结果

开发者集成

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'))  # green
package 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'));  // systemBlue

常见问题

9 个高频疑问

调色板预设怎么用?
在工具页面的输入区域,可以直接选择预设方案(Material、iOS、Tailwind、Antd),工具会自动生成对应的色板卡片。每个预设包含主色、辅色、背景色和文字色。点击色块可复制色值(支持 HEX、RGB、HSL 三种格式)。如果对某个颜色不满意,可以单独点选该色块,在弹出面板中手动微调。调整后的色板可以一键导出为 CSS 变量或 JSON 文件,方便直接粘贴到项目代码里。
Material 和 iOS 的调色板预设有什么区别?
Material 预设基于 Google Material Design 3 的配色系统,使用 HCT 色彩空间生成,强调层次感——主色、表面色、容器色之间有明确的明度阶梯,适合 Android 和 Web 端。iOS 预设则遵循 Apple HIG 规范,更多使用半透明毛玻璃效果和系统蓝/灰/红三色体系,色块饱和度偏低,更适合 SwiftUI 和 UIKit 项目。Tailwind 预设直接对应 Tailwind CSS 的 color palette(slate/gray/zinc 等),Antd 预设则匹配 Ant Design 的 less 变量命名。
预设里的颜色为什么和我项目里实际渲染的不一样?
可能有三个原因:一是浏览器色彩管理差异——Chrome 和 Safari 对广色域显示器的处理方式不同,导致色差。二是 CSS 变量覆盖——如果项目里已经定义了同名变量(如 --primary-color),预设生成的变量会被覆盖。三是透明度叠加——iOS 预设中的毛玻璃效果在纯色背景上看起来比实际更浅。建议在项目中使用前,先在浏览器 DevTools 的 Computed 面板里检查实际生效的颜色值,必要时用 rgb() 或 hsl() 代替十六进制值。
这个工具生成的色板能商用吗?
色板本身是颜色数值的组合,不涉及版权。但需要注意:Material Design、iOS、Tailwind、Antd 的配色方案虽然是公开的设计语言,但某些特定颜色组合(如 Google 的蓝、Apple 的系统蓝)可能受商标保护,不能直接作为品牌色使用。工具生成的色板适合作为项目开发的起点或参考,建议在正式商用前根据品牌规范做微调。另外,导出的 CSS 变量名(如 --md-sys-color-primary)属于框架命名,直接使用不会侵权。
为什么我选了 Tailwind 预设,生成的色板里没有 50/100/200 这些色阶?
Tailwind 预设默认只生成 5 个核心色阶(500、600、700、800、900)和对应的文字色,因为大多数场景只需要主色+深色变体。如果需要完整的 50-950 色阶,可以在页面右侧的「色阶数量」滑块中调整为 10 级,工具会自动插值生成全部色阶。注意:色阶越多,颜色之间的明度差异越小,50 和 100 在浅色背景上可能肉眼难辨。建议在深色模式下检查最浅色阶的对比度是否满足 WCAG AA 标准。
生成的色板能导出到 Sketch 或 Figma 吗?
可以。工具支持三种导出格式:CSS 变量(.css 文件)可直接粘贴到 Web 项目;JSON 格式(.json)可导入到 Figma 的 Local Styles 插件(如 Design Tokens 插件);SVG 色板(.svg)可拖入 Sketch 作为颜色参考。注意:Figma 和 Sketch 的颜色管理都使用 sRGB 色域,如果显示器是 P3 广色域,导出的颜色在 Figma 中看起来会偏暗一些。建议在 Figma 中导入后,用「Color Profile」选项统一为 sRGB。
这个工具需要联网才能用吗?
不需要。整个调色板生成逻辑(包括预设解析、色阶插值、格式转换)全部在浏览器中通过 JavaScript 完成,不依赖后端服务器。首次加载页面后,即使断网也能正常使用所有功能。可以打开浏览器 DevTools 的 Network 标签确认:操作过程中没有任何 HTTP 请求外发。如果担心隐私问题,可以完全离线使用——甚至可以把页面保存为 .html 文件,在本地打开后仍然能正常工作。
为什么我选了 Antd 预设,生成的色板里没有 warning/success/error 这些语义色?
Antd 预设默认只生成 primary、link、info 三个基础色,因为 warning/success/error 等语义色通常由项目中的 less 变量(如 @success-color)统一管理,不需要在调色板工具中单独定义。如果需要完整的语义色板,可以在页面右侧勾选「包含语义色」开关,工具会基于 Ant Design 5.0 的 token 系统自动生成 success(绿)、warning(橙)、error(红)、info(蓝紫)四个色块及其 hover/active 状态。注意:这些语义色的透明度版本(如 success-color-10%)需要手动在代码中通过 rgba() 实现。
预设里的颜色和设计稿上的颜色有偏差,怎么校准?
色差通常来自三个地方:显示器色域(sRGB vs P3)、浏览器色彩管理(Chrome 用 ICC v4、Safari 用 v2)、操作系统颜色配置文件。校准方法:1) 在工具页面右上角切换「色域模式」为 sRGB(默认是 Display P3),这会强制所有颜色在 sRGB 空间内计算,与大多数设计工具保持一致。2) 用取色器(如 macOS 自带的 Digital Color Meter)对比设计稿上的颜色值,确认 HEX 码一致。3) 如果仍然有偏差,可能是设计稿用了 CMYK 色域(印刷用),而本工具只支持 RGB 色域。
选择 打开 +新窗口 esc关闭