> For the complete documentation index, see [llms.txt](https://primer2.dynamobim.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://primer2.dynamobim.org/zh-cn/5_essential_nodes_and_concepts/5-3_the-building-blocks-of-programs/5-color.md).

# 颜色

颜色是用于在可视化程序中创建引入注目的视觉效果以及渲染输出差异的绝佳数据类型。处理抽象数据和改变数字时，有时难以了解变化内容以及变化程度。这是颜色的绝佳应用。

### 创建颜色

Dynamo 中的颜色是使用 ARGB 输入创建的。这对应于 Alpha、红、绿和蓝通道。Alpha 表示颜色的 *透明度*，而其他三种颜色用作原色来协调生成整个色谱。

| 图标                                                                                                                                                                                                           | 名称（语法）                     | 输入      | 输出 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------- | -- |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-cbf364cdeffabd85f71cb24ba3e47bb8f556fc28%2FColor%20byARGB.jpg?alt=media) | ARGB 颜色 (**Color.ByARGB**) | A,R,G,B | 颜色 |

### 查询颜色值

下表中的颜色查询用于定义相应颜色的特性：Alpha、红、绿和蓝。请注意，Color.Components 节点给出全部四个不同输出，这使得该节点更适合查询颜色的特性。

| 图标                                                                                                                                                                                                              | 名称（语法）                    | 输入 | 输出      |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -- | ------- |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-49bc59f0727da7b48eb331e713d85429b3a430e6%2FColor%20Alpha.jpg?alt=media)     | Alpha (**Color.Alpha**)   | 颜色 | A       |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-d77cc4fe65c37c99042780beae5bbf09e22c6d75%2FColor%20Red.jpg?alt=media)       | 红色 (**Color.Red**)        | 颜色 | R       |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-a6e731e9bc7a0814ac0c65630cd4c787da887736%2FColor%20Green.jpg?alt=media)     | 绿色 (**Color.Green**)      | 颜色 | G       |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-7f00c165eb7d34ad4dfa9799c987300f94ae03af%2FColor%20Blue.jpg?alt=media)      | 蓝色 (**Color.Blue**)       | 颜色 | B       |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-c27affe0144d651e7ff5d0e3d17cd067314c0cff%2FColor%20Component.jpg?alt=media) | 组件 (**Color.Components**) | 颜色 | A,R,G,B |

下表中的颜色对应于 **HSB 颜色空间**。对于我们如何解释颜色，将颜色分为色调、饱和度和亮度无疑更加直观：应该是什么颜色？应该如何呈现多彩？颜色应该如何变亮或变暗？这分别是色调、饱和度和亮度的细分。

| 图标                                                                                                                                                                                                               | 名称（语法）                     | 输入 | 输出  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | -- | --- |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-c484d578ab1cdfcd1ff8ae89b3cdd878678e344b%2FColor%20Hue.jpg?alt=media)        | 色调 (**Color.Hue**)         | 颜色 | 色调  |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-dc7ef438678697382c8f7d35932cc9876e947c63%2FColor%20Saturation.jpg?alt=media) | 饱和度 (**Color.Saturation**) | 颜色 | 饱和度 |
| ![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-98841424ef9041db133648e381f9697359c8e404%2FColor%20Brightness.jpg?alt=media) | 亮度 (**Color.Brightness**)  | 颜色 | 亮度  |

### 颜色范围

颜色范围类似于 [逻辑](/zh-cn/5_essential_nodes_and_concepts/5-3_the-building-blocks-of-programs/3-logic.md#part-ii-from-logic-to-geometry)练习中的\*\*“Remap Range”\*\*节点：它将数字列表重新映射到其他域。但它不会映射到 *“数字”* 域，而是基于 0 到 1 范围的输入数字映射到 *“颜色渐变”*。

当前节点运作良好，但第一次就使一切正常工作可能会有点勉强。熟悉颜色渐变的最佳方法是以交互方式对其进行测试。让我们快速练习，了解如何使用与数字对应的输出颜色设置渐变。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-523094bd38363f801b1993a6c33f43670fe0bc83%2Fcolor%20-%20color%20range.jpg?alt=media)

> 1. 定义三种颜色：使用 **“Code Block”** 节点，通过插入相应的 *“0”* 和 *“255”* 组合来定义 *红色、绿色* 和 *蓝色*。
> 2. **创建列表**：将三种颜色合并到一个列表中。
> 3. 定义索引：创建列表以定义每种颜色的夹点位置（范围从 0 到 1）。请注意，值 0.75 表示绿色。这会将绿颜色 3/4 置于颜色范围滑块中水平渐变的位置。
> 4. **代码块**：输入值（介于 0 和 1 之间）以转换为颜色。

### 颜色预览

**“Display.ByGeometry”** 节点使我们能够在 Dynamo 视口中为几何图形着色。这有助于分离不同类型的几何图形、演示参数化概念或定义用于模拟的分析图例。输入很简单：几何图形和颜色。要创建与上图类似的渐变，请将颜色输入连接到 **“Color** **Range”** 节点。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-392a193180acccedab6da65a4a46367fb76bca89%2Fcolor%20-%20color%20preview.jpg?alt=media)

