Discord 並不會在聊天、角色或使用者名稱中原生呈現 CSS 漸層,因此若想在 Discord 中使用色彩漸層,你可以透過瀏覽器工具產生漸層,將其匯出為小型 PNG 或複製 CSS,然後上傳到支援圖片或自訂 CSS 的介面。Color Gradient Generator 上的色彩漸層產生器可讓你視覺化建立線性與放射狀漸層,設定每個色彩停駐點與角度,一鍵就能取得可直接使用的 CSS 或可下載的色票。
使用者搜尋 Discord 漸層最常見的原因,是他們看過某些伺服器的暱稱、角色橫幅、嵌入訊息或歡迎卡片呈現從一個色彩淡出到另一個色彩的效果。Discord 官方功能僅限每個角色使用單一純色,以及每則嵌入訊息使用單一強調色,因此實際的漸層作業必須在 App 外部完成,完成後再將素材匯入 Discord。理解這個分工後,剩下的流程就只是簡短的作業步驟,而不是瞎猜。
為什麼 Discord 預設無法顯示漸層
Discord 中的角色綁定單一的 24-bit RGB 值,用戶端的聊天渲染器將角色色彩繪製為扁平文字樣式。嵌入訊息的左側強調條僅接受一個整數色彩值,同樣也是單一色相。大頭貼橫幅、伺服器圖示與歡迎畫面背景是唯一接受點陣圖影像的位置,因此真正的漸層必須在上傳前烘焙到影像中。像 Color-Chan 這類機器人透過讓每位成員從預設純色清單中選色的方式擴充了角色系統,這是平台本身最接近「使用者身上出現一種以上色彩」的做法。事先了解限制,可以避免在 Discord 根本不開放的功能上白費力氣。
Discord 介面與漸層支援一覽
| Discord 介面 | 接受影像？ | 接受 CSS？ | 僅限純色？ |
|---|---|---|---|
| 角色名稱色彩 | 否 | 否 | 是,單一 HEX |
| 嵌入訊息強調條 | 否 | 否 | 是,十進位整數 |
| 使用者名稱提及 | 否 | 否 | 是,單一 HEX |
| 伺服器橫幅 | 是 (JPG、PNG、GIF) | 否 | 否,完整影像 |
| 伺服器圖示 | 是 (JPG、PNG、GIF) | 否 | 否,完整影像 |
| 歡迎畫面背景 | 是 (JPG、PNG) | 否 | 否,完整影像 |
| 自訂機器人儀表板 | 視情況而定 | 大多數支援 | 視機器人而異 |
使用色彩漸層產生器建立漸層
- 開啟 Color Gradient Generator,選擇 Linear (線性) 以取得方向性淡出,或選擇 Radial (放射狀) 以取得由中心向外混合的效果。
- 點擊第一個色彩停駐點,輸入如 #5865F2 (Discord 官方藍紫色) 的 HEX 值,可透過色彩選擇器或直接輸入。
- 新增第二個停駐點並選擇結束色彩,例如 #EB459E,接著拖曳位置滑桿來控制轉場發生位置。
- 若想要三色或四色混合而非雙色淡出,可使用加號與減號按鈕新增或移除額外的停駐點。
- 對於線性漸層,以度數設定角度,直到方向符合你設計的介面,橫幅通常使用 90 度以由左至右呈現。
- 即時預覽會在你調整時更新,接著點擊 Copy CSS 取得 background-image 宣告,或使用匯出按鈕儲存 PNG 影像以便上傳。
你複製的 CSS 與任何現代瀏覽器使用的語法相同。對於雙停駐點的線性漸層,結果會是單行內容,例如 background: linear-gradient(90deg, #5865F2 0%, #EB459E 100%);。放射狀漸層概念相同,但底層使用 radial-gradient(circle, color1, color2)。由於 Discord 嵌入訊息會忽略背景影像,CSS 主要用於文件、伺服器網站或允許自訂 CSS 的機器人儀表板,而真正會在 Discord 中顯示的是 PNG 匯出檔。
將漸層放入 Discord
匯出漸層影像後,請上傳至 Discord 接受點陣圖的位置。伺服器橫幅、伺服器圖示與歡迎畫面背景影像皆接受 JPG、PNG 與 GIF,且上限為 Discord 公告的尺寸限制;尺寸約 960 乘 540 像素的漸層 PNG 很適合用於橫幅。對於嵌入訊息,請取漸層中主要的中間色,並以整數形式輸入作為嵌入訊息色彩,這等同於將 HEX 轉為十進位。針對角色強調色,請挑選在深色聊天背景上閱讀效果最佳的 HEX,因為大多數 Discord 佈景主題都接近 #202225。若你還需要一套相符的純色調色盤用於機器人角色清單,Color Palette Generator 會根據相同基準色提供互補與類比的色票。
實際情境:為社群伺服器打造品牌
想像一個遊戲社群希望其伺服器橫幅從 Discord 藍紫色淡出至團隊的粉紅色強調色,而成員角色名稱則採用同一漸層中的實心中間色。設計師開啟漸層工具,在 90 度角度下設定 #5865F2 位於 0 百分比,#EB459E 位於 100 百分比,對著深色佈景主題目測預覽,接著匯出 1920 乘 1080 的 PNG 作為橫幅。接著他們從即時預覽的 50 百分比位置取樣,複製該 HEX 作為成員角色色彩,讓聊天文字呼應橫幅,又不強迫 Discord 渲染它無法處理的內容。機器人產生的歡迎卡片將同一張 PNG 作為背景,活動公告則以該中間色的十進位整數版本作為嵌入訊息強調條。三種格式、一個漸層、完全不靠用戶端技巧。
在介面間精準對齊色彩
Discord 的藍紫色官方記載為 #5865F2,其粉紅色強調色為 #EB459E,因此任何追求品牌一致性的漸層都應將至少一個停駐點錨定在這些值上。在 CSS 與 Discord 色彩選擇器之間切換時,請記得 CSS 使用六位數 HEX,而嵌入訊息色彩欄位則預期十進位整數。HEX to RGB Converter 提供通道值,而 RGB to HEX 頁面則反向轉換。如果你需要用於歡迎卡片或活動橫幅的隨機強調色,Random Color Generator 一鍵即可產生 HEX、RGB 與 HSL,與漸層工具搭配使用時,適合用來取得獨特的邊緣停駐點。
Discord 佈景主題的常見漸層配方
在熱門伺服器中有幾組漸層反覆出現,因為它們在深色介面上表現穩定。午夜漸層以 135 度從 #0F0F12 過渡至 #2C2F33,適合電影感或角色扮演伺服器。粉嫩日出以 90 度從 #FFB4A2 過渡至 #E5989B,在歡迎畫面上讀起來柔和。霓虹遊戲配色以 90 度從 #5865F2 過渡至 #EB459E,也就是先前討論的品牌原貌選項。沉靜森林以 180 度從 #1E3A2F 過渡至 #4F6F52,適合讀書與書本社群。這些在 Discord 內部並無特殊之處;它們只是容易以匯出 PNG 形式流通的漸層配方,同時也能產生可用於角色與嵌入訊息條的實心中間色。
讓文字在漸層上保持可讀性
疊在漸層上的文字,其可讀性僅與字母行經路徑上對比最差的位置相當。Color Contrast Checker 套用 WCAG 2.2 公式,這是網頁無障礙審查人員引用的同一標準,並會告訴你選定的文字色彩是否能對每個漸層停駐點通過 AA 或 AAA。請分別測試最亮與最暗的停駐點,因為眼睛讀取的是最差情況而非平均值。若想將相同指引套用於背景影像,請使用色彩選擇器取樣主要色相,並將該單一值送入檢查器。對比不足時,可為橫幅下半部加上微妙的深色疊加層,或將標題移至漸層中通過門檻的區域。
儲存並重複使用最佳漸層
將工具的 Copy CSS 按鈕視為你的資料庫:將成功的漸層連同角度與停駐點位置一起貼入個人筆記檔,這樣在伺服器重新品牌時就能重現。CSS 內容很短,雙停駐點線性漸層通常不超過 80 個字元,純文字檔的擴充性遠勝於憑記憶回想哪張 PNG 屬於哪個伺服器。若想更深入了解 CSS 漸層的底層結構,How to Generate Gradient Color with CSS 指南以額外範例說明相同的語法,而 How to Get a Color Gradient in CSS Without the Guesswork 則專注於色彩停駐點的數學層面。位於 developer.mozilla.org 的 MDN CSS 漸層參考文件是權威規格來源,當你需要支援舊版瀏覽器時可加以查閱。
Discord 漸層上傳疑難排解
如果上傳的橫幅看起來模糊,很可能是來源 PNG 太小;Discord 在大多數用戶端上會將伺服器橫幅拉伸至接近 16:9 比例,因此桌面上請以 1920 乘 1080 匯出以取得清晰結果。如果嵌入訊息色彩看起來不對,請確認你輸入的是十進位整數而非 HEX 字串。如果漸層出現色帶,請將匯出格式由 GIF 改為 24-bit PNG 以提高位元深度,因為 GIF 上限為 256 色,在平滑漸層上會出現可見的條紋。最後,若機器人拒絕你的角色色彩,通常是因為該機器人強制使用固定的允許 HEX 清單,因此請在產生自訂色彩前先查閱機器人文件。
如果你正在權衡選項,Create Perfect Color Gradients in Illustrator 對此有詳細說明。