跳到正文

← 全部工具

给 iOS 和 Mac 开发者的免费工具

Xcode 颜色集生成器

Xcode 里的命名颜色是一个 <名称>.colorset 文件夹，里面的 Contents.json 为每种外观列一项：任意、深色，以及可选的高对比度版本。在下面用十六进制、rgb() 或 hsl() 输入颜色，加上需要的版本，就能下载现成的 Assets.xcassets 文件夹，同时得到使用每个颜色的 Swift 代码，以及你标出的配色的对比度检查。

1. 你的颜色

可输入十六进制、rgb()、hsl() 或任意 CSS 颜色，也可以用取色器。加上 Alpha 值可得到半透明颜色。

  • 代码里使用的资源名，例如 BrandBlue 或 Card Background。

  • 代码里使用的资源名，例如 BrandBlue 或 Card Background。

2. 色彩空间和格式

色彩空间

你输入的数值按 sRGB 理解。选 Display P3 时会换算成看起来相同的 P3 数值，换算结果显示在下方。

分量格式

和 Xcode 的 Input Method 菜单一样。三种 Xcode 都能读，浮点数保留三位小数。

3. 下载和代码

压缩包里是一个 Assets.xcassets 文件夹，每个颜色一个 .colorset。把 .colorset 文件夹拖进 Xcode 导航栏里你自己的资源目录，或者把整个文件夹加到 target。

  • Assets.xcassets/BrandBlue.colorset

    Swift · 按名称

    // SwiftUI
Color("BrandBlue")
// UIKit
UIColor(named: "BrandBlue")
// AppKit
NSColor(named: "BrandBlue")

    生成的符号（Xcode 15 及以后，iOS 17、macOS 14）

    // SwiftUI
Color(.brandBlue)
// UIKit
UIColor(resource: .brandBlue)
    Contents.json
    {
  "colors" : [
    {
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "1.000",
          "green" : "0.424",
          "red" : "0.039"
        }
      },
      "idiom" : "universal"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "1.000",
          "green" : "0.608",
          "red" : "0.298"
        }
      },
      "idiom" : "universal"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

  • Assets.xcassets/CardBackground.colorset

    Swift · 按名称

    // SwiftUI
Color("CardBackground")
// UIKit
UIColor(named: "CardBackground")
// AppKit
NSColor(named: "CardBackground")

    生成的符号（Xcode 15 及以后，iOS 17、macOS 14）

    // SwiftUI
Color(.cardBackground)
// UIKit
UIColor(resource: .cardBackground)
    Contents.json
    {
  "colors" : [
    {
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "1.000",
          "green" : "1.000",
          "red" : "1.000"
        }
      },
      "idiom" : "universal"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "0.118",
          "green" : "0.110",
          "red" : "0.110"
        }
      },
      "idiom" : "universal"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

Xcode 会把资源名转成 Swift 名称：去掉结尾的 "Color"，把单词连成小驼峰。target 的 Generate Asset Symbols 构建设置（ASSETCATALOG_COMPILER_GENERATE_ASSET_SYMBOLS）打开时这些写法可用。

4. 对比度检查

标出你一起使用的文字颜色和背景颜色。每一对都按 WCAG 2.x 公式检查浅色和深色；其中任一颜色有高对比度版本时，也检查高对比度。某个颜色没有对应外观的版本时，系统会用它的普通版本，这里的检查也一样。

  • 对比度AA 正文AA 大字AA 界面AAA 正文AAA 大字
    浅色4.56:1通过通过通过未通过通过
    深色6.03:1通过通过通过未通过通过

半透明背景在浅色外观里按叠在白色上计算，在深色外观里按叠在黑色上计算；实际背景可能不同。

Xcode 读取的内容

已于 2026-10-30 与 Xcode 27.1 和苹果文档核对。

  • • 每个颜色是一个名为 <名称>.colorset 的文件夹，里面有 Contents.json。资源目录文件夹本身也有一个只含 info 的 Contents.json。
  • • 每个版本是 "colors" 里的一项，idiom 为 universal。深色加上 luminosity = dark 外观；高对比度加上 contrast = high；高对比度深色两者都有。
  • • "color-space" 为 srgb 或 display-p3。红、绿、蓝都是字符串："0.231"、"59" 或 "0x3B"。Alpha 始终写成 "1.000" 这样的形式。
  • • Xcode 按字母顺序排列键名，冒号前有一个空格，这里生成的文件也一样。