### 曲面上的颜色

**“Display.BySurfaceColors”** 节点使我们能够使用颜色在整个曲面上映射数据！此功能为可视化通过离散分析（例如日光、能量和接近度）获得的数据引入了一些令人兴奋的可能性。在 Dynamo 中将颜色应用于曲面类似于在其他 CAD 环境中将纹理应用于材质。在下面的简短练习中，我们来演示如何使用此工具。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-86ed81769387291a62403fe3b1325eb00c70bbb2%2F12.jpg?alt=media)

## 练习

### 基本螺旋线（带颜色）

> 单击下面的链接下载示例文件。
>
> 可以在附录中找到示例文件的完整列表。

本练习重点介绍如何以参数方式控制与几何图形平行的颜色。该几何图形是基本螺旋线，我们在下面使用 **“代码块”** 对其进行定义。这是一种用于创建参数化函数的快速而简单的方法；由于我们的重点是颜色（而不是几何图形），因此我们使用代码块来有效地创建螺旋线，而不会使画布变得混乱。随着底漆迁移到更高级的材质，我们会更频繁地使用代码块。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-b3aa6ba516c31f3b5ae9018495892b215c2f318a%2Fcolor%20-%20basic%20helix%20with%20colors%2001.jpg?alt=media\&token=6c21052c-9bc4-4760-8fdf-70bb123ca5f7)

> 1. **代码块**：使用上述公式定义两个代码块。这是用于创建螺旋的快速参数化方法。
> 2. **Point.ByCoordinates**：将代码块的三个输出连接到该节点的坐标。

现在，我们会看到创建螺旋线的一组点。下一步是通过这些点创建曲线，以便我们可以可视化螺旋线。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-54adb34f5218a9c9454d895844c41f5fd768dd46%2Fcolor%20-%20basic%20helix%20with%20colors%2002.jpg?alt=media)

> 1. **PolyCurve.ByPoints**：将 **“Point.ByCoordinates”** 输出连接到节点的 *“points”* 输入。我们会得到螺旋曲线。
> 2. **Curve.PointAtParameter**：将 **“PolyCurve.ByPoints”** 输出连接到 *“curve”* 输入。此步骤的目的是创建一个沿曲线滑动的参数化吸引器点。由于曲线将计算参数处的点，因此我们需要输入一个介于 0 和 1 之间的 *参数* 值。
> 3. **数字滑块**：添加到画布后，将 *最小* 值更改为 *0.0*、将 *最大* 值更改为 *1.0*、将 *步长* 值更改为 *.01*。将滑块输出插入 **“Curve.PointAtParameter”** 的 *“param”* 输入。现在，我们会沿螺旋线长度看到一个点，由滑块的百分比表示（起点处为 0，终点处为 1）。

创建参照点后，我们现在将比较参照点与定义螺旋线的原始点之间的距离。此距离值将驱动几何图形以及颜色。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-9c22afb318d993eb2f088f5d487dc49c75dc2c99%2Fcolor%20-%20basic%20helix%20with%20colors%2003.jpg?alt=media)

> 1. **Geometry.DistanceTo**：将 **“Curve.PointAtParameter”** 输出连接到 *“input”*。将 **“Point.ByCoordinates”** 连接到几何图形输入。
> 2. **Watch**：结果输出会显示沿曲线从每个螺旋点到参照点的距离列表。

下一步是通过从螺旋点到参照点的距离列表来驱动参数。我们使用这些距离值来沿曲线定义一系列球体的半径。为了使球体保持合适大小，我们需要 *重映射* 距离值。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-3e8dc934098e149adfc7538beffbf92d564c8899%2Fcolor%20-%20basic%20helix%20with%20colors%2004.jpg?alt=media)

> 1. **Math.RemapRange**：将 **“Geometry.DistanceTo”** 输出连接到数字输入。
> 2. **代码块**：将值为 *0.01* 的代码块连接到 *“newMin”* 输入，将值为 *1* 的代码块连接到 *“newMax”* 输入。
> 3. **Watch**：将 **“Math.RemapRange”** 输出连接到一个节点，并将 **“Geometry.DistanceTo”** 输出连接到另一个节点。比较结果。

此步骤已将距离列表重新映射为较小的范围。我们可以编辑 *“newMin”* 和 *“newMax”* 值，但我们认为合适。这些值将重新映射并在整个域中具有相同的 *分布率*。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-d73f213953dbe598f00d1179780f39781c8af365%2Fcolor%20-%20basic%20helix%20with%20colors%2005.jpg?alt=media)

> 1. **Sphere.ByCenterPointRadius**：将 **“Math.RemapRange”** 输出连接到 *“radius”* 输入，将原始 **“Point.ByCoordinates”** 输出连接到 *“centerPoint”* 输入。

更改数字滑块的值，并观察球体更新的大小。现在，我们有了一个参数化夹具

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-439fdeb3932452388a955c30a705a990e799e34c%2Fcolor%20-%20basic%20helix%20with%20colors%2006.gif?alt=media)

