跳转到内容
Theme

颜色

我们完整的调色板用于图形和插图设计，探索独特而现代的色彩组合以及单色对比。它可用于突出特定主题或强调重点。

F5 调色板使用七种主要品牌色加上黑色和白色，每种颜色有四种色调/阴影变体，共计 45 种颜色。本页是主题开发过程中将品牌色映射到 Starlight CSS 自定义属性的唯一权威来源。

主色

Section titled “主色”
#e4002b
F5 红—f5-red
#f29a36
橘色—f5-tangerine
#0e41aa
河蓝—f5-river
#ab2782
覆盆子—f5-raspberry
#009639
翡翠绿—f5-jade
#62228b
茄紫—f5-eggplant
#0072b0
湾蓝—f5-bay
#ffffff
白色—f5-white
#000000
黑色—f5-black
名称HEXRGBCMYKLESSPMSCSS 变量
F5 红#e4002b228, 0, 430, 100, 81, 11monza185--f5-red
橘色#f29a36242, 154, 540, 36, 78, 5carrot-orange1375--f5-tangerine
河蓝#0e41aa14, 65, 17092, 62, 0, 33tory-blue293--f5-river
覆盆子#ab2782171, 39, 1300, 77, 24, 33—241--f5-raspberry
翡翠绿#0096390, 150, 57100, 0, 62, 41fun-green355--f5-jade
茄紫#62228b98, 34, 13929, 76, 0, 45honey-flower2617--f5-eggplant
湾蓝#0072b00, 114, 176100, 35, 0, 31—7461--f5-bay
白色#ffffff255, 255, 2550, 0, 0, 0alabaster—--f5-white
黑色#0000000, 0, 060, 50, 40, 100blackBlack--f5-black

关于 LESS 名称的说明：品牌中心将覆盆子显示为 tory-blue，将湾蓝显示为 honey-flower——这些是从河蓝和茄紫条目复制粘贴时产生的错误。为避免传播不正确的值，上表中将其标记为 —。

次色（色调与阴影）

Section titled “次色（色调与阴影）”

每种主色有四个变体，按从最浅（级别 1）到最深（级别 4）的顺序排列。

品牌中心为次色分配了 LESS 变量名。Cloud Red 和橘色变体具有独特且有意义的名称。所有其他颜色组显示相同的占位符名称（wewak、froly、carmine、venetian-red）——这些是品牌平台的模板默认值，以下为完整性而列出，但不应将其视为规范标识符。

F5 红

Section titled “F5 红”
#e4002b
F5 红（基础色）—f5-red
#f7b2bf
级别 1—f5-red-1
#f06680
级别 2—f5-red-2
#a70020
级别 3—f5-red-3
#720016
级别 4—f5-red-4
级别HEXRGBCMYKLESS
1（最浅）#f7b2bf247, 178, 1910, 28, 23, 3wewak
2#f06680240, 102, 1280, 57, 47, 6froly
3#a70020167, 0, 320, 100, 81, 35carmine
4（最深）#720016114, 0, 220, 100, 81, 55venetian-red

橘色

Section titled “橘色”
#f29a36
橘色（基础色）—f5-tangerine
#ffe4c4
级别 1—f5-tangerine-1
#ffbd61
级别 2—f5-tangerine-2
#a35700
级别 3—f5-tangerine-3
#7a4100
级别 4—f5-tangerine-4
级别HEXRGBCMYKLESS
1（最浅）#ffe4c4255, 228, 1960, 11, 23, 0tequila
2#ffbd61255, 189, 970, 26, 62, 0koromiko
3#a35700163, 87, 00, 47, 100, 36chelsea-gem
4（最深）#7a4100122, 65, 00, 47, 100, 52cinnamon

河蓝

Section titled “河蓝”
#0e41aa
河蓝（基础色）—f5-river
#b7c6e5
级别 1—f5-river-1
#6e8dcc
级别 2—f5-river-2
#0b3180
级别 3—f5-river-3
#072155
级别 4—f5-river-4
级别HEXRGBCMYKLESS
1（最浅）#b7c6e5183, 198, 2290, 28, 23, 3wewak
2#6e8dcc110, 141, 2040, 58, 47, 6froly
3#0b318011, 49, 1280, 100, 81, 35carmine
4（最深）#0721557, 33, 850, 100, 81, 55venetian-red

