# Color and Alpha Styling

## Understanding Hex Color values

<figure><img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2F7PP09WAA7OE4YV32L32W%2Fimagem.png?alt=media&#x26;token=9f8e80da-c44a-4b7b-ba91-9ba9e7a6b88b" alt="" width="563"><figcaption><p>Colors - UI Styling</p></figcaption></figure>

Hexadecimal is similar to the decimal system (0 to 9) but instead of having 10 digits to count, hexadecimal has 16 (0 \~ 9, A, B, C, D, E, and F). To make it simple to understand, just imagine A being the next number after 9, which is A = 10. Do the same for the rest of the Hexadecimal letters.

Hexadecimal color range: <mark style="color:red;">FF</mark><mark style="color:green;">CC</mark><mark style="color:blue;">88</mark>33

* <mark style="color:red;">**Red:**</mark> <mark style="color:red;"></mark><mark style="color:red;">First two hexadecimal digits of every number</mark> (<mark style="color:red;">FF</mark>000000)
* <mark style="color:green;">**Green:**</mark> <mark style="color:green;"></mark><mark style="color:green;">Second two hexadecimal digits of every number</mark> (00<mark style="color:green;">FF</mark>0000)
* <mark style="color:blue;">**Blue:**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">Third two hexadecimal digits of every number</mark> (0000<mark style="color:blue;">FF</mark>00)
* **Alpha:** Last two hexadecimal digits of every number (000000<mark style="background-color:yellow;">FF</mark>)

<figure><img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FQSqQM2abxrHWyinQOt8f%2Fimagem.png?alt=media&#x26;token=45ca4d35-be77-4481-bc03-47ac942ccb29" alt=""><figcaption><p>Colors - Hexadecimal color range distribution</p></figcaption></figure>

|                Type Value               |                                                                 Description                                                                |
| :-------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
|   <mark style="color:red;">Red</mark>   |             <p>Indicates how much red the image has<br><em>00 = No red , <mark style="color:red;">FF = Full Red</mark></em></p>            |
| <mark style="color:green;">Green</mark> |         <p>Indicates how much green the image has<br><em>00 = No green , <mark style="color:green;">FF = Full Green</mark></em></p>        |
|  <mark style="color:blue;">Blue</mark>  |           <p>Indicates how much blue the image has<br><em>00 = No blue, <mark style="color:blue;">FF = Full Blue</mark></em></p>           |
|                  Alpha                  | <p>Indicates how opaque the image will be<br><em>00 = Transparent, <mark style="background-color:yellow;">FF = Full Opaque</mark></em></p> |

