SciFig
無料で始める
ガイド·

Okabe-Itoカラーパレット:全8色のHEXコード一覧

Okabe-Itoパレット全8色のHEX・RGB値、見分けやすい使用順、科学図表向けのR・Python・CSSコードをまとめて紹介します。

SciFig Team
SciFig Team
Scientific Illustration Experts
okabe ito paletteは、出典を確認できる8色の値をそのままコピーできます。

Okabe-Itoパレットは、色覚の違いに配慮した科学図表向けの8色セットです。

何らかの色覚特性を持つ人の割合は、男性で約12人に1人、女性で約200人に1人とされています。図の意味を赤と緑の違いだけで表すと、読者や査読者の一部には意図と異なって見えます。本記事では、全色のHEXコードとRGB値に加え、R、Python、CSSへそのまま貼り付けられるコードをまとめました。

Okabe-Itoパレット全8色を色名とHEXコード付きで並べたカラースウォッチ(SciFigで作成)
Okabe-Itoパレット全8色を色名とHEXコード付きで並べたカラースウォッチ(SciFigで作成)

Okabe-Itoパレット全8色のHEXコード

Okabe-Itoパレットは、1型・2型・3型の色覚特性があっても区別しやすいよう選ばれた8色です。Masataka OkabeとKei Itoがカラーユニバーサルデザインの取り組みとして公表し、Bang Wongが2011年のNature Methods誌コラムで生命科学分野に広めました。そのため、同じ配色がWongパレットと呼ばれることもあります。
色名HexRGB
オレンジ#E69F00230, 159, 0
スカイブルー#56B4E986, 180, 233
青みの緑#009E730, 158, 115
黄色#F0E442240, 228, 66
#0072B20, 114, 178
朱色#D55E00213, 94, 0
赤みの紫#CC79A7204, 121, 167
#0000000, 0, 0
黄色の正しい値は、やや彩度を抑えた柔らかな#F0E442です。誤った値が広く流通しているため、ここは明確にしておく必要があります。純色の黄色(#FFFF00)はOkabe-Itoの黄色ではありません。また、著名なRパッケージの中には、元の色と置き換える選択肢として「アンバー」版(#F5C710)を収録しているものもあります。参照実装ではなく一般の記事から値をコピーすると、公表された配色とは別物になるおそれがあります。

図表エンハンスを実践で見る

既存の科学図表を8Kジャーナル品質にアップスケール、リカラー、ラベル変更。

ツールを探索

この8色が見分けやすい理由

色覚特性があるからといって「白黒に見える」わけではありません。一般的な色覚特性では、色空間の特定の軸が圧縮されます。そのため、主に赤と緑の軸で異なる色は似て見えやすい一方、明度や青と黄の軸にある違いは残りやすくなります。

Okabe-Itoの配色は、この性質を踏まえて設計されています。隣り合う色は色相だけでなく明度も異なるため、ある人にとって2色が近く見えても、明るさの差で区別できます。黒が含まれているのも同じ理由です。明度範囲の基準点となり、確実に見分けられる参照カテゴリとして機能します。
Okabe-Itoパレットの棒グラフを一般色覚、1型、2型、3型の見え方で並べたシミュレーション(SciFigで作成)
Okabe-Itoパレットの棒グラフを一般色覚、1型、2型、3型の見え方で並べたシミュレーション(SciFigで作成)

推奨する使用順

8色すべてを使わない場合、一覧の先頭から必要な数だけ選ぶのは避けましょう。色数が少なくても差を最大限に保てる、次の順番がおすすめです。

  1. #0072B2
  2. #E69F00 オレンジ
  3. #009E73 青みの緑
  4. #CC79A7 赤みの紫
  5. #56B4E9 スカイブルー
  6. #D55E00 朱色
  7. #F0E442 黄色
  8. #000000

青とオレンジを最初に置くのには理由があります。この組み合わせは、さまざまな色覚特性に対して最も安定して見分けやすい2色です。

そのまま使えるコード

R