覆盆子

Section titled “覆盆子”
#ab2782
覆盆子（基础色）—f5-raspberry
#e6bed9
级别 1—f5-raspberry-1
#cd7db4
级别 2—f5-raspberry-2
#801d62
级别 3—f5-raspberry-3
#561441
级别 4—f5-raspberry-4
级别HEXRGBCMYKLESS
1（最浅）#e6bed9230, 190, 2170, 28, 23, 3wewak
2#cd7db4205, 125, 1800, 58, 47, 6froly
3#801d62128, 29, 980, 100, 81, 35carmine
4（最深）#56144186, 20, 650, 100, 81, 55venetian-red

翡翠绿

Section titled “翡翠绿”
#009639
翡翠绿（基础色）—f5-jade
#b2dfc4
级别 1—f5-jade-1
#66c088
级别 2—f5-jade-2
#00712b
级别 3—f5-jade-3
#004b1d
级别 4—f5-jade-4
级别HEXRGBCMYKLESS
1（最浅）#b2dfc4178, 223, 1960, 28, 23, 3wewak
2#66c088102, 192, 1360, 58, 47, 6froly
3#00712b0, 113, 430, 100, 81, 35carmine
4（最深）#004b1d0, 75, 290, 100, 81, 55venetian-red

茄紫

Section titled “茄紫”
#62228b
茄紫（基础色）—f5-eggplant
#cdabe3
级别 1—f5-eggplant-1
#9c59c9
级别 2—f5-eggplant-2
#822cb8
级别 3—f5-eggplant-3
#41175d
级别 4—f5-eggplant-4
级别HEXRGBCMYKLESS
1（最浅）#cdabe3205, 171, 2270, 28, 23, 3wewak
2#9c59c9156, 89, 2010, 58, 47, 6froly
3#822cb8130, 44, 1840, 100, 81, 35carmine
4（最深）#41175d65, 23, 930, 100, 81, 55venetian-red

湾蓝

Section titled “湾蓝”
#0072b0
湾蓝（基础色）—f5-bay
#b2d7eb
级别 1—f5-bay-1
#66afd7
级别 2—f5-bay-2
#005c8d
级别 3—f5-bay-3
#003d5f
级别 4—f5-bay-4
级别HEXRGBCMYKLESS
1（最浅）#b2d7eb178, 215, 2350, 28, 23, 3wewak
2#66afd7102, 175, 2150, 58, 47, 6froly
3#005c8d0, 92, 1410, 100, 81, 35carmine
4（最深）#003d5f0, 61, 950, 100, 81, 55venetian-red

白色（中性色）

Section titled “白色（中性色）”
#ffffff
白色（基础色）—f5-white
#faf9f7
级别 1—f5-white-1
#f5f5f5
级别 2—f5-white-2
#e6e6e6
级别 3—f5-white-3
#cccccc
级别 4—f5-white-4
级别HEXRGBCMYKLESS
1（最浅）#faf9f7250, 249, 2470, 28, 23, 3wewak
2#f5f5f5245, 245, 2450, 58, 47, 6froly
3#e6e6e6230, 230, 2300, 100, 81, 35carmine
4（最深）#cccccc204, 204, 2040, 100, 81, 55venetian-red

黑色（灰色系）

Section titled “黑色（灰色系）”
#000000
黑色（基础色）—f5-black
#999999
级别 1—f5-black-1
#666666
级别 2—f5-black-2
#343434
级别 3—f5-black-3
#222222
级别 4—f5-black-4
级别HEXRGBCMYKLESS
1（最浅）#999999153, 153, 1530, 28, 23, 3wewak
2#666666102, 102, 1020, 58, 47, 6froly
3#34343452, 52, 520, 100, 81, 35carmine
4（最深）#22222234, 34, 340, 100, 81, 55venetian-red

