Okabe-Ito 調色盤：精確色碼與無障礙使用指南

原始 Okabe-Ito 調色盤包含 8 種顏色：橙色 #E69F00、天藍色 #56B4E9、藍綠色 #009E73、黃色 #F0E442、藍色 #0072B2、硃紅色 #D55E00、紅紫色 #CC79A7 和黑色 #000000。它適合表示類別，不適合編碼連續數值，也不能讓顏色獨自承擔資訊。

核心要點

• 用這 8 種顏色區分類別，不要表示連續數值。
• 在不同工具中保持完全一致的 Hex 與 RGB 色值。
• 同時使用標籤、形狀、圖案或線型。
• 按最終背景檢查黃色等淺色。
• 使用文件明確支援的擴充套件，不要假設某個 API 內建存在。
• 類別超過 8 個時，應改變編碼策略。

快速回答：什麼是 Okabe-Ito 調色盤？

Okabe-Ito 調色盤是一組用於區分圖中類別的 8 色定性調色盤，包括橙色、天藍色、藍綠色、黃色、藍色、硃紅色、紅紫色和黑色。原始色值來自 Okabe 與 Ito 的 Color Universal Design 指南。該指南於 2002 年首次發布，2008 年修訂，目標是讓有無色覺缺陷的人都更容易辨認圖形。（Okabe & Ito, 2008）

當一種色相代表一個類別，例如處理組、物種或實驗條件時，可以使用 Okabe-Ito 調色盤。它不是從低到高的順序色階，也不是圍繞中點的發散色階。（EasyStats, 2026；Okabe & Ito, 2008）這個區別比選擇哪一個繪圖函式庫更重要。

八種顏色速查

下表保留原始順序，並給出可直接用於圖表、設計與 CSS 工作流的十進位 RGB 值。（Okabe & Ito, 2008）

明確寫出原始順序可以避免軟體變體悄然改變結果。Base R 的命名版本會加入灰色，並可能把黑色放在首位；某些擴充套件還使用另一種黃色。（EasyStats, 2026；R Core Team, 2026）為了復現，應把選定色值寫進繪圖原始檔，而不是隻記錄調色盤名稱。

調色盤能保證什麼，不能保證什麼

這組顏色用於改善常見色覺缺陷人群對類別的辨別。（Okabe & Ito, 2008）它不能保證每一對顏色在灰階模式下仍可分辨，也不能保證淺色與白底的對比充分，更不能讓僅靠顏色傳遞的資訊自動滿足無障礙要求。（Okabe & Ito, 2008；World Wide Web Consortium, 2024）

重要： 請用直接標籤、標記形狀、線型、圖案或邊界補充顏色。W3C 要求資訊不能只依賴顏色，因此調色盤只是無障礙圖形的一部分，不是通過與否的證明。（World Wide Web Consortium, 2024）

發布前應按實際尺寸和最終背景檢查成圖。白底上的細黃色線尤其需要注意；單色輸出也應透過標籤或其他冗餘編碼保留含義。（Okabe & Ito, 2008）

Okabe-Ito 調色盤的 Hex、RGB 與顏色名稱

Okabe-Ito 調色盤包含 8 種以 sRGB Hex 和十進位 RGB 三元組表示的分類顏色。請在不同工具中使用同一組數值，但不要把來源順序當成適用於所有資料集的繪圖順序。（Okabe & Ito, 2008）

可直接複製的顏色表

每個 RGB 三元組依次列出紅、綠、藍三個通道。

製作可復現科研圖時，為每種顏色保留一個命名常量，並在所有繪圖環境中重複使用。這樣可以避免“blue”解析成軟體預設藍色而不是 #0072B2，以後也能直接審計原始碼，無需從匯出圖片中取色。

實用的繪圖順序

Okabe-Ito 調色盤沒有適合所有資料集的唯一順序。把最重要的類別對映為藍色或硃紅色，再按語義優先順序安排其餘顏色，不要盲目迴圈色表。黑色可保留給參考、對照或基線；相鄰系列儘量在色相與明度上交替。

