# How to add Custom Colors

You do have the freedom to add and use custom colors throughout [<mark style="color:purple;">**Canvas**</mark>](https://help.canoa.supply/docs/design/www.canoa.supply/canvas). When you select Text, Shapes, Frames, and Areas, you will be given the option to **Set Fill Style** and **Set Stroke Style** with the icons that appear below the selected item. While Canvas offers a few standard color options, there are several ways to apply a custom color to these elements and their borders.

* Fill = the area inside the border
* Stroke = the border

<figure><img src="/files/TvX5mfCdISfPAHib7SXR" alt=""><figcaption><p>Example of the color menu icons in Canvas</p></figcaption></figure>

## Set the Fill Style:

1. Select an item to add color to: **Text**, a **Frame**, a **Shape**, or an **Area**.
2. Click **Set Fill Style** to add color throughout the element.
3. You now have the following options when choosing a color here:
   1. **Double click** into a color **swatch** to edit the color **gradient** and the **opacity** level.
   2. Click the **Plus icon** in the color menu to launch the color gradient and opacity level.
   3. Click the **Eyedropper icon** in the color menu to select a color from your Canvas.
   4. Or, if you know your color code, manually type in a **HEX, RGBA, or HSLA** extension to apply your perfect color.
4. Click throughout the gradient window to choose your color.
5. Adjust the **opacity** of the color by sliding along the opacity bar in the color menu.&#x20;
6. When you have found your perfect color, simply click outside of the color menu to exit.

{% hint style="info" %}
**Pro Tip:** If you are using Google **Chrome** as your web browser, you can use the Eyedropper tool to pick up colors from anywhere on your screen - including outside the browser window!
{% endhint %}

<figure><img src="/files/4tpUDiq5gV4kZFqZl5Sr" alt="" width="375"><figcaption><p>Plus icon and Eyedropper icon located inside the color menus</p></figcaption></figure>

{% hint style="info" %}
**Hint:** Colors are saved per Canvas board.
{% endhint %}

<figure><img src="/files/WA9sovjz7ZzlkUHjuKIZ" alt=""><figcaption><p>Finding our way around all the options in the color menu</p></figcaption></figure>

## Set the Stroke Style:

1. To style the border of a **Frame**, a **Shape**, or an **Area**, select the element and click the **Set** **Stroke Style** icon just below it.
2. You have the same color options as above noted - Steps 3 through 6.
3. Chose the border style: **Solid line, Dashed, or Dotted**.
4. Chose the **thickness** of the border: a weight of 1 through 10.
5. Click outside the color menu to save and exit.

<figure><img src="/files/mDDNr0vDsPemMmliusK1" alt=""><figcaption><p>Example of a Frame with a custom stroke style and color: Solid line with thickness set to 4.</p></figcaption></figure>

We hope this custom color feature allows you to easily bring in your own design and brand standards into Canvas. Learn more about colors by reading these articles here:

{% content-ref url="/pages/MVj4BHmblhoFT5fr0X3z" %}
[How to add Text](/docs/design/how-to-add-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/xUEcVoqSZdlc3RkNj6w7" %}
[How to use the Drawing Tools](/docs/design/how-to-use-the-drawing-tools.md)
{% endcontent-ref %}

{% content-ref url="/pages/pRiHl4qKJR9gOgtimnoN" %}
[How to draw an Area](/docs/design/how-to-draw-an-area.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.canoa.supply/docs/design/how-to-add-custom-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.