Colors 顏色

借助一些共通類別讓顏色的表達具有意義。

主要顏色

翠玉綠：

企業主色為融合藍天與綠地的特別色，象徵著親和力。

藍天代表澄淨清澈，象徵智慧、穩健和值得信賴 ; 綠地代表大自然，象徵朝氣與活力。
$primary-1 #F4F8FA

複製

$primary-2#E1EFEF

複製

$primary-3#BDE3E2

複製

$primary-4#87d4c7

複製

$primary-5#5fc7b9

複製

$primary-6#3cbaad

複製

$primary-7#1cada4

複製

$primary-8#00a19b

複製

$primary-9#007a7a

複製

$primary-10#005154

複製

中性顏色

主要被大量的應用在介面的文字部分，此外背景、邊框、分割線等場景。產品中性色的定義需要考慮深色背景以及淺色背景的差異。結合WCAG2.0（Web 內容無障礙指南），常用文字與白色的對比度滿足大於3。

$gray-1 #FFFFFF

複製

$gray-2#fafafa

複製

$gray-3#f5f5f5

複製

$gray-4#f0f0f0

複製

$gray-5#d9d9d9

複製

$gray-6#acacac

複製

$gray-7#7c7c7c

複製

$gray-8#595959

複製

$gray-9#434343

複製

$gray-10#262626

複製

$gray-11#1c1c1c

複製

$gray-12#141414

複製

$gray-13#000000

複製

根據使用場景，中性色被定義為3 類：文字、邊框及橫線、背景。

背景色
gray-1
gray-2
gray-3
邊框及橫線
gray-4
gray-5
gray-6
文字
gray-6
gray-7
gray-8

產品色

可依照視覺設計自行選用各產品色的色盤進行深淺搭配，當需壓上文字行請留意對比度。

誠信綠/貸款信賴可靠，貸你踏實築夢，成為人生堅實的靠山
$green-1 #ecfdf6

複製

$green-2#d9f7eb

複製

$green-3#87e3bf

複製

$green-4#45d9a5

複製

$green-5#21cc96

複製

$green-6#00c08b

複製

$green-7#009973

複製

$green-8#00735a

複製

$green-9#004d3e

複製

$green-10#0a3c37

複製

清新黃/數位帳戶&會員類別&行動銀行簡單清新，開啟數位簡單生活的鑰匙
$yellow-1 #fffde6

複製

$yellow-2#fff7ba

複製

$yellow-3#ffef91

複製

$yellow-4#ffe369

複製

$yellow-5#ffd640

複製

$yellow-6#ffc517

複製

$yellow-7#d99e09

複製

$yellow-8#b37a00

複製

$yellow-9#8c5b00

複製

$yellow-10#663f00

複製

暖暮橘/理財有溫度、專屬的數位理財服務，開創人生的新局
$orange-1 #fff9e6

複製

$orange-2#ffeac0

複製

$orange-3#ffd77a

複製

$orange-4#ffc552

複製

$orange-5#ffb029

複製

$orange-6#ff9900

複製

$orange-7#d97b00

複製

$orange-8#b35f00

複製

$orange-9#8c4600

複製

$orange-10#663000

複製

熱情紅/信用卡熱情自信，在喜歡的事物上燃燒熱情
$red-1 #fff2f0

複製

$red-2#ffe2de

複製

$red-3#ffc8c2

複製

$red-4#ffa099

複製

$red-5#fc746f

複製

$red-6#ef4343

複製

$red-7#c92e34

複製

$red-8#a31d26

複製

$red-9#7d101b

複製

$red-10#570a15

複製

科技藍/外匯自由自在，讓外匯作為徜徉大海和天空的通行證
$blue-1 #e6fbff

複製

$blue-2#d3f6ff

複製

$blue-3#93e6fe

複製

$blue-4#52d4ff

複製

$blue-5#28c0fc

複製

$blue-6#00a4ef

複製

$blue-7#0083c9

複製

$blue-8#0065a3

複製

$blue-9#00497d

複製

$blue-10#003057

複製

活力桃/玉山證券活力創新，開啟投資第一步
$pink-1 #fff0f4

複製

$pink-2#ffe5ec

複製

$pink-3#ffb9cf

複製

$pink-4#ff80ac

複製

$pink-5#f25290

複製

$pink-6#e62978

複製

$pink-7#bf1964

複製

$pink-8#990c50

複製

$pink-9#73033d

複製

$pink-10#4d022b

複製

功能色

整體文字色
#1C1C1C

複製

備註文字色
#7C7C7

複製

預設按鈕＆連結
#00A19B

複製

錯誤訊息
#c92e34

複製

醒目文字
#F8524C

複製

#E66900

複製

#00A19B

複製

完成狀態
#00a19b

複製

Active狀態
#00A19B

複製

Disable狀態
#ACACAC

複製

顏色使用規範

顏色包含主要顏色（企業主色$primary-8）、次要顏色（產品色、功能色）與中性色（黑灰白），使用合宜的顏色配比，提供更多的層次來強調與區分畫面的資訊，為視覺帶來多樣性。可根據網頁內容與平台屬性調整色彩的比例，分類如下：


平台類：官網、網銀、行銀、流程頁面

範例:

（官網）

（行動銀行）

行銷類：一般行銷活動頁(無特定主題)、行銷活動頁公版、一般行銷活動頁(特定主題*)、特殊行銷活動頁

一般行銷活動頁(無特定主題)、行銷活動頁公版

設計要點 主色需使用對應之產品色，如貸款類外匯類 等，用色規範請參照（圖一），設計方向請參考範例

（圖一）

範例:

正確範例

錯誤範例

特定節慶/季節/商戶聯名/指定客群網頁、重大行銷活動頁

設計要點 顏色不限於DS色盤中，可自由使用符合其氛圍的配色，用色規範請參照（圖二），可依設計使用主色之相近色（圖三）做搭配，設計方向請參考範例

（圖二）

範例:

（特定節慶/季節/商戶聯名/指定客群網頁）

（特殊行銷活動頁）