完成對映後應保持穩定：同一類別在所有面板、圖例和相關圖表中使用同一顏色。若兩個系列在最終尺寸下仍過於相似，請增加直接標籤、標記形狀或線型，而不是在每個面板重新排列顏色。

背景與黃色可見度

黃色必須結合背景檢查。按 WCAG 2.2 的 sRGB 相對亮度公式計算，#F0E442 與白色的對比度為 1.32:1，本文將結果四捨五入到兩位小數。（World Wide Web Consortium, 2024）

該數值低於相鄰圖形物件或其必要邊界的 3:1 目標。（World Wide Web Consortium, 2024）即使色相不同，細小黃色標記仍可能難以發現。黃色更適合較大的標記、深色背景或帶深色邊界的物件；輪廓、符號和標籤也能提供幫助。

橙色與天藍色的亮度接近，單色輸出可能壓縮兩者的視覺差異。（World Wide Web Consortium, 2024）應在實際畫布和匯出尺寸上測試，而不是隻檢視獨立色塊。

關鍵數字

• 原始分類色組包含 8 種顏色（Okabe & Ito, 2008）
• 黃色與白色的對比度為 1.32:1（World Wide Web Consortium, 2024）
• 橙色與天藍色僅按亮度計算的對比度約為 1.025:1（World Wide Web Consortium, 2024）

Okabe-Ito 調色盤的來源

Okabe-Ito 調色盤源於 Masataka Okabe 與 Kei Ito 的 Color Universal Design 指南。材料始於 2002 年，並於 2008 年修訂。目標是讓有無色覺缺陷的人都更容易辨認圖形與簡報，同時用標籤、形狀或線型補充顏色。（Okabe & Ito, 2008）

Okabe 與 Ito 的 Color Universal Design 指南

原始指南不只是漂亮色值的列表。它把顏色視為資訊系統的一部分，並建議在顏色承載含義時加入冗餘編碼。（Okabe & Ito, 2008）脫離這一設計方法只複製色值，會漏掉調色盤最重要的使用原則。

為什麼它有時被稱為 Wong 調色盤

Bang Wong 在 2011 年的 Nature Methods 專欄中向科研讀者介紹了為色盲讀者最佳化的顏色，使這組顏色在科研作者中得到更廣傳播。（Wong, 2011）

因此它有時被稱為 Wong 調色盤，但 Wong 並不是創始人。（Wong, 2011, 2023）2023 年的作者更正補回了指向 Okabe 與 Ito 2002 年演示材料的連結。（Wong, 2023）

更正記錄了一個具體遺漏： 2011 年文章缺少指向 Kei Ito 與 Masataka Okabe 2002 年演示材料的連結。（Wong, 2023）

完整來源鏈是：2002 年起源、2008 年修訂、2011 年專欄傳播、2023 年更正。Okabe 與 Ito 制定了指南，Wong 後來把它介紹給更廣泛的科研讀者。（Okabe & Ito, 2008；Wong, 2011, 2023）

原始 8 色與軟體變體

可直接複製的原始版本有 8 種顏色，以黑色結尾。（Okabe & Ito, 2008）軟體實現可以不同，但不能據此改寫來源版本。Base R 的命名版本包含 9 種顏色，加入 #999999 灰色，並可能把黑色放在首位。（EasyStats, 2026；R Core Team, 2026）

某些擴充套件預設用 #F5C710 琥珀色替換原始黃色，除非選擇原始黃色選項。（EasyStats, 2026）為了復現，請記錄確切順序和 Hex 值，而不要只寫“Okabe-Ito 調色盤”。

術語表

