> For the complete documentation index, see [llms.txt](https://docs.mindtrix.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mindtrix.xyz/zh/mindtrix-deisgn-system/ui/colors.md).

# 顏色

Mindtrix color 區分為五大色系：Primary、Secondary、Basic、Notice。我們將顏色劃分為9種程度並使用RGB、Hex色碼顯示，方便設計師和工程師開發上溝通。

## 主要色系

Mindtrix 在色彩上採用PANTONE 2022長春花藍的色調，切分為9種色階，長春花籃具有藍色和紫紅色系結合，象徵實體與虛擬生活也以新的方式融合。它擴展你對生活的定義，迎向充滿活力的web3世界，探索與創造新的可能性。Mindtrix認為這樣概念與我們的產品精神相符合。

<table data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>Hex</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Primary #100</td><td>rgba(230, 230, 250, 1)</td><td>#E6E6FA</td><td><a href="/files/xNhSrarPqko5al0gi0Wz">/files/xNhSrarPqko5al0gi0Wz</a></td></tr><tr><td>Primary #200</td><td>rgba(206, 207, 246, 1)</td><td>#CECFF6</td><td><a href="/files/P7mWpTwpf57xaZgr7E8p">/files/P7mWpTwpf57xaZgr7E8p</a></td></tr><tr><td>Primary #300</td><td>rgba(174, 175, 229, 1)</td><td>#AEAFE5</td><td><a href="/files/bVkQnsMe79T3gezQEf72">/files/bVkQnsMe79T3gezQEf72</a></td></tr><tr><td>Primary #400</td><td>rgba(142, 143, 204, 1)</td><td>#8E8FCC</td><td><a href="/files/NhS9ROKjeERF4UhOtzgT">/files/NhS9ROKjeERF4UhOtzgT</a></td></tr><tr><td>Primary #500</td><td>rgba(102, 103, 171, 1)</td><td>#6667AB</td><td><a href="/files/BQdTqD0MCjTx2FAxMsc0">/files/BQdTqD0MCjTx2FAxMsc0</a></td></tr><tr><td>Primary #600</td><td>rgba(74, 75, 147, 1)</td><td>#4A4B93</td><td><a href="/files/U2rCpvyvyXREVy6PC7GB">/files/U2rCpvyvyXREVy6PC7GB</a></td></tr><tr><td>Primary #700</td><td>rgba(51, 52, 123, 1)</td><td>#33347B</td><td><a href="/files/rhWlu4W501Rtjoh28BDZ">/files/rhWlu4W501Rtjoh28BDZ</a></td></tr><tr><td>Primary #800</td><td>rgba(32, 33, 99, 1)</td><td>#202163</td><td><a href="/files/UGvljf46IqhoLnmJDlfH">/files/UGvljf46IqhoLnmJDlfH</a></td></tr><tr><td>Primary #900</td><td>rgba(19, 20, 82, 1)</td><td>#131452</td><td><a href="/files/CzCDM2Ultl3xMr2talXQ">/files/CzCDM2Ultl3xMr2talXQ</a></td></tr></tbody></table>

## 次要色系

次要色系我們推薦使用主色的對比色進行傳達，抓著使用者最好的目光就是利用對比來呈現。Mindtrix選擇向日葵黃色調，讓用戶在web3的產品間也能清晰的辨別與使用，提高用戶注意力。

<table data-column-title-hidden data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>HEX</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Secondary #100</td><td>rgba(254, 251, 206, 1)</td><td>#FEFBCE</td><td><a href="/files/xEHUzE1bWlOiCmJ8ct0j">/files/xEHUzE1bWlOiCmJ8ct0j</a></td></tr><tr><td>Secondary #200</td><td>rgba(254, 246, 158, 1)</td><td>#FEF69E</td><td><a href="/files/Hz8WmE1nX7g3F5ScAq57">/files/Hz8WmE1nX7g3F5ScAq57</a></td></tr><tr><td>Secondary #300</td><td>rgba(254, 240, 110, 1)</td><td>#FEF06E</td><td><a href="/files/Vh7phuiBynQKEC6EcgGb">/files/Vh7phuiBynQKEC6EcgGb</a></td></tr><tr><td>Secondary #400</td><td>rgba(253, 234, 74, 1)</td><td>#FDEA4A</td><td><a href="/files/9FVP8ClmUx4LdIElNevA">/files/9FVP8ClmUx4LdIElNevA</a></td></tr><tr><td>Secondary #500</td><td>rgba(252, 224, 15, 1)</td><td>#FCE00F</td><td><a href="/files/9doVcEDo11ABZsYgGL8n">/files/9doVcEDo11ABZsYgGL8n</a></td></tr><tr><td>Secondary #600</td><td>rgba(216, 189, 10, 1)</td><td>#D8BD0A</td><td><a href="/files/3wRcJ1XUsx4nbN4WSFi6">/files/3wRcJ1XUsx4nbN4WSFi6</a></td></tr><tr><td>Secondary #700</td><td>rgba(181, 156, 7, 1)</td><td>#B59C07</td><td><a href="/files/msNlMa9tGt83B2L27Uv5">/files/msNlMa9tGt83B2L27Uv5</a></td></tr><tr><td>Secondary #800</td><td>rgba(146, 124, 4, 1)</td><td>#927C04</td><td><a href="/files/qpWE4CA0KyaohMcK7ftt">/files/qpWE4CA0KyaohMcK7ftt</a></td></tr><tr><td>Secondary #900</td><td>rgba(120, 101, 2, 1)</td><td>#786502</td><td><a href="/files/zFgeqEq8LdKr3eZdTYcg">/files/zFgeqEq8LdKr3eZdTYcg</a></td></tr></tbody></table>

## 基礎色系

黑灰白的色調為產品的穩定劑，能讓使用者可以舒適的閱讀，瀏覽產品資訊。

<table data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>Hex</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Basic #100</td><td>rgba(255, 255, 255, 1)</td><td>#FFFFFF</td><td><a href="/files/9sZZmauZM7v0CDf1jZe9">/files/9sZZmauZM7v0CDf1jZe9</a></td></tr><tr><td>Basic #200</td><td>rgba(247, 249, 252, 1)</td><td>#F7F9FC</td><td><a href="/files/MTLr7sBImlx1mxYCgUMN">/files/MTLr7sBImlx1mxYCgUMN</a></td></tr><tr><td>Basic #300</td><td>rgba(237, 241, 247, 1)</td><td>#EDF1F7</td><td><a href="/files/AAUfHTRhRRNTYWMNk28J">/files/AAUfHTRhRRNTYWMNk28J</a></td></tr><tr><td>Basic #400</td><td>rgba(228, 233, 242, 1)</td><td>#E4E9F2</td><td><a href="/files/AZHDxQHCwH6J2UeMSZ5h">/files/AZHDxQHCwH6J2UeMSZ5h</a></td></tr><tr><td>Basic #500</td><td>rgba(197, 206, 224, 1)</td><td>#C5CEE0</td><td><a href="/files/VZtpRdqc9OmiDLBCrGk8">/files/VZtpRdqc9OmiDLBCrGk8</a></td></tr><tr><td>Basic #600</td><td>rgba(143, 155, 179, 1)</td><td>#8F9BB3</td><td><a href="/files/IlmFSdqXaXYvsKfHEv9n">/files/IlmFSdqXaXYvsKfHEv9n</a></td></tr><tr><td>Basic #700</td><td>rgba(46, 58, 89, 1)</td><td>#2E3A59</td><td><a href="/files/miXc8XyF8uTIHWDytkhn">/files/miXc8XyF8uTIHWDytkhn</a></td></tr><tr><td>Basic #800</td><td>rgba(34, 43, 69, 1)</td><td>#222B45</td><td><a href="/files/DrNiYV0yJEJsyefyWOMa">/files/DrNiYV0yJEJsyefyWOMa</a></td></tr><tr><td>Basic #900</td><td>rgba(12, 12, 12, 1)</td><td>#0C0C0C</td><td><a href="/files/DZX9NFYXayMHMUNCfKo3">/files/DZX9NFYXayMHMUNCfKo3</a></td></tr></tbody></table>

## 功能色系

功能色對應到介面的使用狀態：網址、成功、提醒、錯誤，Mindtrix設計系統專注在提醒和錯誤的色系，因為產品要能讓用戶準確知道何時要特別警慎，遇到問題要能輕易排解，我們使用紅色調，紅色在日常生活經驗中具備提醒、錯誤的效果，在產品使用可以加深用戶印象。成功、網址等狀態會參考著主色、次要色系進行使用。

<table data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>Hex</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Danger #100</td><td>rgba(255, 228, 212, 1)</td><td>#FFE4D4</td><td><a href="/files/SkRzlwoYDHnOA7wKOZq7">/files/SkRzlwoYDHnOA7wKOZq7</a></td></tr><tr><td>Danger #200</td><td>rgba(255, 195, 170, 1)</td><td>#FFC3AA</td><td><a href="/files/TkfRZJj6YGKk8FrysTz9">/files/TkfRZJj6YGKk8FrysTz9</a></td></tr><tr><td>Danger #300</td><td>rgba(255, 155, 127, 1)</td><td>#FF9B7F</td><td><a href="/files/UybKweqdZUS167Vi72RZ">/files/UybKweqdZUS167Vi72RZ</a></td></tr><tr><td>Danger #400</td><td>rgba(255, 116, 96, 1)</td><td>#FF7460</td><td><a href="/files/AfnEjmBzEXHRObcdVGY0">/files/AfnEjmBzEXHRObcdVGY0</a></td></tr><tr><td>Danger #500</td><td>rgba(255, 53, 43, 1)</td><td>#FF352B</td><td><a href="/files/n6jWViTQzccTcFaQ3KeO">/files/n6jWViTQzccTcFaQ3KeO</a></td></tr><tr><td>Danger #600</td><td>rgba(219, 31, 38, 1)</td><td>#DB1F26</td><td><a href="/files/uPF37udQ5CyngrjkaPRb">/files/uPF37udQ5CyngrjkaPRb</a></td></tr><tr><td>Danger #700</td><td>rgba(183, 21, 41, 1)</td><td>#B71529</td><td><a href="/files/D1ODJitgct0Adr5UTtGT">/files/D1ODJitgct0Adr5UTtGT</a></td></tr><tr><td>Danger #800</td><td>rgba(147, 13, 41, 1)</td><td>#930D29</td><td><a href="/files/7mUEhvlX9afBInxGTZpZ">/files/7mUEhvlX9afBInxGTZpZ</a></td></tr><tr><td>Danger #900</td><td>rgba(122, 8, 41, 1)</td><td>#7A0829</td><td><a href="/files/L86CJ7g7m2iHiZWopWEX">/files/L86CJ7g7m2iHiZWopWEX</a></td></tr></tbody></table>


---

# 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 dynamically by asking a question.

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

```
GET https://docs.mindtrix.xyz/zh/mindtrix-deisgn-system/ui/colors.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.