{% hint style="info" %}
*Just for mere curiosity, RGBA Colors (255, 255, 255, 255) values are the decimal way to display the 00\~FF Hexadecimal values. Check more about numerical bases at* [*this website*](https://www.eatyourbytes.com/decimal-binary-and-hexadecimal-numbers-from-0-to-255/)
{% endhint %}

## Color Value Listing

{% hint style="success" %}
Explore all color ranges at [HTMLColorCodes](https://htmlcolorcodes.com/)
{% endhint %}

|                                                                                                                       Color Image                                                                                                                      |    Color    |        RBGA       |     Hex    |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------: | :---------------: | :--------: |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2F15xgh8FnnvgQi6NHKE3V%2Fimagem.png?alt=media&#x26;token=192a0b08-2ec6-4179-9e44-9ffb7322c084" alt="" data-size="line"> | Transparent |     `0,0,0,0`     | `00000000` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FxUvQq0d6uI3Ns0ZJ2uOW%2Fimagem.png?alt=media&#x26;token=2a0ba9e9-7b50-4207-b587-3ec5673b1d88" alt="" data-size="line"> |     Blue    |   `0,0,255,255`   | `0000ffff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FcrUxniRy6UiPmfi169Eq%2Fimagem.png?alt=media&#x26;token=c92df388-bcfd-4783-a6c9-6f1ac9c6747d" alt="" data-size="line"> |     Red     |   `255,0,0,255`   | `ff0000ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FlVsltAQVnEzorZJiGqMk%2Fimagem.png?alt=media&#x26;token=7895b718-a214-4edb-8fe7-3007e388ba84" alt="" data-size="line"> |     Lime    |   `0,255,0,255`   | `00ff00ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FYRAhcDUQYZHak1fzi71Y%2Fimagem.png?alt=media&#x26;token=ca17dbcb-ac36-4562-812b-70c5bcdf3c75" alt="" data-size="line"> |    Black    |    `0,0,0,255`    | `000000ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FPPWTttvuO651fqrkXAG8%2Fimagem.png?alt=media&#x26;token=6f851822-be3d-4779-804c-c914e93a3391" alt="" data-size="line"> |     Gray    | `128,128,128,255` | `808080ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FVwWpTsAuW118j5W1sC4U%2Fimagem.png?alt=media&#x26;token=06986630-5ca7-489c-add6-12593bef2a34" alt="" data-size="line"> |    Silver   | `192,192,192,255` | `c0c0c0ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FABzHc0wr82pGq3W6MoaV%2Fimagem.png?alt=media&#x26;token=5760d08d-6a04-48a4-9d92-a52643ea6283" alt="" data-size="line"> |    White    | `255,255,255,255` | `ffffffff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2F2zU8qgmM5jgWvTIRKUKq%2Fimagem.png?alt=media&#x26;token=113fe77c-5040-41dd-a2db-da0f521e7973" alt="" data-size="line"> |    Maroon   |   `128,0,0,255`   | `800000ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FsSvTdvT1AiGMFrVBRK5t%2Fimagem.png?alt=media&#x26;token=896d993d-59ae-4e7d-b500-e5bb29022b68" alt="" data-size="line"> |    Yellow   |  `255,255,0,255`  | `ffff00ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FDH4QDIqnkWvp9i3PHJHE%2Fimagem.png?alt=media&#x26;token=6ece67d7-d1c8-48d4-841e-bec8cfddba58" alt="" data-size="line"> |     Gold    |  `255,215,0,255`  | `ffd700ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FQJmIKewGmzXv5TRCF2M3%2Fimagem.png?alt=media&#x26;token=5c73e421-8316-422c-a09f-074f91b3a34e" alt="" data-size="line"> |    Olive    |  `128,128,0,255`  | `808000ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FiSjg9TxCuWtKcHZDESkN%2Fimagem.png?alt=media&#x26;token=c631665a-fdbe-4cd4-90f7-5927df33120d" alt="" data-size="line"> |    Green    |   `0,128,0,255`   | `008000ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FMmP3Cxl0ibJc83mklVFU%2Fimagem.png?alt=media&#x26;token=684b943a-b0b3-41d2-874e-8dd06d96f516" alt="" data-size="line"> |     Aqua    |  `0,255,255,255`  | `00ffffff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FHZYP9OFCLP9XskQTSny2%2Fimagem.png?alt=media&#x26;token=3ed17d5d-d113-4ad8-bf9f-5ad831b751f9" alt="" data-size="line"> |     Teal    |  `0,128,128,255`  | `008080ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FNEJ6gAz4VwWyucogJ00O%2Fimagem.png?alt=media&#x26;token=6f699a28-b046-4509-ae4f-ca2d60aca6d4" alt="" data-size="line"> |     Navy    |   `0,0,128,255`   | `000080ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FLDviNPJshdiJeJWSC7w6%2Fimagem.png?alt=media&#x26;token=bc25c45b-41d3-4de5-b8f8-35b5694b903d" alt="" data-size="line"> |    Purple   |  `128,0,128,255`  | `800080ff` |
| <img src="https://484108807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fipb5NkFjq0eBOIGewqlQ%2Fuploads%2FAn5M7IADoXy2BcjQyPvJ%2Fimagem.png?alt=media&#x26;token=34bcca44-ed05-4099-b7ff-bde45102f4ad" alt="" data-size="line"> |   Fuchsia   |  `255,0,255,255`  | `ff00ffff` |


---

# 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://adofaieditor.gitbook.io/english/event-skillful-formatting-and-showcases/decoration-and-text-creative-format/color-and-alpha-styling.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.