使用方法

  • •你添加的每个颜色生成一个 .colorset 文件夹。Contents.json 里有一项任意外观；打开深色、高对比度时，再按 Xcode 的顺序加上深色、高对比度和高对比度深色各一项。
  • •JSON 格式与 Xcode 写出的文件逐字节一致：键名按字母排序，冒号前有空格，分量写成字符串，Alpha 保留三位小数。
  • •选择 Display P3 时，你的 sRGB 数值经过 CIE XYZ 换算，颜色看起来不变，P3 数值显示在 sRGB 数值旁边。
  • •Swift 名称按 Xcode 生成资源符号的同一套规则得出，并与 actool 写出的名称逐一比对过，包括结尾的 "Color"、数字、大写字母和 Swift 关键字。
  • •每种色彩空间和格式的组合都用苹果的 actool 按 iOS 17 和 macOS 14 编译过，没有警告或错误；assetutil 在编译出的 Assets.car 里能看到每个颜色和外观。
  • •不会上传任何内容：读取颜色、生成 JSON 和打包 ZIP 都在你的浏览器里完成。

它做不到的事

  • •不读取也不修改现有的 Xcode 项目或资源目录，下载的 .colorset 文件夹需要你自己加进去。
  • •不接受直接输入 Display P3 数值。数值按 sRGB 理解；只存在于 P3 的颜色需要在 Xcode 的颜色面板里设置。
  • •只生成通用（universal）颜色：没有单独的 iPhone、iPad、Mac、手表或电视版本，没有按色域区分的项，也不引用系统颜色。
  • •对比度检查用 WCAG 2.x 公式和 sRGB 数值计算，不考虑鲜艳度效果（vibrancy）、材质，也不考虑实际布局里半透明颜色后面的内容。
  • •JSON 格式和 Swift 名称已于 2026-10-30 与 Xcode 27.1 核对，之后的 Xcode 可能会有变化。

常见问题

.colorset 的 Contents.json 里有什么？
一个 "colors" 数组，每个版本一项，外加 "info"（author 为 xcode，version 为 1）。每项有 idiom universal 和 color，color 里有 "color-space" 和 "components"（red、green、blue、alpha 都是字符串）；各个版本还有 "appearances" 列表，例如 luminosity = dark 或 contrast = high。
在 Xcode 里怎么给颜色加深色模式版本？
选中颜色集，打开属性检查器，把 Appearances 设为 Any, Dark。Xcode 会加一项带 luminosity = dark 外观的颜色。在本页打开"深色外观"就会写入这一项，界面为深色时 iOS 或 macOS 会使用它。
该用 sRGB 还是 Display P3？
sRGB 是稳妥的默认选择，和网页、设计工具里的十六进制值一致。Display P3 能在较新的 iPhone、iPad 和 Mac 上显示更饱和的颜色。把 sRGB 颜色换算到 P3 不会改变它的样子，只有在 Xcode 里选了超出 sRGB 的数值才会更鲜艳。
高对比度（增强对比度）颜色有什么用？
用户在辅助功能里打开"增强对比度"后，如果颜色有高对比度版本，系统就用这个版本。可以用它把勉强达标的文字调深，或者加强边框。没有高对比度版本时，系统使用普通颜色。
在 Swift 里怎么使用这些颜色？
按名称：SwiftUI 用 Color("BrandBlue")，UIKit 用 UIColor(named: "BrandBlue")，AppKit 用 NSColor(named: "BrandBlue")。Xcode 15 及以后生成的符号可以写成 Color(.brandBlue) 或 UIColor(resource: .brandBlue)，由编译器检查。苹果文档列出的 ColorResource 类型适用于 iOS 17 和 macOS 14 及以后。
为什么生成的 Swift 名称和资源名不一样？
Xcode 会把资源名转成小驼峰，并去掉结尾的 "Color"：AccentColor 变成 accent，card-background 变成 cardBackground。全大写的名称保持大写，数字开头会加下划线；两个资源得到同一个 Swift 名称时，只保留一个符号。

相关工具