App Inventor 2 颜色代码块

• App Inventor 中的颜色如何发挥作用？
• 基本颜色
• 合成颜色
• 分解颜色
• 颜色工具
  • 十六进制转颜色
  • 颜色转十六进制
  • 调亮颜色 / 调暗颜色
  • 混合
  • 颜色亮度 / 是深色吗
  • 从 ColorUtilities 拓展迁移

颜色代码块主要分为四种类型：

• 基本颜色
• 合成颜色
• 分解颜色
• 颜色工具

App Inventor 中的颜色如何发挥作用？

在内部，App Inventor 将每种颜色存储为单个数字。 当你使用合成颜色 并接受一个列表作为参数时，该列表会在内部使用 App Inventor 的配色方案进行转换并存储为数字。 如果你知道颜色的数字，你甚至可以通过将其 Color 属性设置为特定数字来指定你想要的颜色。 如果你想查看颜色与数字的图表，请查看此页面。

基本颜色

这是一个基本色块。 它有一个小正方形形状，中间有一个颜色，代表该块内部存储的颜色。

如果单击中间的颜色，屏幕上会出现一个弹出窗口，其中包含 70 种颜色可供选择。 单击新颜色将更改基本色块的当前颜色。

从“颜色”面板拖到“代码视图”的每个基本颜色块在单击时都会显示具有相同颜色的表格。

合成颜色

合成颜色 接受 3 或 4 个数字的列表。 此列表中的这些数字表示 RGB 代码中的值。 RGB 代码用于在互联网上生成颜色。 RGB 颜色图表可在此处获得。 该列表中的第一个数字代表代码的 R 值，第二个代表 G，第三个代表 B，第四个值是可选的，代表 alpha 值或颜色的饱和度。 默认 alpha 值为 100。尝试不同的值并查看使用此块的颜色如何变化。

分解颜色

分解颜色 与 合成颜色 相反。 它接受颜色、颜色块、保存颜色的变量或表示颜色的组件之一的属性，并返回该颜色的 RGB 代码中的 R,G,B 值列表。

颜色工具

颜色抽屉还提供七种颜色工具块（2026-09 新增，由 ColorUtilities 拓展内化而来），可以直接在块里做十六进制转换、明暗调整、混色与深浅判断，无需导入任何拓展，Android 与鸿蒙编译都支持。它们都是值块：颜色进、颜色或文本出，可以嵌进任何属性、变量和条件里。

十六进制转颜色

十六进制转颜色 把文本形式的十六进制颜色转换成颜色。支持 #RRGGBB、#AARRGGBB 两种写法，# 可以省略（6 位文本自动按完全不透明处理）；文本无效时返回透明黑，不会报错。设计师标注的色值直接用它变成组件的颜色属性：

when Screen1.Initialize {
  标签_标题.TextColor = colorFromHex("#FF5722")
  global 主题色 = colorFromHex("#4CAF50")
}

颜色转十六进制

颜色转十六进制 是 十六进制转颜色 的反向块，把颜色转换成 #AARRGGBB 形式的 8 位大写文本，常用于把当前颜色显示出来查看、或上传给服务器：

when 按钮_查看.Click {
  标签_颜色值.Text = colorToHex(标签_标题.TextColor)
}

调亮颜色 / 调暗颜色

调亮颜色 按比例（0 到 1）把颜色向白色方向调亮，调暗颜色 按比例把颜色向黑色方向调暗，透明度都保持不变；比例超出范围会自动钳到边界（调暗比例超过 1 得到纯黑）。适合从同一个主题色生成层次色，比如按钮的按下态、卡片的描边色：

when 按钮_主题.Click {
  按钮_主题.BackgroundColor = darkenColor(主题色, 0.2)
  标签_说明.TextColor = lightenColor(colorFromHex("#212121"), 0.4)
}

混合

混合 按比例混合两种颜色：比例 0 取第一种，1 取第二种，中间为过渡色（透明度通道一起参与插值）。适合做渐变过渡、主题切换的中间色：

when 滑动条_过渡.PositionChanged(thumbPosition) {
  标签_标题.BackgroundColor = blendColors(colorFromHex("#FF6B6B"), colorFromHex("#4ECDC4"), thumbPosition)
}

颜色亮度 / 是深色吗

颜色亮度 返回颜色的相对亮度（0 到 1 的小数），采用 WCAG 无障碍标准公式；是深色吗 直接判断亮度是否小于 0.5。两者配合可以自动选择文字颜色——深色背景配白字、浅色背景配黑字，保证文字始终可读：

when Screen1.Initialize {
  global 底色 = colorFromHex("#4CAF50")
  if isDarkColor(底色) {
    标签_标题.TextColor = colorFromHex("#FFFFFF")
  } else {
    标签_标题.TextColor = colorFromHex("#212121")
  }
  标签_亮度.Text = join("亮度: ", colorLuminance(底色))
}

从 ColorUtilities 拓展迁移

这些功能原来由第三方 ColorUtilities 拓展提供，现已内化为原生颜色块，新项目无需再导入拓展（旧拓展文档保留供旧项目参考）。旧项目里已导入的拓展不受影响，可继续使用；新项目请直接用原生块，方法对照如下：