> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/gum-tool/gum-elements/general-properties/color.md).

# Color

## Introduction

The `Color` value can be used to set or modify the effective color of an object. The color value is combined with the `Color Operation` and an object's `Source File` or `Font` settings to produce a final color.

## Example: Setting Color

Most objects in Gum have a Color (or similar) property which can be set directly in the editor. For example, `Text` instances have a `Color` which directly controls their effective color.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FwdZn1F4JcxgQDyEWLVxH%2F04_07_50_49.gif?alt=media&amp;token=ec4cfca9-616e-4fb4-950b-ccb9437ab546" alt=""><figcaption><p>Color on a Text Instance</p></figcaption></figure>

## Color and Shapes

Shapes support multiple color values. Which value applies depends on a number of settings.

### Stroke Color

By default shapes render their outline. The `Stroke Color` variable controls their outline color.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FEyjJfoxSzJXYzMFCQN0c%2F04_11_18_50.png?alt=media&amp;token=e00ea666-db40-4198-820b-b362753b61cf" alt=""><figcaption><p>Circle with Stroke Color</p></figcaption></figure>

`Stroke Color` also applies to `Rectangles`.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2F2G2yCfmw2DICNL05V8GV%2F04_11_20_53.png?alt=media&amp;token=bc47b1b4-6407-430e-8422-108cd86fe257" alt=""><figcaption><p>Rectangle with Stroke Color</p></figcaption></figure>

### Fill Color

`Circles` and `Rectangles` can set an independent `Fill Color` along `Stroke Color`. First, `Is Filled` must be checked. Once a shape is filled, its Fill Color can be set.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fk8R0UQnS8HkvobkdXKOV%2F04_11_22_46.png?alt=media&amp;token=5d41640f-4770-46e9-a09e-7164ac550d1a" alt=""><figcaption></figcaption></figure>

## Color Operations

Sprites and NineSlices can change the way their Color value is applied by changing Color Operation.

{% hint style="info" %}
Color Operations require [project version 5](/gum/gum-tool/upgrading/upgrading-file-gumx-version.md#version-5) or newer.
{% endhint %}

### Modulate

The `Modulate` `Color Operation` is also often referred to as *multiply*. This is the default value, and it multiplies color the sprite that is being drawn by the color value.

`Modulate` is the default `Color Operation` value. When paired with the default value of (255, 255, 255) - pure white - `Modulate` does not modify the color of a sprite.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FoUyYuOZI4Hvdcn6pN2KM%2F04_11_46_58.png?alt=media&amp;token=6015b55c-4f1c-4d46-a1d3-04e27a41df22" alt=""><figcaption><p>Modulate Color Operation with white color</p></figcaption></figure>

Any color other than white darkens the `Sprite`. A value of pure black results in all colors (red, green, blue) being multiplied by 0, which creates a black silhouette.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2F9VqJcaBIipkRzACAe5tG%2F04_11_48_51.png?alt=media&amp;token=211b900e-a0c4-4756-a6a6-41033fffdfaa" alt=""><figcaption><p>Modulate Color Operation with black color</p></figcaption></figure>

The math for multiply is that each of the three color components is *normalized,* which means a value of 0 to 255 is adjusted to a 0 to 1 range. Therefore, values of 128 become a value of (nearly) 0.5. These normalized values are multiplied against each channel in the source image to produce a final result.

Multiplying by a color which has uneven red, green, and blue values can darken and tint.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FfOY1eyaQnW79xgYQaGRs%2F04_11_55_32.png?alt=media&amp;token=a7a83991-abdd-499a-8626-21dc0f008fb8" alt=""><figcaption><p>Modulate Color Operation with red color</p></figcaption></figure>

### Add

The `Add` `Color Operation` can be used to add color values to the source image. `Add` can be used to brighten color values.

An `Add` value of 0, 0, 0 does not modify the original sprite.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2F9PetCIa3B2cDT3ClzhpQ%2F04_12_03_55.png?alt=media&amp;token=bf47956d-2e4b-4fd4-ba98-b0f9b36752ef" alt=""><figcaption><p>Add Color Operation with black color</p></figcaption></figure>

Any other color besides black brightens the Sprite. A value of white creates a white silhouette, resulting in all color values displaying their max 255.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FNqJj7UZfIMx387IUTont%2F04_12_10_05.png?alt=media&amp;token=cb08a864-3876-46a0-b4a6-f22ee67f8272" alt=""><figcaption><p>Add Color Operation with a white color</p></figcaption></figure>

Other values can be used to tint and brighten the argument sprite.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FO9kJrVsUJOkgQlKDINHQ%2F04_12_12_11.png?alt=media&amp;token=11811411-aff0-43f5-ba68-e52bc86704a5" alt=""><figcaption><p>Add Color Operation with a magenta color</p></figcaption></figure>

{% hint style="info" %}
Some runtime libraries support negative color values, allowing Add to also subtract colors. This is currently not supported in the Gum tool, but it may be added in future versions.
{% endhint %}

### Silhouette (Color + Texture Alpha)

The `Silhouette` `Color Operation` uses the `Sprite's` `Color` value while keeping the `Source File's` opacity. This Color Operation is used to create colored silhouettes.

When using Silhouette, color values overwrite the source texture.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2FUxndnRl0VFSNuZimj79j%2F04_12_27_03.png?alt=media&amp;token=15fa4bdd-d67e-4396-a3da-e865d4338d22" alt=""><figcaption><p>Silhouette Color Operation with a yellow color.</p></figcaption></figure>

{% hint style="info" %}
Runtime libraries use the `ColorTextureAlpha` enumeration for `Silhouette`.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flatredball.com/gum/gum-tool/gum-elements/general-properties/color.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