映射到 Starlight CSS 自定义属性

Section titled “映射到 Starlight CSS 自定义属性”

Starlight 提供了用于主题定制的 --sl-color-* 变量。以下是 F5 调色板到 Starlight 语义颜色插槽的映射，在 styles/custom.css 中实现。

Starlight 主题工作原理：在 Starlight 中，深色模式是裸 :root 默认值——没有 data-theme="dark" 选择器。浅色模式使用 :root[data-theme='light']。灰度变量是语义性的，而非按亮度排序：gray-1 始终表示”主要文本”，gray-6/gray-7 始终表示”微妙背景”，无论模式如何。其实际亮度值会在不同模式间互换。同样，accent-high 始终是高可见度的强调文本颜色，accent-low 始终是微妙的强调背景——其亮度在不同模式间反转。

/* 深色模式 — Starlight 默认 (:root) */
:root {
  --sl-color-white: #ffffff;      /* 标题文本（最亮） */
  --sl-color-gray-1: #f5f5f5;    /* 主要文本 — 白色级别 2 */
  --sl-color-gray-2: #cccccc;    /* 正文文本 — 白色级别 4 */
  --sl-color-gray-3: #999999;    /* 暗淡/静音文本 — 黑色级别 1 */
  --sl-color-gray-4: #666666;    /* 边框 — 黑色级别 2 */
  --sl-color-gray-5: #343434;    /* 内联代码背景 — 黑色级别 3 */
  --sl-color-gray-6: #222222;    /* 侧边栏背景 — 黑色级别 4 */
  --sl-color-black: #000000;     /* 页面背景 */
  --sl-color-accent-low: #720016;   /* 微妙强调背景 — F5 红级别 4 */
  --sl-color-accent: #f06680;       /* 链接、激活状态 — F5 红级别 2 */
  --sl-color-accent-high: #f7b2bf;  /* 强调文本 — F5 红级别 1 */
}


/* 浅色模式 — 反转的灰度和强调亮度 */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* 标题文本（最暗）— 黑色级别 4 */
  --sl-color-gray-1: #222222;    /* 主要文本 — 黑色级别 4 */
  --sl-color-gray-2: #343434;    /* 正文文本 — 黑色级别 3 */
  --sl-color-gray-3: #666666;    /* 暗淡文本 — 黑色级别 2 */
  --sl-color-gray-4: #999999;    /* 边框 — 黑色级别 1 */
  --sl-color-gray-5: #cccccc;    /* 浅色边框 — 白色级别 4 */
  --sl-color-gray-6: #f5f5f5;    /* 侧边栏背景 — 白色级别 2 */
  --sl-color-gray-7: #faf9f7;    /* 导航背景 — 白色级别 1 */
  --sl-color-black: #ffffff;     /* 页面背景 */
  --sl-color-accent-low: #f7b2bf;   /* 微妙强调背景 — F5 红级别 1（反转） */
  --sl-color-accent: #e4002b;       /* 链接、激活状态 — F5 红 */
  --sl-color-accent-high: #720016;  /* 强调文本 — F5 红级别 4（反转） */
}

视觉令牌预览

Section titled “视觉令牌预览”

切换主题开关，查看这些语义令牌在深色和浅色模式之间的变化。

灰度令牌

Section titled “灰度令牌”
white
标题文本—sl-color-white
gray-1
主要文本—sl-color-gray-1
gray-2
正文文本—sl-color-gray-2
gray-3
暗淡文本—sl-color-gray-3
gray-4
边框—sl-color-gray-4
gray-5
内联代码背景—sl-color-gray-5
gray-6
侧边栏背景—sl-color-gray-6
black
页面背景—sl-color-black

强调令牌

Section titled “强调令牌”
accent-low
微妙强调背景—sl-color-accent-low
accent
链接、激活状态—sl-color-accent
accent-high
强调文本—sl-color-accent-high

徽章令牌

