Colors

Skill OPN48/skills-apple-human-interface-guidelines/skills/apple-human-interface-guidelines/colors

skills-apple-human-interface-guidelines 用于所有UI界面遵守苹果人机交互手册，包含PC、andorid、iOS、小程序的UI治理。by the way 其他营销号都是炒作，根本不懂UI设计。

Install

npx -y skills add OPN48/skills-apple-human-interface-guidelines --skill colors

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

HIG 配色：Android 用 colors.xml hex；iOS 必须用 SwiftUI Color 系统 API，含主题色 Color.cyan/pink/blue。Invoke when user needs iOS-style colors for Android app OR iOS color governance.

SKILL.md

8.9 KB, as published. Nobody here has run it

iOS System Colors

平台分流

Android：下文 hex 表 → values/colors.xml / values-night/colors.xml

iOS：禁止在业务 UI 使用本表 hex；改用 SwiftUI Color（见 iOS SwiftUI 实施方案）

iOS SwiftUI 实施方案

iOS 全部界面语义色与主题色走 SwiftUI Color — context-dependent，渲染前由系统解析，自动适配浅色/深色/增对比度。

创建颜色的优先级

Color.primary / Color.secondary — 主/次级文字
Color.cyan / Color.pink / Color.blue / Color.red 等标准 palette
Color(uiColor: .systemBackground) 等 — 背景、分割、grouped 列表（SwiftUI 无对应静态成员时）
Color("Name") — 仅 VIP/品牌等无系统等价色

禁止（业务 UI）：Color(red:)、Color(hex:)、自定义 token 转发系统语义色、UIColor.systemCyan 作主题色。

主题色三档（App 设置）

设置项	SwiftUI	禁止
青柠青	`Color.cyan`	hex、`Color(red:)`、封装 enum 转发
莓果粉	`Color.pink`	同上
海盐蓝	`Color.blue`	同上

@EnvironmentObject private var appearance: ThemeStore

.tint(appearance.accentColor)
.background(appearance.accentColor)

// ThemeStore.AccentTheme
var accentColor: Color {
    switch self {
    case .cyan: Color.cyan
    case .pink: Color.pink
    case .blue: Color.blue
    }
}

业务 View 直接写 SwiftUI Color；主题色唯一来源是应用级 ThemeStore（或等价的 ObservableObject），不新增二次封装层。

语义色（View 内直接用）

用途	写法
主文字	`Color.primary`
次级文字	`Color.secondary`
页面背景	`Color(uiColor: .systemBackground)`
Tab/卡片背景	`Color(uiColor: .secondarySystemBackground)`
分割线	`Color(uiColor: .separator)`
错误/角标	`Color.red`
accent 按钮上图标	`Color.white`
图片叠层文字	`Color.white`（非 `primary`）

着色 API

用 .foregroundStyle(...)、.tint(...)，新代码不用 .foregroundColor
不缓存 color.resolve(in:) 的 RGB
避免 Theme.textPrimary 等语义色二次封装；优先在 View 内直接写 SwiftUI Color

白天模式 (Light Mode) — Android hex 参考

彩色系

颜色名称	Hex值
sys_red	#FF3B30
sys_orange	#FF9500
sys_yellow	#FFCC00
sys_green	#34C759
sys_mint	#00c7be
sys_teal	#30b0c7
sys_cyan	#32ade6
sys_blue	#007AFF
sys_indigo	#5856D6
sys_purple	#AF52DE
sys_pink	#FF2D55
sys_brown	#a2845e

VIP配色 (opn48 design)

颜色名称	Hex值
vip_golden	#6F2C02
vip_bg	#FFBE6B

灰色系

颜色名称	Hex值
sys_gray1	#8E8E93
sys_gray2	#AEAEB2
sys_gray3	#C7C7CC
sys_gray4	#D1D1D6
sys_gray5	#E5E5EA
sys_gray6	#F2F2F7

黑白系

颜色名称	Hex值
sys_black	#000000
sys_white	#FFFFFF

夜间模式 (Dark Mode)

彩色系

颜色名称	Hex值
sys_red	#FF453A
sys_orange	#FF9F0A
sys_yellow	#FFD60A
sys_green	#30D158
sys_mint	#66D4CF
sys_teal	#40C8E0
sys_cyan	#64D2FF
sys_blue	#0A84FF
sys_indigo	#5E5CE6
sys_purple	#BF5AF2
sys_pink	#FF375F
sys_brown	#AC8E68

VIP配色 (opn48 design)

颜色名称	Hex值
vip_golden	#FFBE6B
vip_bg	#6F2C02

灰色系

颜色名称	Hex值
sys_gray1	#8E8E93
sys_gray2	#636366
sys_gray3	#48484A
sys_gray4	#3A3A3C
sys_gray5	#2C2C2E
sys_gray6	#1C1C1E

黑白系 (反向)

颜色名称	Hex值
sys_black	#FFFFFF
sys_white	#000000

使用方式

iOS — SwiftUI Color

不要把下方 hex 写入 Swift。主题色与语义色直接在 View 里写 SwiftUI API：

.foregroundStyle(Color.primary)
.background(Color(uiColor: .systemBackground))
.tint(appearance.accentColor)   // Color.cyan / .pink / .blue

Android hex 表仅用于 Android 资源与跨端设计对照。