球体的大小演示了由沿曲线的参照点定义的参数化阵列。让我们对球体半径使用相同的概念来驱动其颜色。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-f846c6e0cf57b666a9842ff4a250effc9548df42%2Fcolor%20-%20basic%20helix%20with%20colors%2007.jpg?alt=media)

> 1. **Color Range**：在画布顶部添加。将光标悬停在 *“value”* 输入上时，我们注意到请求的数字介于 0 和 1 之间。我们需要重新映射 **“Geometry.DistanceTo”** 输出中的数字，以便它们与此域兼容。
> 2. **Sphere.ByCenterPointRadius**：目前，我们禁用此节点上的预览（*单击鼠标右键 >“预览”*）

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-36647dea9f49ae366b9da3048d83a14cf09d003c%2Fcolor%20-%20basic%20helix%20with%20colors%2008.jpg?alt=media\&token=6dcf2dd1-0c92-4373-bf8d-b1358b101b5b)

> 1. **Math.RemapRange**：此过程看起来很熟悉。将 **“Geometry.DistanceTo”** 输出连接到数字输入。
> 2. **Code Block**：与之前的步骤类似，为 *“newMin”* 输入创建值 *0*，为 *“newMax”* 输入创建值 *1*。注意，在这种情况下，我们能够在一个代码块中定义两个输出。
> 3. **Color Range**：将 **“Math.RemapRange”** 输出连接到 *“value”* 输入。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-41d7e60c615a17d1eca3d299b364bd8ddeddac40%2Fcolor%20-%20basic%20helix%20with%20colors%2009.jpg?alt=media)

> 1. **Color.ByARGB**：这是我们要为创建两种颜色所执行的操作。尽管此过程看起来可能有些古怪，但它与其他软件中的 RGB 颜色相同，我们只需使用可视化编程即可实现。
> 2. **Code Block**：创建由 *0* 和 *255* 组成的两个值。将两个输出连接到与上图一致的两个 **“Color.ByARGB”** 输入（或创建您最喜欢的两种颜色）。
> 3. **Color Range**： *“colors”* 输入要求一列颜色。我们需要基于上一步中创建的两种颜色创建此列表。
> 4. **List.Create**：将两种颜色合并到一个列表中。将输出连接到 **“Color Range”** 的 *“colors”* 输入。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-381a9213045bb22f3f8d7d8057efc6c0c43d7d42%2Fcolor%20-%20basic%20helix%20with%20colors%2010.jpg?alt=media)

> 1. **Display.ByGeometryColor**：将 **“Sphere.ByCenterPointRadius”** 连接到 *“geometry”* 输入，将 *“Color Range”* 连接到 *“color”* 输入。现在，我们在曲线域上具有平滑渐变。

如果我们之前在定义中更改了 **“Number Slider”** 的值，则颜色和尺寸会更新。在这种情况下，颜色和半径大小直接相关：我们现在在两个参数之间有视觉链接！

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-2338cf2f0a9e58e11d0ca2d75f5e7b7653d10e7e%2Fcolor%20-%20basic%20helix%20with%20colors%2011.gif?alt=media)

### “曲面上的颜色”练习

> 单击下面的链接下载示例文件。
>
> 可以在附录中找到示例文件的完整列表。

首先，我们需要创建（或引用）一个曲面以用作 **“Display.BySurfaceColors”** 节点的输入。在此示例中，我们将在正弦和余弦曲线之间放样。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-7de0ac5c29be074438603977ed08b6c3c2b3a552%2Fcolor%20-%20color%20on%20surface%2001.jpg?alt=media)

> 1. 该组节点将沿 Z 轴创建点，然后基于正弦和余弦函数置换它们。然后，使用这两个点列表生成 NURBS 曲线。
> 2. **Surface.ByLoft**：在 NURBS 曲线列表之间生成插值曲面。

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-42455318382bbf697350aac5ecf9f26af00ce09d%2Fcolor%20-%20color%20on%20surface%2002.jpg?alt=media)

> 1. **File Path**：选择要取样的图像文件以获取下游像素数据
> 2. 使用 **“File.FromPath”** 将文件路径转化为某个文件，然后传递给 **“Image.ReadFromFile”** 以输出图像进行采样
> 3. **Image.Pixels**：输入某个图像并提供要沿图像的 X 和 Y 标注使用的样例值。
> 4. **Slider**：为 **“Image.Pixels”** 提供样例值
> 5. **Display.BySurfaceColors**：在整个曲面上分别沿 X 和 Y 映射颜色值数组

输出曲面的特写预览，分辨率为 400x300 样例

![](https://338946474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZkPl5tDHbu5X9VJTozDs%2Fuploads%2Fgit-blob-917fa02e0679554e24a0b7ea485c2585be80a231%2Fcolor%20-%20color%20on%20surface%2003.jpg?alt=media\&token=a030305f-76ee-441d-bc05-f2c25519f2f5)