> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/general/color-selector.md).
# Color Selector
Pick solid colors and build gradients for text, shapes, scene backgrounds, and color effects.
Every color setting in PLAY uses the same color selector. Pick a solid color, sample one from the canvas, or build a gradient with as many color stops as you need.
### The Color Field
A color setting in the Properties panel is a single row:
* **Swatch.** Shows the current color or gradient. Click it to open the color selector.
* **Hex value.** Type a hex code, with or without `#`. Six-digit codes apply as you type; three-digit codes like `F80` expand when you leave the field. When the setting holds a gradient, this box reads **Gradient** and can't be typed in. Use the swatch to edit it.
* **Opacity.** Sets how see-through the color is, from 0 to 100%. For a gradient, this fades the whole gradient on top of each stop's own opacity.
Everything you change while the selector is open counts as a single step for undo.
### Solid
The **Solid** tab picks one color.
* **Color map.** Click or drag to set saturation and brightness.
* **Hue bar.** Sets the base color.
* **Opacity bar.** Sets opacity. Hidden on settings that don't support opacity.
* **Color and opacity fields.** Enter exact values.
### Eyedropper
The eyedropper samples any color shown on the canvas. Click the eyedropper button in the selector, or press **I** while the selector is open.
1. Press on the canvas. A magnifier shows the pixels under your cursor and the hex value at the center.
2. Drag to fine-tune.
3. Release to apply the color.
Press **Esc**, click the eyedropper button again, or press **I** again to cancel. Releasing outside the canvas picks nothing. The scene pauses while you sample so moving content holds still.
{% hint style="info" %}
The eyedropper always applies the color at 100% opacity. Adjust the opacity afterward if you need it lower.
{% endhint %}
### Gradient
The **Gradient** tab blends two or more colors.
#### Gradient Type
Choose the shape of the blend from the dropdown:
| Type | How it blends |
| ------------- | --------------------------------------------------------------- |
| **Linear** | In a straight line across the layer. The default. |
| **Radial** | Outward in a circle from the center. |
| **Angular** | Around the center, like the hands of a clock. |
| **Reflected** | In a straight line, mirrored from the center out to both edges. |
| **Diamond** | Outward from the center in a diamond shape. |
#### Direction
The direction field sets the angle of the gradient, from **0** to **360** degrees. The default is **45°**. At 0° a Linear gradient runs left to right. Every type except Radial has a direction. Angular starts its sweep from this angle and runs clockwise.
Changing the type keeps your color stops and direction.
#### Color Stops
The gradient bar shows your gradient with a marker for each color stop.
* **Add a stop.** Click an empty spot on the bar. The new stop takes the color already at that point. You can also click **+** (**Add Color**) in the stops list to add one between the selected stop and the next.
* **Move a stop.** Drag its marker along the bar. With a marker selected, the arrow keys move it 1%, and **Shift** + arrow moves it 10%.
* **Edit a stop.** Click a marker, or click into its row in the stops list, to select it. The color map, hue bar, opacity bar, and eyedropper then edit that stop. Each row also has its own hex and opacity fields.
* **Remove a stop.** Click **−** (**Remove Color**) on its row. A gradient always keeps at least two stops.
A new gradient starts with two stops: your current color on the left and black on the right.
### Switching Between Solid and Gradient
* **Solid to Gradient** builds a two-stop gradient from your current color to black.
* **Gradient to Solid** keeps the color of the first stop.
{% hint style="warning" %}
Switching to Solid replaces the gradient. Switching back to Gradient starts a new one from the solid color rather than restoring the old gradient. Use undo to get it back.
{% endhint %}
### How Gradients Fit a Layer
* A gradient is laid out across the layer's box, so it stretches to fit the layer's shape and rotates with the layer. A 45° Linear gradient always runs corner to corner.
* Radial gradients are always centered on the layer.
* On text with a single style, a gradient spans the whole text block. When part of the text is styled differently, the gradient restarts on each line and at each change of style.
* On a custom shape, a gradient on one color spans the whole layer, not just that part of the shape.
### Where Gradients Are Available
| Setting | Gradient |
| ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| [Text](/play/layers/text.md) color | Yes |
| [Shape](/play/layers/shapes.md) fill color | Yes |
| [Scene](/play/layers/scenes.md) background | Yes |
| [Color Overlay](/play/properties/effects/color-overlay.md) and [Color Underlay](/play/properties/effects/color-underlay.md) effects | Yes |
| Custom shape stroke color | Solid only. A gradient shows its first color. |
| [Press Effect](/play/properties/interactions/press-effect.md) color | Solid only |
| Component and game color settings | Solid only |
{% hint style="info" %}
Animated Banner projects support solid colors only.
{% 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://help.craftsmanplus.com/play/general/color-selector.md?ask=&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.