• Color Universal Design（CUD）： 讓不同色覺人群更容易辨認顏色編碼資訊的設計指南。（Okabe & Ito, 2008）
• Wong 調色盤： 與 Wong 2011 年科研製圖專欄相關的後期名稱，不代表另一套起源。（Wong, 2011, 2023）
• 調色盤變體： 軟體對顏色數量、順序或具體 Hex 值所做的更改。
• CVD： 色覺缺陷（Color-vision deficiency）。
• 分類調色盤： 把不同顏色分配給離散類別。
• 冗餘編碼： 使用形狀、線型等第二種線索表達同一差異。（Okabe & Ito, 2008；World Wide Web Consortium, 2024）

在 Python、R、MATLAB 與 CSS 中使用 Okabe-Ito 顏色

最穩妥的跨平臺做法，是明確寫出相同的 8 個 sRGB 色值，再把列表傳給各繪圖 API。這樣可以避免命名調色盤加入灰色、改變順序或替換黃色。（EasyStats, 2026；Okabe & Ito, 2008；R Core Team, 2026）

在 Matplotlib 中使用 Python

Matplotlib 可用 set_prop_cycle 為單個 Axes 應用顏色列表。（Matplotlib Development Team, 2026）先定義一次，再讓連續繪圖呼叫依次使用這些顏色。

import matplotlib.pyplot as plt

okabe_ito = [
 "#E69F00", "#56B4E9", "#009E73", "#F0E442",
 "#0072B2", "#D55E00", "#CC79A7", "#000000",
]

fig, ax = plt.subplots()
ax.set_prop_cycle(color=okabe_ito)
for column in data.columns:
 ax.plot(data.index, data[column], label=column)
ax.legend()

只有希望把它設為整個會話的預設值時，才使用 plt.rcParams["axes.prop_cycle"]。Axes 級顏色迴圈不容易意外影響無關圖形。

在 Seaborn 中使用 Python

Seaborn 的 set_palette 接受列表型調色盤，並更新 Matplotlib 顏色迴圈。（Waskom, 2024）請直接傳入色值，不要假設存在已記錄的命名預設。

import seaborn as sns

okabe_ito = [
 "#E69F00", "#56B4E9", "#009E73", "#F0E442",
 "#0072B2", "#D55E00", "#CC79A7", "#000000",
]
sns.set_palette(okabe_ito)

在 Base R 與 ggplot2 中使用

Base R 提供 palette.colors(palette = "Okabe-Ito")，但其 9 色實現包含灰色，並可能先排列黑色。（R Core Team, 2026）需要與其他軟體嚴格匹配原始 8 色時，請使用顯式向量。

okabe_ito <- c(
 "#E69F00", "#56B4E9", "#009E73", "#F0E442",
 "#0072B2", "#D55E00", "#CC79A7", "#000000"
)

# Base graphics
palette(okabe_ito)
plot(x, y, col = group, pch = 16)

# ggplot2
library(ggplot2)
ggplot(df, aes(x, y, colour = group, fill = group)) +
 geom_point(shape = 21, size = 3) +
 scale_colour_manual(values = okabe_ito) +
 scale_fill_manual(values = okabe_ito)

ggplot2 core 記錄的是手動離散色階，並不提供 scale_color_okabeito()。該函式由 see 擴充套件記錄為 see::scale_color_okabeito()。（EasyStats, 2026；Posit, 2026）寫明包名可以避免程式碼在只有 ggplot2 的環境中失敗。

在 MATLAB 中使用 colororder

MATLAB 的 colororder 接受 n×3 RGB 三元組矩陣。先把 0–255 的數值除以 255；colororder 從 R2019b 起可用。（MathWorks, 2026）

okabeIto = [
 230 159 0
 86 180 233
 0 158 115
 240 228 66
 0 114 178
 213 94 0
 204 121 167
 0 0 0
] / 255;

ax = axes;
colororder(ax, okabeIto)
plot(ax, x, Y, 'LineWidth', 1.5)

CSS 自定義屬性

