圖表配色方案與教程
為圖表選擇合適的顏色是非常困難的。我們將嘗試解決這個(gè)問題。
閱讀本文后，您將對(duì)顏色選擇更加自信。而且，如果您完全沒有色彩感，那么這些只是對(duì)良好組合的建議。讓我們談?wù)劚椴嘉覀兏魈幍某Ｒ婎伾e(cuò)誤以及如何避免它們。
本文不會(huì)幫助您找到良好的漸變或陰影。它旨在為折線圖，餅圖，條形圖等不同類別的信息（例如，設(shè)計(jì)，工業(yè)）提供漂亮，明快的顏色。
納迪亞·布雷默（Nadia Bremer）在《布丁》，《紐約時(shí)報(bào)》，《經(jīng)濟(jì)學(xué)人》和《阿克庫拉特》中的FiveThirtyEight中的類別可視化
內(nèi)容
介紹
擴(kuò)展您對(duì)顏色的理解
不要在色輪周圍跳動(dòng)
使用飽和度和亮度使音調(diào)正常工作
使用暖色和藍(lán)色
使用綠色時(shí)，使其變?yōu)辄S色或藍(lán)色
避免純色
避免明亮，飽和的顏色
結(jié)合不同亮度的顏色
使顏色同樣“豐富多彩”
避免與背景對(duì)比度過低
避免與背景形成太多反差
選擇足夠飽和的背景
只是復(fù)制顏色或嘗試了解它們
介紹
我會(huì)談?wù)摵芏嚓P(guān)于飽和度，亮度和色相的問題。這些是HSB（色相，飽和度，亮度）或HSV（色相，飽和度，值）顏色空間：
在從0°到360色調(diào)范圍°，這是典型的色輪：?????
飽和度從0％（灰色）至100％（超級(jí)食品五顏六色!!）：?????
在從0％（黑）亮度/值變化到100％（實(shí)際的顏色）：?????
要將顏色從十六進(jìn)制（例如＃cc0000）或RGB（例如rgb(207, 176, 58)）轉(zhuǎn)換為HSB / HSV，請(qǐng)使用colorizer.org之類的工具。
HSB / HSV的相對(duì)位置是HCL顏色空間。有相同的參數(shù)（色相，色度=飽和度，亮度），但更接近“我們?nèi)绾握嬲吹筋伾?。我們的Datawrapper服務(wù)在顏色選擇器中使用HCL顏色空間：
由于Adobe Photoshop或colorizer.org中沒有HCL，因此這里提到的度數(shù)（例如0°）或百分比均指HSB / HSV顏色空間。
好的，讓我們開始吧。
擴(kuò)展您對(duì)顏色的理解
您可能會(huì)想：“對(duì)于圖表，我需要五種顏色。所以我用綠色，黃色，藍(lán)色和紅色。還有……嗯……也許是橙色？還是紫色！
如果您從小就畫著色書以來就沒有考慮過顏色，那么這種想法是有道理的。
看看這張圖，并將其與主色調(diào)???????????：
貓或狗？作者：Nadia Bremer
圖表上的顏色完全不同。納迪亞使用紅色?，這與普通紅色?不同。綠??-這個(gè)...你甚至可以把它叫做綠色?嗎？
因此，在介紹這些規(guī)則之前，讓我稍微嚇一跳：可以使用數(shù)千種顏色。有黃紅色red，藍(lán)紅色red以及介于兩者之間的所有內(nèi)容。有灰色?，但也有冷灰色cool和暖灰色?。然后是藍(lán)色。好藍(lán)！像這個(gè)?，這個(gè)?，這個(gè)?，這個(gè)?和這個(gè)?。而且我們還沒有談?wù)摮壬忘S色。
你有很多選項(xiàng)。這意味著您可以留在色輪的一小部分中并且仍然有很多選擇。
不要在色輪周圍跳舞
你并不需要采取的顏色從整個(gè)色輪等???????????。當(dāng)該圖僅使用幾種顏色和相鄰的色調(diào)時(shí)，它將顯得更加專業(yè)-因此更加可靠。
在這一點(diǎn)上，看一下色輪是有意義的。Adobe Color或Color Calculator適用于此。用于和諧匹配的
顏色計(jì)算器
許多這些工具提供了和諧的顏色組合。其中之一稱為“正方形”或“筆記本”。不要使用它。它將產(chǎn)生太多的音調(diào)，應(yīng)避免。
在視頻中，我使用Paletton顏色工具，從筆記本組合開始，然后減小距離。請(qǐng)注意顏色組合的美觀程度。
如果距離足夠小，你主要使用的互補(bǔ)或互補(bǔ)色。這是一個(gè)不錯(cuò)的選擇！許多互補(bǔ)色對(duì)可以很好地協(xié)同工作。如有疑問，請(qǐng)始終使用互補(bǔ)色及其鄰居。
因此，讓我們做到這一點(diǎn)-這一次與Adobe顏色：
我們?cè)谄渌伾獳dobe顏色
我們的顏色在色輪上是相反的，因此它們很明顯地互補(bǔ)。萬歲！但是它們也不可用：兩個(gè)橙色的顏色太相似了。一切看起來都那么……明亮。
這是需要更改飽和度和亮度的地方。
使用飽和度和亮度使音調(diào)正常工作
飽和度和亮度與色相同樣重要。實(shí)際上，您只需更改飽和度和亮度即可創(chuàng)建新的顏色。下面兩對(duì)色彩搭配同一色調(diào)，只是用不同的飽和度和亮度：????/????（如果你改變了口氣一點(diǎn)，結(jié)果會(huì)更好：????/????）。
讓我們?nèi)セ氐轿覀兊念伾M合：???????。經(jīng)過飽和度和亮度后，看起來是這樣的：
Adobe Color
I中更合適的互補(bǔ)色使淺青色?和淺橙色des飽和。并使所有顏色變淺（淺橙色除外）。該死，您已經(jīng)可以使用它了！
因此，如果您的顏色組合看起來不完整，則無需立即添加其他色調(diào)。首先更改飽和度和亮度-看看會(huì)發(fā)生什么。
這就是我所做的所有這些調(diào)色板：???????和?????????和???????。它們?nèi)拷苹パa(bǔ)，并且具有不同的飽和度和亮度。
使用暖色和藍(lán)色
信息圖表設(shè)計(jì)師特別喜歡另一種組合：黃色/橙色/紅色和藍(lán)色。例如，查看《南華早報(bào)》的投資組合或《經(jīng)濟(jì)學(xué)人》（PDF）的這份投資組合：與使用紫色或綠色相比，使用這些顏色的頻率更高。
《南華早報(bào)》
的三頁內(nèi)容是因?yàn)檫@些溫暖的顏色加上藍(lán)色對(duì)于區(qū)分類別而言用途廣泛。黃色，橙色和紅色的外觀非常漂亮起來，但人們還是認(rèn)為他們不同的顏色：??????正是我們想要的類別顏色。藍(lán)色比其他任何音調(diào)都更加靈活：無論多么暗，都有很多藍(lán)色?或光，?豐富?或不飽和?，看起來不錯(cuò)，舒緩和專業(yè)。
它們是可用的：色盲的人可以輕松地區(qū)分藍(lán)色和橙色/紅色。
因此，如有疑問，請(qǐng)使用橙色/紅色和藍(lán)色。
使用綠色時(shí)，使其變?yōu)辄S色或藍(lán)色
充滿活力的果嶺在色輪上的六分之一，約90°??至150°??，在120的峰值°??。但是，您不會(huì)找到具有這些顏色的良好信息圖。為什么？
首先，綠色本身非常暗。綠色的光芒變成笨拙的霓虹燈?。為了獲得良好的色調(diào)，您需要使綠色變淺和降低飽和度-比其他顏色要多。這正是《華盛頓郵報(bào)》使用綠色does所做的：
《華盛頓郵報(bào)
》為142°的綠色，但飽和度僅為14％。相同的色相和相同的亮度（100％飽和度：）。這是如何做。
并記住有關(guān)色盲的人：純綠色與紅色，橙色或棕色相結(jié)合對(duì)于他們來說很難區(qū)分。
因此，當(dāng)您使用綠色時(shí)，將其設(shè)置為黃色或藍(lán)色。您可以在文章的開頭看到這樣的例子：除了所有的果嶺?具有獨(dú)特的聲音大于160°（即，它們是更藍(lán)）?????或小于60°（即，越黃）???。在我們已經(jīng)看到的這個(gè)項(xiàng)目中，Nadia使用黃綠色和藍(lán)綠色：
貓還是狗？作者：Nadia Bremer
看起來您可以在圖表中將它們用作兩種不同的顏色：雙贏！
避免純色
“純”色調(diào)位于色輪中正好為60°，120°，180°，240°，300°或360°/ 0°的位置：
這是一個(gè)示例：在HSV / HSB中，此亮藍(lán)色the的色相值為180°，該值飽和度為67％，亮度值為91％。您還可以看到顏色的RGB值：如果至少兩個(gè)值匹配，則顏色為``純''。例如，我們的??是rgb(77, 232, 232)。
為了使顏色更自然和令人愉悅，您可以更改純色的飽和度或使它們更暗。如果您想要明亮，飽和的顏色，請(qǐng)選擇與干凈顏色至少5-10°的混合顏色。
在上圖中，紅色和橙色，藍(lán)色和綠色具有相同的飽和度和亮度。唯一的不同是音調(diào)：紅色?（0°），藍(lán)色?（240°）和綠色?（120°）看起來比橙色?（40°），中等藍(lán)色?（211°）和藍(lán)色綠色?（170?）多汁。?°）。
避免明亮，飽和的顏色
鮮艷的色彩必定會(huì)引起讀者的注意。但是這些讀者不會(huì)感謝您。大多數(shù)人在看到這樣的顏色時(shí)會(huì)有些緊張：“非常飽和，鮮艷的顏色不適合進(jìn)行嚴(yán)肅的，信任的或平靜的[交流]，” Bartram，Patra和Stone在其2017年的文章《圖表中的情感色彩》（PDF）中解釋道。...
如果顏色接近100％飽和度和100％亮度，則它們很可能太亮了。絕對(duì)適用于colors?as?等純色。
“但是我見過見過這么瘋狂的顏色，它們看起來好” -你說的和將調(diào)用像這樣的項(xiàng)目：
文章紐約時(shí)報(bào)關(guān)于播放列表
文章彭博破產(chǎn)?布丁名人
文章
將這些示例中的顏色與Comp?Comp進(jìn)行比較，它們的飽和度更低或更暗。100％的飽和和100％嫩綠?在紐約時(shí)報(bào)變得越來越飽和?也不太飽和，較暗的BLO在彭博社的文章和布丁文章?。
它們保留了鮮艷色彩的有趣，引人注目的效果，但對(duì)眼睛也更容易。
之所以能奏效，是因?yàn)椴级?，《紐約時(shí)報(bào)》和彭博社都有出色的設(shè)計(jì)師。如有疑問，請(qǐng)避免100％飽和度與100％亮度結(jié)合使用。
結(jié)合不同亮度的顏色
有時(shí)我會(huì)遇到圖表，尤其是面積圖，其中相鄰元素的亮度相同。您可以輕松地進(jìn)行檢查：只需將顏色轉(zhuǎn)換為黑白（例如，使用我們的工具）。如果每個(gè)人都具有相同的灰色，則亮度是相同的。
例如，?????在最左邊的圖的樣子?????以灰度顯示。
為了避免出現(xiàn)這種令人討厭的色域，有兩種選擇：
?Исправить в оттенках серого?: изменить яркость каждой области, сделав некоторые цвета ярче, а некоторые темнее, например:????. Так они выглядят в оттенках серого:????
Разделить области, например, белой границей
我強(qiáng)烈建議您選擇第一種方法（如果愿意，您仍然可以使用白色邊框）：顏色將變得更加動(dòng)態(tài)，并且色盲者將感謝您。實(shí)際上，無論膚色如何，每個(gè)人都會(huì)感謝您。
在現(xiàn)實(shí)中，正確的方式來設(shè)置顏色類別是從這樣的梯度選擇顏色：
貽貝配色方案
，所有這些漸變的從亮到暗，以免因顏色有不同的亮度：?????????或?????????。如果您喜歡這種方法，請(qǐng)嘗試使用此調(diào)色板生成器。
使顏色同樣“豐富多彩”
在信息圖中，您通常要突出顯示顏色。有多種方法可以實(shí)現(xiàn)此目的。顏色具有以下特征：
因?yàn)樗麄兪歉诎???
因?yàn)樗鼈冚p得多?
因?yàn)樗麄兏鼜?qiáng)烈???
因?yàn)樗鼈兏蓛?
但是通常您只想突出顯示一種或兩種顏色。其余大多數(shù)應(yīng)該或多或少都具有同等可見性。
如果您使用亮度不同（灰色陰影不同）的顏色，則需要平衡它們。嘗試使明亮的色彩飽和。為黑暗增加更多的飽和度。
或者選擇純度較低的色調(diào)：上圖中，綠色?和藍(lán)色?是非常純凈的，所以我黑暗他們（這是他們?nèi)绾慰创?00％亮度：???）。
然后，我想加入紅......但鮮艷的紅色是過于激烈的色光純正（從0°）?????。所以我有兩個(gè)選擇：
只是變暗：?????。
移動(dòng)色相（并且只有色調(diào)）30°，使之更橙色?????。
我選擇了第二個(gè)，使其更加友好。但是這兩個(gè)選項(xiàng)都可以。
避免與背景對(duì)比度過低
信息圖表數(shù)量驚人，在明亮的背景上使用柔和的顏色。它們通常不是很飽和且非常輕。
這會(huì)導(dǎo)致問題：如果您使用的是小區(qū)域，線條和點(diǎn)，則很難區(qū)分淺色和不飽和色。但是，即使可讀性不是問題，例如對(duì)于大面積區(qū)域，您的信息圖也應(yīng)與背景形成鮮明對(duì)比，以便自信地說：“嘿，我在這里，我有話要說?！?br/>
當(dāng)顏色過飽和度和過淺時(shí)，該怎么辦：
增加飽和度：?????
讓他們暗：?????
或?yàn)榱诉_(dá)到最佳效果一舉兩得：?????
當(dāng)然，這也是一個(gè)品味問題。但是，如果您認(rèn)為顏色太柔和，請(qǐng)嘗試使它們更豐富和更暗?？纯磿?huì)發(fā)生什么。如果進(jìn)展順利，請(qǐng)?jiān)瓨颖Ａ簟?br/>
避免與背景形成太多反差
反之亦然：不要使顏色過暗而在明亮的背景下飽和。如有疑問，請(qǐng)嘗試加亮顏色，消除一些飽和度，然后看看會(huì)發(fā)生什么。
選擇足夠飽和的背景
一旦弄清楚了顏色，就可以使彩色背景看起來不錯(cuò)。但是，這種背景有兩個(gè)很大的缺點(diǎn)：首先，它很容易分散數(shù)據(jù)的注意力。其次，它極大地限制了潛在的色域，因此很難使用。實(shí)際上，背景越飽和，背景越復(fù)雜，因此最好選擇不飽和的顏色。以下是HSB / HSV顏色空間的一些基本規(guī)則：
如果要使用淺色背景，請(qǐng)遠(yuǎn)離亮度小于95％且飽和度大于7％的顏色。
如果要使用深色背景，請(qǐng)將飽和度保持在20％以下。另外，請(qǐng)勿完全變黑?-將亮度保持在10％到25％之間。
只是復(fù)制顏色或嘗試了解它們
很難自己感覺和選擇好的顏色。因此，只復(fù)制精美的組合就可以了。認(rèn)真地說，偷竊并沒有什么可恥的。我寫了整篇文章，探討了從哪里獲得色彩靈感的：電影，藝術(shù)家，其他人的調(diào)色板等（其他信息圖表也是很好的來源）。
如果您想直觀地了解哪些顏色可以很好地搭配使用，請(qǐng)嘗試以下操作：分析它們。以下是一些方法：Unsplash上的
照片樹niko照片
另外，下次創(chuàng)建圖表時(shí)，如果對(duì)顏色不滿意，請(qǐng)在HSV / HSB顏色空間中進(jìn)行分析，例如使用colorizer.org：
選擇一幅您發(fā)現(xiàn)美麗的花朵的圖片，例如一件藝術(shù)品或一張自然照片。然后使用吸管從那里選擇顏色，例如在Photoshop或image-color.com中。在下一個(gè)圖表中嘗試它們。
安裝Adobe Capture，它實(shí)現(xiàn)了相同的想法，但適用于“實(shí)時(shí)圖像”：它使您可以捕獲周圍世界的顏色（令人驚奇的是周圍的顏色變飽和了?。?br/>
手動(dòng)選擇顏色：查看屏幕。你看到什么顏色？他們有多黑暗和富有？哪些陰影接近，色輪相反？
從美麗的圖表中選擇顏色。改變其中一些。他們還好嗎？
顏色的飽和度如何-通過將飽和度增加或減少幾個(gè)（或多個(gè)）百分點(diǎn)，它們會(huì)變得更好還是更壞？
音調(diào)是什么意思？如果僅將音調(diào)改變幾度會(huì)怎樣？
顏色的亮度是否不同？
另外，下次創(chuàng)建圖表時(shí)，如果對(duì)顏色不滿意，請(qǐng)?jiān)贖SV / HSB顏色空間中進(jìn)行分析，例如使用colorizer.org：
顏色的飽和度如何-通過將飽和度增加或減少幾個(gè)（或多個(gè)）百分點(diǎn)，它們會(huì)變得更好還是更壞？
音調(diào)是什么意思？如果僅將音調(diào)改變幾度會(huì)怎樣？
顏色的亮度是否不同？
隨著時(shí)間的流逝，您將從“這很棒，但我不知道為什么”的級(jí)別轉(zhuǎn)到“這是有原因的，很棒的”級(jí)別。而且您會(huì)發(fā)現(xiàn)自己能夠打破越來越多的這些規(guī)則-并且仍然可以創(chuàng)建出色的顏色組合。
