データ可視化のカラーパレット
誰にとっても読みやすいグラフの配色を生成します。カテゴリ用のセットは、通常の色覚、1型色覚、2型色覚、3型色覚のすべてで、最も近い色同士の差が最大になるように選びます。連続・発散スケールは OKLab で等間隔に並べ、順序は明度で表します。
グラフの配色の作り方
- パレットの種類を選びます。順序のないグループにはカテゴリ、低から高へ並ぶ値には連続、中間点を挟んだ値には発散を使います。
- 必要な色数を設定します。カテゴリは 2 色から 12 色、連続と発散は 3 色から 11 色です。グラフの背景がライトかダークかも選びます。
- 必要に応じて、ブランドカラーやシードカラーを最大 3 色まで追加します。カテゴリのパレットでは、その色を残したまま、ほかの色が互いに離れるように選ばれます。
- ライブのグラフプレビューと色覚ごとの見え方を確認したら、D3、Vega-Lite、Matplotlib、ECharts、ggplot2 のコード、または JavaScript、CSS 変数、Tailwind v4 として書き出します。
できること
色覚特性に配慮したカテゴリ色
カテゴリの色は、一般的な色覚、1型色覚（protanopia）、2型色覚（deuteranopia）、3型色覚（tritanopia）のすべてで見分けやすいように選ばれます。
均等な連続・発散スケール
連続スケールでは明度が一方向に変化し、発散スケールでは中立の中間点を軸に左右対称になります。
背景に対するコントラスト
カテゴリの色は、グラフの背景に対して 3:1 のコントラストを保ちます。これは WCAG が図形オブジェクトに求める最小値です。
ライブのグラフプレビュー
棒、折れ線、散布図、ドーナツ、面、ヒートマップ、タイルマップのグラフを、選んだ色で描画して確認できます。
警告
見分けにくい色、不均一なスケール、コントラストの低い色をページが知らせます。
グラフライブラリへの書き出し
D3、Vega-Lite、Matplotlib、ECharts、R の ggplot2 向けのコード、または HEX 値そのものをコピーできます。
よくある質問
データ可視化のカラーパレットとは？
装飾ではなく、グラフのために選ばれた色の組み合わせです。種類は 3 つあります。区別されたグループ向けのカテゴリパレット、順序のある値向けの連続パレット、中間点から両方向に離れていく値向けの発散パレットです。
グラフには何色まで使えますか？
カテゴリデータなら、8 色前後までにとどめましょう。8 色を超えると、特に色覚特性のある人にとって違いが小さくなるため、直接ラベルを付けるか、一部のカテゴリをまとめることを検討してください。
色覚特性に配慮したグラフの配色の作り方は？
色相だけでなく明度にも差をつけた色を選び、1型色覚、2型色覚、3型色覚の見え方で確認します。このジェネレーターは、それらの見え方のなかで、どの 2 色の間でも最小の差が最大になるようにして、それぞれの見え方も表示します。可能な場合は、ラベルやパターンも併用しましょう。
連続と発散のパレットはどう使い分ける？
件数や割合のように、低から高へ並ぶ値には連続を使います。変化、偏差、評価のように、意味のある中間があって両方向に進む値には発散を使います。
この配色は D3、Matplotlib、ggplot2 で使えますか？
はい。書き出しパネルで、D3、Vega-Lite、Matplotlib、ECharts、R の ggplot2 のコードに加えて、JavaScript の配列、CSS 変数、Tailwind v4 のテーマを出力できます。