> For the complete documentation index, see [llms.txt](https://adofaieditor.gitbook.io/english/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adofaieditor.gitbook.io/english/event-skillful-formatting-and-showcases/decoration-and-text-creative-format/color-and-alpha-styling.md).

# Color and Alpha Styling

From Decoration and Text Creative Format

## 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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;token=34bcca44-ed05-4099-b7ff-bde45102f4ad" alt="" data-size="line"> |   Fuchsia   |  `255,0,255,255`  | `ff00ffff` |