CSS 沒有繪圖調色盤登錄檔。把顏色存為自定義屬性，再在 SVG 圖表、圖例和介面樣式中一致引用。語義化名稱也比在樣式表、模板和嵌入圖形中搜尋重複 Hex 更容易維護。

:root {
 --oi-orange: #e69f00;
 --oi-sky-blue: #56b4e9;
 --oi-bluish-green: #009e73;
 --oi-yellow: #f0e442;
 --oi-blue: #0072b2;
 --oi-vermillion: #d55e00;
 --oi-reddish-purple: #cc79a7;
 --oi-black: #000000;
}

.series-a { color: var(--oi-orange); }
.series-b { color: var(--oi-sky-blue); }

哪一種實現真正內建

匯出前請確認：專案只有一份權威顏色陣列；類別順序在面板和圖例中一致；任何軟體變體都有記錄；顏色配有標籤、標記、線型或圖案；黃色已按最終背景檢查。共享陣列應視為圖形資料契約的一部分，而不只是視覺樣式。

何時在圖表與科研圖中使用這組顏色

當顏色用於區分沒有內在順序的命名組別，例如處理組、物種、儀器、方法或圖示模組時，使用 Okabe-Ito 調色盤。不要把 8 種色相排成從低到高的梯度，也不要用它表示圍繞中點的正負偏差。後兩種任務需要用明度和方向表達數值的連續色階。

分類資料、順序資料與發散資料

Okabe 與 Ito 的指南用 8 種顏色區分類別，不用於編碼從低到高的數值梯度。它還建議冗餘編碼，因此可發布圖形應同時使用標籤、形狀、線型、圖案或其他線索，而不能讓色相獨自承載含義。（EasyStats, 2026；Okabe & Ito, 2008）

折線、條形、點圖、圖示與熱圖

折線圖應為每個系列保持一種色相，並增加線型或點標記。單系列長條圖已有長度表達數值，通常統一顏色比每根柱子換色更清楚；只有柱子確實代表不同名義組時才使用多種色相。圓餅圖應保留直接切片標籤和圖例，而不是隻靠顏色識別比例。W3C 要求在顏色傳遞資訊時提供非顏色線索。（World Wide Web Consortium, 2024）

FigEditor 長條圖製作器支援分組與堆疊比較，圓餅圖製作器把百分比標籤放在切片旁。兩者都遵循同一原則：顏色對應類別，而不是數值排名。矩陣資料應使用熱圖生成器：低到高用順序色階，圍繞有意義中點的數值用發散色階。

三步應用 Okabe-Ito 調色盤

1. 定義類別並複製精確色值。 在設定圖表樣式前，把每個類別與 Hex 的對應關係記錄在源資料旁。
2. 為每個類別分配一種穩定顏色。 在面板、圖例、圖說、標記和圖示節點中保持該對應關係。
3. 檢查最終圖形。 凡是顏色承載含義的地方，都增加直接標籤、標記形狀、線型、邊界或圖案，再按最終背景、輸出尺寸、灰階檢視和期刊匯出格式檢查。

處理柵格科研圖時，可在 FigEditor Studio 的 Recolor 中使用最多 4 個自定義 Hex。為不超過 4 個功能組選擇明確的 Okabe-Ito 子集，並檢查重新著色後所有科學關係與標籤是否仍然正確。

類別對映比色板順序更重要。在所有面板中始終用藍色表示對照、硃紅色表示處理，可以減少讀者重新學習；每個面板更換角色會破壞分類系統的意義。

發布前的無障礙限制與檢查

Okabe-Ito 的 8 種分類顏色用於提升有無色覺缺陷人群的可辨別性。這表示它對 CVD 更友好，不表示在所有場景都無障礙。WCAG 2.2 另行要求顏色不能成為唯一線索，必要圖形邊界還可能需要達到 3:1 對比度。（Okabe & Ito, 2008；World Wide Web Consortium, 2024）

不要只依賴顏色

請在成圖上檢查，而不是隻看色塊：