Android (values/colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 白天模式颜色 (默认) -->
    <color name="sys_red">#FF3B30</color>
    <color name="sys_blue">#007AFF</color>
    <!-- ... 其他颜色 -->
</resources>

Android 夜间模式 (values-night/colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 夜间模式颜色 -->
    <color name="sys_red">#FF453A</color>
    <color name="sys_blue">#0A84FF</color>
    <!-- ... 其他颜色 -->
</resources>

使用场景

UI组件着色: Button、Icon、Badge等使用sys_blue等品牌色
状态指示: 成功(green)、警告(yellow)、错误(red)
文字颜色: 标题(sys_black/white)、次要文字(sys_gray1/2)
背景色: 卡片(sys_gray6)、分割线(sys_gray5)
VIP特权: vip_golden用于VIP标识，vip_bg用于VIP专区背景

透明度颜色

基于已有配色，在16进制RGB前增加两位十六进制数表示透明度。

跨平台透明度格式差异

平台	格式	透明度位置	示例
Android (ColorInt)	ARGB	前两位	#AA007AFE
iOS (UIColor)	RGBA	后两位	#007AFEAA
CSS / Web	RGBA	后两位	#007AFEAA
Flutter	根据传入方式	-	Color(0xAA007AFE)

格式说明

透明度通用规则: 00 = 完全透明，FF = 完全不透明
Android (ARGB): 透明度在前，RGB在后
iOS / CSS / Web (RGBA): RGB在前，透明度在后

透明度对照表

透明度	十六进制值
0% (完全透明)	00
5%	0D
10%	1A
20%	33
30%	4D
40%	66
50%	80
60%	99
70%	B3
80%	CC
90%	E6
100% (完全不透明)	FF

跨平台转换示例

以 50% 透明度的 #007AFF (蓝色) 为例：

平台	格式	颜色值
Android (XML)	ARGB	#80007AFF
Android (Kotlin Color Int)	ARGB	0x80007AFF
iOS (Swift)	RGBA	Color(red: 0.0, green: 0.478, blue: 1.0, opacity: 0.5) 或 #007AFF80
CSS / Web	RGBA	rgba(0, 122, 255, 0.5) 或 #007AFF80
Flutter	根据使用	Color(0x80007AFF)

命名规则

格式: {原色名}_{透明度百分比}

例如: sys_red_20 表示20%透明度的sys_red

白天模式示例

颜色名称	Hex值	描述
sys_red_20	#33FF3B30	20%透明度红色
sys_red_50	#80FF3B30	50%透明度红色
sys_blue_20	#33007AFF	20%透明度蓝色
sys_gray3_30	#4DC7C7CC	30%透明度灰色

夜间模式示例

颜色名称	Hex值	描述
sys_red_20	#33FF453A	20%透明度红色
sys_red_50	#80FF453A	50%透明度红色
sys_blue_20	#330A84FF	20%透明度蓝色
sys_gray3_30	#4D48484A	30%透明度灰色

Android使用示例

<!-- values/colors.xml (白天) -->
<color name="sys_red_20">#33FF3B30</color>
<color name="sys_blue_50">#80007AFF</color>

<!-- values-night/colors.xml (夜晚) -->
<color name="sys_red_20">#33FF453A</color>
<color name="sys_blue_50">#800A84FF</color>

CSS / Web 使用示例

/* CSS 变量方式 (推荐) */
:root {
    --sys-red: #FF3B30;
    --sys-red-50: rgba(255, 59, 48, 0.5);
    --sys-blue: #007AFF;
    --sys-blue-50: rgba(0, 122, 255, 0.5);
}

/* 直接使用 */
.button-overlay {
    background-color: rgba(255, 59, 48, 0.2);
}

/* 使用8位十六进制 (iOS/CSS兼容) */
.card-overlay {
    background-color: #FF3B3033; /* 20% 透明度 */
}

Flutter 使用示例

// 使用ARGB格式 (与Android一致)
Color sysRed20 = Color(0x33FF3B30);
Color sysBlue50 = Color(0x80007AFF);

// 使用RGBA参数
Color sysBlue50Alt = Color.fromARGB(128, 0, 122, 255);

使用场景

遮罩层: 半透明黑色/白色覆盖层
图标填充: 图标使用半透明颜色作为填充
背景装饰: 卡片弱化背景色
边框/分割线: 使用低透明度颜色作为细微分割

注意事项

Android XML: 透明度放在RGB前面 (ARGB)
iOS / CSS: 透明度放在RGB后面 (RGBA)
Flutter: Color() 构造函数使用 ARGB 格式 (0xAARRGGBB)
Web 开发: 推荐使用 rgba() 或 hsla() 函数，兼容性好
设计工具: Sketch/Figma 导出通常是 RGBA 格式，Android 使用需转换

2 things to look at

What its author says it does

SKILL.md

iOS System Colors

iOS SwiftUI 实施方案

创建颜色的优先级

主题色三档（App 设置）

语义色（View 内直接用）

着色 API

白天模式 (Light Mode) — Android hex 参考

彩色系

VIP配色 (opn48 design)

灰色系

黑白系

夜间模式 (Dark Mode)

彩色系

VIP配色 (opn48 design)

灰色系

黑白系 (反向)

使用方式

iOS — SwiftUI Color

Android (values/colors.xml)

Android 夜间模式 (values-night/colors.xml)

使用场景

透明度颜色

跨平台透明度格式差异

格式说明

透明度对照表

跨平台转换示例

命名规则

白天模式示例

夜间模式示例

Android使用示例

CSS / Web 使用示例

Flutter 使用示例

使用场景

注意事项

Keep looking