控件强调色外观

勾选框、单选钮、滑杆这类控件在选中或激活时用的那个主色。

  • 勾选后那个蓝色
  • 打上勾之后变的那个色
  • 小圆点选中变的颜色
  • 控件强调色
  • 强调色
  • 点缀色

示例

Webaccent-color原生支持点选数值,样本实时变化

accent-color: #7C7CF8;

Web / iOS / Android 对照

Web原生支持

平台通用范围

accent-color

CSS: accent-color

官方定义是「为某些元素生成的用户界面控件设置强调色」—— 那个「某些」是关键:目前浏览器只把它应用到 checkbox、radio、range 与 progress 四种。这四种是当前的实现范围,不是规范给死的边界。另外官方标注它是 Limited availability:「不属于 Baseline,因为在部分最广泛使用的浏览器里不生效」。

iOS原生支持

平台通用范围

tint

也叫 tint(_:)

SwiftUI: View.tint(_:)

官方描述是「设置这个视图内的着色颜色」。它与「强调色」在这一端是两个东西,官方写得很直接:「与应用的强调色不同 —— 强调色可以被用户偏好覆盖 —— 着色颜色总是被遵守」。所以要表达语义(接听绿、挂断红)时用的是着色,不是强调色。iOS 15 起可用。

Android需自己实现

Material 3 主题体系

没有一个「设置控件强调色」的对应属性。Material 的 ColorScheme.primary 是主题级的颜色角色,官方定义是「在应用各屏幕与组件中出现最频繁的颜色」—— 范围比那四类控件宽得多,改它会牵动整套主题;反过来逐个控件的 tint 属性又比它窄。两者都不是同一件事的对应物。

通常怎么做:要跟随品牌色就改 ColorScheme 的角色取值;只想改某类控件则逐个设置该控件的 tint 属性。

使用规范

什么时候用

  • 表单控件要跟随品牌色,又不想逐个重画时
  • 同一屏里要用颜色区分两组控件的语义时

什么时候别用

  • 想改的是文字或背景颜色 → 那是前景色与背景色
  • 指望它统一改掉全部控件外观 —— 各端覆盖范围差得很远

容易混淆

给 AI 的提示词

这条词条还没有经过验证的实现提示词。