您當前的位置:首頁 > 體育

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

作者:由 王從安 發表于 體育時間:2022-05-03

參考:《凱莉的22種最大對比度顏色》

原文:《20 種簡單、不同的顏色列表》2017 年 1 月 11 日 薩沙·特魯別茨科伊

經常會有需求,對圖表、分類等資料進行配色,隨機的顏色極有可能是肉眼難以分辨的兩種顏色,而手動配色也是一件極為繁瑣的事,現在有20種漂亮的顏色可供你選擇,且非常容易識別,針對人群可識別顏色的覆蓋率也有區分。

95%的人可辨別

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

95%的人可辨別色卡效果

顏色值列表:

‘#e6194B’, ‘#3cb44b’, ‘#ffe119’, ‘#4363d8’, ‘#f58231’, ‘#911eb4’, ‘#42d4f4’, ‘#f032e6’, ‘#bfef45’, ‘#fabed4’, ‘#469990’, ‘#dcbeff’, ‘#9A6324’, ‘#fffac8’, ‘#800000’, ‘#aaffc3’, ‘#808000’, ‘#ffd8b1’, ‘#000075’, ‘#a9a9a9’, ‘#ffffff’, ‘#000000’

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

95%的人可辨別線條效果

注意:這只是為了測試對比度。不要在真實折線圖中使用超過 5 種顏色。

99%的人可辨別

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

99%的人可辨別色卡效果

‘#e6194B’, ‘#3cb44b’, ‘#ffe119’, ‘#4363d8’, ‘#f58231’, ‘#42d4f4’, ‘#f032e6’, ‘#fabed4’, ‘#469990’, ‘#dcbeff’, ‘#9A6324’, ‘#fffac8’, ‘#800000’, ‘#aaffc3’, ‘#000075’, ‘#a9a9a9’, ‘#ffffff’, ‘#000000’

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

99%的人可辨別線條效果

99。99%的人可辨別

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

99。99%的人可辨別色卡效果

‘#ffe119’, ‘#4363d8’, ‘#f58231’, ‘#dcbeff’, ‘#800000’, ‘#000075’, ‘#a9a9a9’, ‘#ffffff’, ‘#000000’

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

99。99%的人可辨別線條效果

100%的人可辨別

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

100%的人可辨別色卡效果

‘#ffe119’, ‘#4363d8’, ‘#a9a9a9’, ‘#ffffff’, ‘#000000’

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

100%的人可辨別線條效果

在製作我的 Roman Roads 專案時,我遇到了一個問題。挑戰是為地鐵系統圖對 20 條不同的鐵路線進行顏色編碼,我發現自己花費了過多的時間來選擇顏色。不管我做什麼,有些顏色太相似了,很容易混淆。

(更新:我用重複的顏色代替,給每一行編號,並確保相同顏色的線條彼此相距很遠。)

我想,我肯定不是第一個遇到這個問題的人。所以我做了一些谷歌搜尋,發現了 凱利的 22 種最大對比度顏色。不幸的是,在凱利列表的底部,事情變得有點複雜。

橙黃色

紫紅色

黃褐色

紅橙色

似乎都融合在一起了。不僅如此,沒有十六進位制三元組,也沒有 RGB 或 CMYK 值。

我在網上找到的每一個顏色列表都遇到了同樣的問題。所以我自己做了,顏色是:

易於區分

高雅明亮

給定簡單直觀的名稱

提供十六進位制、RGB 和 CMYK 值

事不宜遲,我列出了我自己的 20 種簡單且視覺上截然不同的顏色列表,以及黑色和白色。

我已經安排了“方便”的順序,例如,如果您想要六種顏色,只需選擇前六種。顏色順序的靈感來自於它們在世界所有地鐵地圖上出現的頻率(是的,我確實數過了它們!)。

某些顏色名稱(如藍色或綠色)與典型的 HTML 或 RGB 約定不匹配。我故意這樣做,以進一步區分顏色。各種色彩空間之間的轉換並不精確,但根據我的經驗,它們執行良好。

更新 2:現在具有可訪問性!在 色盲模擬器和這個頁面列出 色盲頻率的幫助下,我添加了一個功能,允許使用者選擇他們正在尋求可訪問性的人口百分比:

大約 95% 的普通人群具有正常的色覺,並且可以完全使用原始調色盤。

另外 4% 的人口具有所有三種類型的視錐細胞 (RGB),但紅色或綠色視錐細胞可能功能不全,因此更難以區分綠色/黃色和藍色/紫色組合。我刪除了一些彼此太接近的顏色,例如橄欖色,它變成了棕色。

另有 1% 的人口缺少紅色或綠色視錐細胞。粗略地說,他們將波長長於青色(例如紅色、綠色)的顏色視為黃色,而將波長短於青色(例如紫色)的顏色視為藍色。由於它們看起來具有相同的色調,因此唯一的區別因素是亮度和色度。橙色和黃色仍然可以區分,但橙色看起來像更深的黃色。

最後 0。01% 的人口可能有較弱或缺失的藍色視錐細胞,只有一種視錐細胞,或者根本沒有視錐細胞。患有三色盲(弱藍色視錐細胞)的人幾乎可以很好地看到整個光譜,而患有三色視眼(沒有藍色視錐細胞)的人大致可以看到黃色到紫色為青色,洋紅色到橙色為紅色。然而,這是一種非常罕見的情況,以至於我為最低公分母量身定製了最終選擇:無法區分任何色調的人。黃色變成淺灰色,藍色變成深灰色。

資料補充:

20 種不同的顏色列表(線路圖表折線圖輕鬆易分辨的配色、肉眼高辨識度可區分的顏色、最大對比度顏色)【轉】

凱莉的22種最大對比度顏色

標簽: 顏色  辨別  視錐  99%  色卡