找我們做網站
↑
Resources · 配色工具

中國傳統顏色手冊:線上查詢傳統色 CMYK、RGB、HEX 色碼

配色工具發布 2024.03.20更新 2026.10.02閱讀約 4 分鐘
中國傳統顏色手冊:線上查詢傳統色 CMYK、RGB、HEX 色碼

重點整理
中國傳統顏色手冊(colors.ichuantong.cn)依紅、黃、綠、藍、灰白、黑、金銀等主色系收錄傳統色,每個顏色都有名稱,點選後即可看到並複製 CMYK、RGB、HEX 色碼,還附上一段詩詞與可播放的背景音樂。網站為簡體中文介面。

每個城市都有屬於自己的味道與顏色,而每個國家的文化中,都有者屬於自己的傳統色調,今天要介紹的一個免費線上工具是 -「中國傳統顏色手冊」,這個網站收錄了代表中國傳統的色彩,不僅呈現出色碼資訊,還搭配上中國傳統音樂及詩詞,讓閱覽者更能將顏色帶入情境中,是一個能激發想像力的好工具,現在就跟著我們一起看下去吧!

中國傳統顏色手冊 是什麼

「中國傳統顏色手冊」收錄了代表中國傳統的色彩,依照依照紅、黃、綠、藍、蒼、水、灰白、黑和金銀主色系分類,每個分類裡都會配上由主色調延伸出的顏色,也會分別給予名稱,點選後能快速瀏覽 CMYK、RGB、HEX 色碼等資訊,能快速複製色碼,並且網站最貼心的是會在每個顏色中附上詩詞且網頁中左下角能播放音樂,讓使用的在瀏覽顏色的同時給予更多情境上的啟發及延伸。

chinese-color-design-hu-01
chinese-color-design-hu-01

中國傳統顏色手冊 使用教學

第一步:開啟 中國傳統顏色手冊 網站,即可在右下角挑選主色,若覺得圖示不好觀看,也可以將圖示展開瀏覽。

chinese-color-design-hu-02
chinese-color-design-hu-02

第二步:在每個主色內,最多會配上由主色所延伸出來的顏色,在網站的中央提供了色碼,讓使用者能快速瀏覽 CMYK、RGB、HEX 色碼等資訊。

第三步:每個顏色名稱的下方,網站會附上一段詩詞,在網站的坐下角有一個耳機的符號可以播放中國傳統音樂,這些都能更好地給予瀏覽者製造一個情境,激發我們的想像力及創意。

chinese-color-design-hu-03
chinese-color-design-hu-03

 

把傳統色用在網站設計時要注意什麼?

  • 文字對比度:傳統色很多是柔和的中間色,拿來當文字或按鈕底色時,要確認和背景的對比夠高,一般內文建議至少達到 4.5:1,可用線上對比檢查工具測試。
  • 螢幕有色差:不同螢幕顯示的顏色不完全一樣,挑色後在手機和電腦上都看一次。
  • 控制用色數量:一個網站通常選一個主色、一個輔助色,其餘用中性色,傳統色再漂亮也不要全部用上。
  • 名稱僅供參考:同一個傳統色名稱,在不同資料來源可能對應不同色碼,品牌色要以自己確定的色碼為準。

常見問題

中國傳統顏色手冊的色碼可以直接用在網站上嗎?

可以。HEX 色碼可以直接填進 CSS 或 WordPress 主題的顏色設定,RGB 也能使用。CMYK 數值是給印刷用的,印刷品實際顏色會受紙張與印刷方式影響,正式印製前最好先打樣確認。

網站是簡體中文,看不懂怎麼辦?

網站文字不多,主要是顏色名稱、色碼與詩詞,簡體字閱讀上不太有障礙;也可以用瀏覽器內建的翻譯功能轉成繁體中文。色碼本身是數字,不受語言影響,直接複製即可。

有日本傳統色的查詢網站嗎?

有,例如 NIPPON COLORS(nipponcolors.com)收錄了日本傳統色,每個顏色同樣有名稱與 RGB、CMYK、HEX 色碼。想做日系或和風配色時,可以拿來和中國傳統色對照使用。

結語

「中國傳統顏色手冊」最特別的就是網站利用音樂及詩詞替使用者製造情境,幫助使用者在觀看每個顏色時,在腦海中想像每個顏色的家世背景與個性,有香水品牌推出城市香,我認為每個城市也有屬於自己的樂曲及顏色。

Free Icons 可商用免費開源圖示下載網站,找到你理想的icon!
Animated icons 2.0 動態圖標Icon-提高你的網站豐富度!
Free Icons 可商用免費開源圖示下載網站,找到你理想的icon!
Health icons 可商用免費圖示下載網站,找到你的工作小幫手!

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。