okabe_ito <- c(
  "#E69F00", "#56B4E9", "#009E73", "#F0E442",
  "#0072B2", "#D55E00", "#CC79A7", "#000000"
)
# ggplot2
scale_colour_manual(values = okabe_ito)
R 4.0以降では、Base Rにpalette.colors(palette = "Okabe-Ito")も用意されています。値をコードへ直接書き込む必要がない場合もあります。

Python

OKABE_ITO = [
    "#E69F00", "#56B4E9", "#009E73", "#F0E442",
    "#0072B2", "#D55E00", "#CC79A7", "#000000",
]
import matplotlib as mpl
mpl.rcParams["axes.prop_cycle"] = mpl.cycler(color=OKABE_ITO)

CSS

:root {
  --oi-orange:         #E69F00;
  --oi-sky-blue:       #56B4E9;
  --oi-bluish-green:   #009E73;
  --oi-yellow:         #F0E442;
  --oi-blue:           #0072B2;
  --oi-vermilion:      #D55E00;
  --oi-reddish-purple: #CC79A7;
  --oi-black:          #000000;
}

Okabe-Itoパレットが向かない用途

Okabe-Itoは定性的なパレットです。処置群、種、実験条件など、順序のないカテゴリを区別するために作られています。次の3つの用途には適していません。
  • 順序データや連続データ。 知覚的に均一な連続カラーマップを使いましょう。一般的にはviridisが選ばれます。
  • 中間値を境に分かれるデータ。 ColorBrewerのRdBuなど、中立色を中央に置いた発散型の配色が適しています。
  • 9個以上のカテゴリ。 9色目を足すより、図をパネルに分ける、グループ化する、直接ラベルを付けるなど、構成自体を見直す方が有効です。
データに合う配色タイプを選ぶ方法は、科学図表のカラーパレット選びで詳しく解説しています。連続型、発散型、定性型の違いを実例とともに確認できます。
Okabe-Itoパレットを使い、凡例ではなく直接ラベルを付けたグループ化棒グラフと散布図(SciFigで作成)
Okabe-Itoパレットを使い、凡例ではなく直接ラベルを付けたグループ化棒グラフと散布図(SciFigで作成)
同じOkabe-Itoの図をカラーとグレースケールで示し、変換後も区別できる組み合わせを強調した例(SciFigで作成)
同じOkabe-Itoの図をカラーとグレースケールで示し、変換後も区別できる組み合わせを強調した例(SciFigで作成)

よくある間違い

色だけに頼る。 どれほど優れたパレットでも、グレースケール印刷や全色盲の読者には十分ではありません。線種、マーカー形状、直接ラベル、テクスチャなど、別の視覚要素を組み合わせましょう。
白い背景に黄色を使う。 #F0E442は白背景とのコントラストが低い色です。細い線や小さなマーカーではなく、輪郭線のある塗りつぶし領域に使ってください。
配色だけで図が改善すると考える。 8系列が重なった過密な図は、色選びが適切でも読みにくいままです。色のアクセシビリティは最低条件であり、明快な構造の代わりにはなりません。

今すぐ科学図表を作成

自然言語で科学図表を説明 — 数分で出版可能なイラストを取得。

無料で試す
新しい図を作る場合は、科学図表向けカラーパレット生成ツールで、作業中からこれらの条件を反映できます。既存の図を直す場合は、Figure Enhancerを使えば、一から作り直さずに色覚へ配慮した配色へ変更できます。

ヒント

思い込みではなく確認が大切です。投稿前に図を色覚シミュレーターへ通し、グレースケールでも一度確認してください。どちらも1分以内で済み、アクセシビリティ上の問題の大半を発見できます。

関連記事

関連する読み物: 科学図表に最適なカラーパレット(2026年版), 科学的な図でよくある5つの間違い.

よくある質問

さらに活用する

おすすめのリソース

研究に役立つテンプレート・ツール・関連記事

コールトゥアクションの背景

始める準備はできましたか?

数分で出版可能な科学図表を

無料で作成開始

無料で開始 ・ クレジットカード不要 ・ 研究者向けに構築