• 為每個類別提供直接標籤或名稱明確的圖例。
• 類別重疊時增加標記、線型、形狀、圖案或邊界。
• 不要讓說明只寫“綠色線”而沒有其他標識。
• 暫時忽略顏色，確認讀者仍能完成預期比較。

最後一項檢查針對 WCAG 的 color-alone 規則，並不保證單色渲染保留所有差異。（World Wide Web Consortium, 2024）

檢查對比度與淺色

文字對比與圖形物件對比是不同測試。標籤應按相應文字標準與背景比較；必要的柱、點、控制元件和相鄰邊界應按圖形物件標準檢查。當兩個填充色達不到 3:1 時，對比輪廓可能提供幫助。（World Wide Web Consortium, 2024）

按本文計算，黃色 #F0E442 與白色只有 1.32:1 對比度，因此細黃色標記或黃色文字可能在白底上消失。（World Wide Web Consortium, 2024）

警告： 通過 CVD 模擬，不代表文字對比、圖形物件對比、非顏色編碼或灰階輸出也符合要求。請在最終背景和發布尺寸下分別檢查。（World Wide Web Consortium, 2024）

用灰階測試找問題，但不要承諾灰階安全

灰階會把色相壓縮為明度。橙色與天藍色的相對亮度幾乎相同，因此在彩色模式下可分辨的類別可能在單色預覽中合併。（World Wide Web Consortium, 2024）把灰階預覽當作找問題的方法，並在發布版本中保留標籤或線型。

類別超過 8 個怎麼辦

原始色組只有 8 種顏色。（Okabe & Ito, 2008）需要更多類別時，不要臨時創造難以區分的近似色。可以合併類別、拆分為分面、直接標註，或增加形狀與線條圖案等第二編碼。跨分面重複使用穩定對映，通常比把一個圖例擴充套件到 8 色以上更清楚。

常見問題

這組 8 色分類調色盤幫助許多色覺缺陷讀者區分資料系列，但不能認證對比度、灰階分離或僅靠顏色的資訊傳遞。應同時使用標籤、形狀、圖案或線型，並在最終環境中測試成圖。（Okabe & Ito, 2008；World Wide Web Consortium, 2024）

Okabe-Ito 調色盤用於科研圖時對色盲安全嗎？

它的設計目標是讓許多色覺缺陷讀者更容易區分顏色，但這不是全面無障礙保證。對比度、標記尺寸、背景、灰階輸出以及是否只靠顏色傳遞資訊仍然重要。請為每種顏色增加標籤、形狀、圖案、邊界或線型，並測試最終圖形。（Okabe & Ito, 2008；World Wide Web Consortium, 2024）

為什麼 Okabe-Ito 調色盤也被稱為 Wong 調色盤？

Bang Wong 在 2011 年的 Nature Methods 專欄中向科研讀者介紹了這組顏色，因此有人稱它為 Wong 調色盤。更早的 Color Universal Design 指南由 Okabe 與 Ito 制定。2023 年的更正補回了指向 2002 年原始演示材料的連結，所以“Okabe-Ito 調色盤”是更清楚的歸屬。（Wong, 2011, 2023）

ggplot2 或 Base R 是否內建 Okabe-Ito 調色盤？

ggplot2 core 不提供 scale_color_okabeito()，應把顯式 Hex 向量傳給 scale_colour_manual() 或 scale_fill_manual()。see 擴充套件記錄了 scale_color_okabeito()，Base R 則透過 palette.colors() 提供命名版本。使用前應核對包名和具體顏色順序。（EasyStats, 2026；Posit, 2026；R Core Team, 2026）

超過 8 個類別時應怎樣使用 Okabe-Ito 調色盤？

原始調色盤只提供 8 種分類顏色。更多類別不應靠新增相近色解決，因為差異會變得難以辨認。請合併相關類別、把圖拆成分面、直接標註，或把顏色與形狀和線型結合。跨面板重複穩定的類別對映，比擴充套件擁擠的單一圖例更可靠。（Okabe & Ito, 2008）