Section titled “徽章令牌”
default
默认徽章—sl-color-bg-badge-default
note
注释徽章—sl-color-bg-badge-note
danger
危险徽章—sl-color-bg-badge-danger
success
成功徽章—sl-color-bg-badge-success
caution
警告徽章—sl-color-bg-badge-caution
tip
提示徽章—sl-color-bg-badge-tip

对比度验证（WCAG AA）

Section titled “对比度验证（WCAG AA）”

深色模式（文本置于 #000000 页面背景上）：

  • 正文文本 #cccccc → 16.3:1（AAA）
  • 暗淡文本 #999999 → 10:1（AAA）
  • 强调链接 #f06680 → 5.6:1（AA）

浅色模式（文本置于 #ffffff 页面背景上）：

  • 正文文本 #343434 → 11.6:1（AAA）
  • 暗淡文本 #666666 → 5.7:1（AA）
  • 强调链接 #e4002b → 4.6:1（AA）

语义颜色建议

Section titled “语义颜色建议”
Starlight 变量F5 颜色使用场景
--sl-color-accentF5 红 #e4002b链接、按钮、激活状态
--sl-color-text-accentF5 红级别 2 #f06680深色模式悬停状态
--sl-color-bg-accentF5 红级别 4 #720016强调背景
自定义：--sl-color-info湾蓝 #0072b0信息提示框
自定义：--sl-color-success翡翠绿 #009639成功消息
自定义：--sl-color-warning橘色 #f29a36警告提示框
自定义：--sl-color-dangerF5 红 #e4002b错误/危险提示框

颜色对比度

Section titled “颜色对比度”

为确保所有人都能访问和理解我们的内容，请使用满足无障碍标准的背景和文本颜色组合。选择对比度比至少为 3:1（大文本）和 4.5:1（常规文本）的颜色对。

所有颜色配对必须满足 WCAG AA 对比度要求：

  • 常规文本（小于 18pt / 14pt 粗体）：最低对比度比 4.5:1
  • 大文本（大于等于 18pt / 14pt 粗体）：最低对比度比 3:1
  • UI 组件和图形对象：最低对比度比 3:1

推荐的安全配色方案

Section titled “推荐的安全配色方案”
前景色背景色对比度比是否通过
白色 #ffffffF5 红 #e4002b4.6:1AA
白色 #ffffff河蓝 #0e41aa6.4:1AA / AAA
白色 #ffffff湾蓝 #0072b04.6:1AA
白色 #ffffff翡翠绿 #0096394.2:1AA（大文本）
白色 #ffffff茄紫 #62228b6.5:1AA / AAA
白色 #ffffff覆盆子 #ab27824.7:1AA
黑色 #000000橘色 #f29a367.8:1AA / AAA
黑色 #000000F5 红级别 1 #f7b2bf10.1:1AA / AAA
黑色 #222222白色级别 1 #faf9f715.8:1AA / AAA

提示：在创建新的颜色组合时，请始终使用 WebAIM Contrast Checker 等工具验证对比度比。

使用指南

Section titled “使用指南”
颜色系列角色使用场景
F5 红品牌标识、主要 CTA英雄区域、主要按钮、品牌标记、错误状态
河蓝信息性、可信赖导航链接、信息横幅、数据可视化
湾蓝信息性、次要次要链接、信息提示框、代码块强调
翡翠绿成功、积极成功消息、确认状态、进度指示器
橘色警告、注意警告提示框、需关注状态、高亮标记
覆盆子强调、装饰标签、徽章、次要强调、分类标记
茄紫强调、高端功能亮点、高端指示器、装饰性强调
白色/中性色背景、表面页面背景、卡片表面、分隔线、微妙边框
黑色/灰色文本、结构正文文本、标题、边框、阴影层

主题检查

Section titled “主题检查”
  • .swatch 边框使用 --sl-color-gray-5
  • .swatch-label 背景使用 --sl-color-gray-6
  • 所有 --f5-* 色板显示其实际颜色（CSS 自定义属性从 custom.css 解析）
  • 颜色色板在浅色和深色模式下均可见
  • 切换主题时徽章令牌色板会更新