Okabe-Ito 調色盤在灰階模式下仍然有效嗎？

不能保證。圖形轉換為灰階後，色相差異會消失；橙色與天藍色的計算亮度幾乎相同。請把灰階預覽當作發現失敗的方法，並用直接標籤、標記形狀、圖案或不同線型保留含義，而不是依賴彩色版本中的可辨別性。（World Wide Web Consortium, 2024）

白色背景上可以使用 Okabe-Ito 黃色嗎？

應謹慎使用。按 WCAG 2.2 相對亮度公式，#F0E442 與白色的對比度約為 1.32:1，低於必要圖形物件或邊界的 3:1 目標。可以改用更大的標記、深色背景、對比輪廓或另一種顏色，並在最終匯出尺寸下檢查。（World Wide Web Consortium, 2024）

原始與擴充套件 Okabe-Ito 調色盤有什麼區別？

來源版本包含 8 種顏色，並以黑色結尾。軟體變體可能加入灰色、重新排列順序，或用琥珀色替換原始黃色。因此“擴充版”並不代表統一標準。請在程式碼或圖形方法中記錄確切 Hex 列表和順序，讓合作者能夠復現同一組顏色。（EasyStats, 2026；Okabe & Ito, 2008；R Core Team, 2026）

結論：把 Okabe-Ito 當作系統，而不是保證

Okabe-Ito 調色盤最適合作為一套協同的分類系統。先採用 8 個精確 sRGB 色值，只用於分類資料，再讓每個類別在圖表、程式碼和匯出圖中保持同一對映。（Okabe & Ito, 2008）同時加入直接標籤、標記形狀、線型、圖案或對比邊界。

重要： 這套顏色不會自動讓圖形全面無障礙。黃色與白色只有 1.32:1 對比度，橙色與天藍色按 WCAG 計算的相對亮度幾乎相同。（World Wide Web Consortium, 2024）發布前應按最終尺寸、背景、顯示模式和可能的列印條件檢查。

在 Python、R、MATLAB 或 CSS 中，請使用有文件支援的 API，並寫明所用的確切變體。調色盤只完成分類配色的第一層；冗餘編碼與情境檢查才會覆蓋灰階輸出、淺色背景和 8 個以上類別等真實發布條件。（Okabe & Ito, 2008；World Wide Web Consortium, 2024）

參考文獻

1. EasyStats. (2026). Okabe-Ito color palette. https://easystats.github.io/see/reference/scale_color_okabeito.html
2. MathWorks. (2026). colororder: Set or query color order palette. https://www.mathworks.com/help/matlab/ref/colororder.html
3. Matplotlib Development Team. (2026). matplotlib.axes.Axes.set_prop_cycle. https://matplotlib.org/stable/api/_as_gen/matplotlib.axes.Axes.set_prop_cycle.html
4. Okabe, M., & Ito, K. (2008). Color Universal Design (CUD): How to make figures and presentations that are friendly to colorblind people (Original work published 2002). https://jfly.uni-koeln.de/color/index.html
5. Posit. (2026). Create your own discrete scale. https://ggplot2.tidyverse.org/reference/scale_manual.html
6. R Core Team. (2026). Set or view the graphics palette. https://stat.ethz.ch/R-manual/R-devel/library/grDevices/html/palette.html
7. Waskom, M. (2024). seaborn.set_palette. https://seaborn.pydata.org/generated/seaborn.set_palette.html
8. Wong, B. (2011). Points of view: Color blindness. Nature Methods, 8(6), 441. https://doi.org/10.1038/nmeth.1618
9. Wong, B. (2023). Author correction: Points of view: Color blindness. Nature Methods, 20(8), 1266. https://doi.org/10.1038/s41592-023-01974-0
10. World Wide Web Consortium. (2024). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/