---
title: "Tintdex ターミナル配色ワークベンチ、2037種のテーマをブラウザでプレビュー・調色し16形式へ出力"
url: "https://afengblog.com/ja/blog/tintdex-terminal-color-schemes.html"
language: "ja"
author: "AFeng"
published: "2026-11-02T09:15:45.723Z"
updated: "2026-11-02T10:54:23.155Z"
category: "ツールと効率化"
tags: ["開発者エコシステム","Tintdex","ターミナルエミュレータ","ターミナル配色"]
reading_time: "読了目安 20 分"
description: "2037種のターミナルテーマを収録したWebツール「Tintdex（tintdex.afengim.com）」を公開。8種類の実戦的なコマンド画面とコードハイライト、WCAG 2コントラスト比検証、OKLCH色空間での調色に対応し、GhosttyやWezTermなど16形式の設定を即座に出力できます。"
---

# Tintdex ターミナル配色ワークベンチ、2037種のテーマをブラウザでプレビュー・調色し16形式へ出力

> ターミナルエミュレータを乗り換えるたびにテーマを探し直し、設定フォーマットを変換し、手探りでHexカラーコードを書き換える手間をなくすため、2037種のテーマを収録したオープンソースのターミナル配色サイト「Tintdex（tintdex.afengim.com）」を公開しました。

## TL;DR（要点まとめ）

- iTerm2やGogh、Base16など6大オープンソースコミュニティから計2037種のターミナル配色を統合し、11種類のスタイルで分類
- 8種類の実践的なターミナルコマンド画面、5言語のコードハイライト、全スロットのWCAG 2コントラスト比マトリクスを搭載
- 22個のカラースロットの個別微調整に加え、知覚均等色空間OKLCHを用いた明度維持のままの色相回転・彩度調整に対応
- 単一のカラーパレットからGhostty、iTerm2、Kitty、Alacritty、WezTerm、VS Code、Tailwind v4など16形式の設定を即時生成

オープンソースのターミナルカラースキーム検索・実画面プレビュー・オンライン調色サイト **Tintdex**（URL：https://tintdex.afengim.com/ ）を制作・公開しました。コミュニティに点在する **2037種のターミナル配色** を統一パレット規格に集約し、ブラウザ上でShellやGit、プロセスモニター、複数言語のコードシンタックスハイライトを切り替えながら確認できるほか、個別カラーの微調整やOKLCH色空間での一括調色を行い、Ghostty、iTerm2、Kitty、Alacritty、WezTerm、Windows Terminalなど **16種類の設定ファイル** としてワンクリックで書き出せます。

## なぜターミナル配色サイトを自作したのか

ここ数年、ターミナルエミュレータやエディタを試行錯誤するなかで、iTerm2からAlacritty、WezTermへと移行し、最近はメイン環境をGhosttyに切り替えました。ターミナルやモニターを新調するたびに、配色の探し直しや移植で毎回同じ苦労を繰り返してきました。

最初にぶつかる壁は**設定フォーマットの分断**です。同じお気に入りのテーマでも、iTerm2では冗長なXML形式の`.itermcolors`、AlacrittyではTOML、WezTermではLuaテーブル、そしてGhosttyではプレーンテキストのキーバリュー形式になります。GitHubの各テーマリポジトリを見に行っても静止画のスクリーンショットが1〜2枚あるだけで、別のターミナルへ移すには自分で変換スクリプトを書くしかありませんでした。

さらに厄介なのが**「見本スクリーンショットと実用時のギャップ」**です。作者が厳選した`neofetch`のスクリーンショットでは美しく見えるテーマでも、いざ手元のターミナルに導入して`git diff`や`htop`、`bun test`を走らせてみると、`color0`（黒）や`color8`（明るい黒）に割り当てられたコメント文字が背景に沈んでほとんど読めなかったり、赤のエラー表示や黄色の警告がダーク背景上で眩しすぎて30分も画面を見続けられなかったりすることが珍しくありません。読めない1〜2色だけを直すために、設定ファイルを開いてHexカラーコードを手探りで書き換え、保存してターミナルをリロードする作業を何十回も往復することになります。

私が欲しかったのは、「ブラウザを開けばすぐ試せて、毎日実際に叩いているコマンド出力で見え方を確認でき、コントラスト不足の色を数値で教えてくれて、気になる色だけをその場で直して目的のターミナル設定ファイルを出力してくれるWebサイト」でした。既存のツールではどうしても帯に短し襷に長しだったため、自ら構築したのが **Tintdex**（https://tintdex.afengim.com/ ）です。

## 2037種のカラースキームと11種類の視覚スタイル分類

定番から隠れた名作まで網羅するため、Tintdexは`iTerm2 Color Schemes`、`Gogh`、`Tinted Theming (Base16 & Base24)`、`Alacritty Theme`、`Warp Themes`、`Kitty Themes`という6つの主要オープンソースデータソースを統合・重複排除し、計 **2037種のカラースキーム** を収録しています。

### リアルタイム描画される人気カラースキームのカード一覧

2000を超えるテーマを名前順だけで探すのは現実的ではありません。トップページやスキーム一覧（https://tintdex.afengim.com/schemes ）に並ぶカードは単なる静止画像ではなく、各パレットを使ってリアルタイムに描画されたミニターミナルウィンドウです。ディレクトリ一覧や`git status`の変更状態、テスト実行結果がそのまま表示されるため、一覧を眺めるだけで色温度やコントラストの傾向が直感的に把握できます。

![Tintdex 人気カラースキームの 5 列× 3 行グリッド画面。Catppuccin Mocha、TokyoNight Storm、Dracula、Gruvbox Dark、Nord、Rose Pine、Kanagawa Wave など 15 種のミニターミナルプレビューとカラードットを一覧表示](https://afengblog.com/uploads/2026/11/d8468967911c78eaefe1d51e.webp "図 1 · 人気カラースキーム一覧。各カードは静止画ではなく実際のパレットでリアルタイム描画され、ダーク系とライト系の見え方を一目で比較できます")

### 背景明度・色温度・彩度に基づく11種類のスタイル分類

人気順だけでなく、背景の明度・彩度・色温度に基づいて全テーマを **11種類の視覚スタイル**（https://tintdex.afengim.com/categories ）に分類しました。

* **ダーク（1562種）とライト（475種）**：夜間の暗所コーディングと日中の高輝度ディスプレイ作業の双方をカバーします。
* **ピュアブラック OLED（250種）**：背景が純黒またはほぼ純黒で構成され、MacBook Pro XDRやOLED外部モニターでベゼルと一体化した没入感を得られます。
* **高コントラスト（184種）とソフト（579種）**：前者は本文と全ANSIカラーで高いWCAGコントラスト比を確保し、後者は明暗差を適度に抑えて長時間の作業による眼精疲労を和らげます。
* **パステル（212種）、低彩度（225種）、ビビッド（256種）、ウォーム（228種）、クール（629種）、モノクローム（129種）**：レトロなアンバーブラウン管風から北欧風のクールブルー、柔らかなパステル調まで、目の馴染みやすさから逆引きできます。

![Tintdex スタイル別ブラウズ画面。ダーク、ライト、ピュアブラック、高コントラスト、ソフト、ビビッド、低彩度、パステル、モノクローム、ウォーム、クールの 11 カテゴリーカードと収録数を表示](https://afengblog.com/uploads/2026/11/42b7459a669cdff0cbbd856e.webp "図 2 · 11種類の視覚スタイル別インデックス（tintdex.afengim.com/categories）。各カードの右上に該当テーマ数が表示されます")

## 8つの実戦的なターミナル画面とWCAGコントラスト診断

任意のスキーム詳細ページを開くと、メイン領域にはインタラクティブなライブプレビュー環境が広がり、上部タブで **ターミナル**、**コード**、**コントラスト** の3つのビューを切り替えられます。

### 日常のCLI作業を再現する8つのターミナルシーンと対話型サンドボックス

**ターミナルビュー** では、日々の開発で頻繁に目にする **8つのコマンドラインシーン** を用意しました。

1. **Shell**：日常的な`ls -la`のパーミッション・ディレクトリ配色と`git status`のブランチプロンプト。
2. **Git**：実際の`git diff`の追加・削除行ハイライトとコミットロググラフ。
3. **テスト**：`bun test`のパス（緑）・失敗（赤）・実行時間サマリー。
4. **ログ**：タイムスタンプと`INFO` / `WARN` / `ERROR`レベルを備えた構造化サーバーログ。
5. **プロセス**：`htop`スタイルのマルチコアCPU負荷バー、メモリ使用率、プロセステーブル。
6. **システム**：`neofetch` / `fastfetch`風のシステム情報とカラーブロック。
7. **カラーテスト**：標準16色の前景色×背景色マトリクステーブル。
8. **試してみる**：ブラウザ上で直接`help`や`ls`、`git status`などのコマンドを入力して応答を試せる対話型ターミナルサンドボックス。

![Tokyo Night 詳細ページのプレビュー画面。左側のターミナルで htop プロセスモニターを表示し、右側のカスタマイズパネルで赤（color1）のカラーピッカーと背景コントラスト比 6.46 対 1（AA）を表示](https://afengblog.com/uploads/2026/11/71df1aeb6b3785ab139c0b26.webp "図 3 · Tokyo Night 詳細ページのワークベンチ。左ペインで 8 種類の実戦的な CLI シーンを切り替え、右ペインでスロット別の色調整とコントラスト確認が行えます")

### 全スロットを数値化するWCAG 2コントラスト比マトリクス

Shell画面だけでは気づきにくい配色の弱点も、**コントラストビュー** に切り替えると一目で判明します。Tintdexは前景色および`color0`〜`color15`の全17色について、現在の背景色に対する **WCAG 2コントラスト比** をリアルタイムに算出し、`AA`（`4.5:1以上`）や`AAA`（`7.0:1以上`）の基準を満たしているかを判定します。

たとえば定番の [Catppuccin Mocha](https://tintdex.afengim.com/schemes/catppuccin-mocha) では、本文コントラスト比は`11.34:1`（`AAA`）、赤・緑・黄・青などの主要アクセントカラーもすべて`7.08:1`以上をクリアしています。しかしコントラストマトリクスを見ると、`黒 · color0`（`#45475a`）と`明るい黒 · color8`（`#585b70`）は背景`#1e1e2e`に対してそれぞれ`1.80:1`と`2.46:1`（「AA未満」と赤字表示）であることがわかります。もし利用中のCLIツールが補完候補や補足テキストに`color8`を使っている場合でも、設定を書き出す前に気づいてその場で明るく補正できます。

![Catppuccin Mocha 詳細ページの WCAG 2 コントラスト比マトリクス画面。前景色と 16 個の ANSI カラーについてサンプル文字列、Hex 値、コントラスト比スコア、AAA または AA 未満の判定バッジを一覧表示](https://afengblog.com/uploads/2026/11/0b10daba0c8b791d282c8dff.webp "図 4 · Catppuccin Mocha の WCAG 2 コントラスト診断マトリクス。黒（color0、1.80）と明るい黒（color8、2.46）が AA 基準未満であることが一目で判別できます")

## ブラウザ上での個別色調整とOKLCH知覚均等色空間チューニング

特定のスロットが見づらいときや、背景をもう少し深くしたい、赤色の彩度を落としたいといった場合も、設定ファイルをローカルに落として手探りで編集する必要はありません。右側の **カスタマイズパネル** からその場で色を作り込めます。

### 22個のカラースロットのピンポイント調色とリアルタイム判定

「カラー」タブには、背景色・前景色・カーソル・カーソル文字・選択範囲・選択文字、そして標準の`color0`〜`color15`が計22個の円形スウォッチとして並んでいます。任意のスウォッチ（たとえば [Tokyo Night](https://tintdex.afengim.com/schemes/tokyo-night) の`赤 · color1`）をクリックすると、カラーピッカーのドラッグ操作やHexコードの直接入力が可能です。

ピッカーを動かすたびに、左側のターミナル画面、コードハイライト、そしてピッカー下部の **対背景WCAGコントラスト比** がリアルタイムに更新されます。暗すぎるスロットがあれば、下部の数値を見ながら`4.5:1`（`AA`）や`7.0:1`（`AAA`）を超えるまで引き上げるだけで済み、いつでもワンクリックで元の色に戻せます。

### OKLCH色空間による色相回転と複数言語のコードハイライト

テーマ全体の明暗バランスやコントラスト設計は気に入っているものの、全体の雰囲気だけを少し変えたい——たとえば紫寄りの [Rosé Pine](https://tintdex.afengim.com/schemes/rose-pine) を少しクールな青緑や温かみのあるアンバー寄りに振りたい、というケースもあります。

従来のHSL色空間で色相（Hue）を一括回転させると、人間の目の感度特性と合わないため「黄色に振ると急に眩しくなり、青に振ると一気に暗く沈む」という破綻が起きがちです。そこでTintdexの「調整」タブでは、すべての演算を **OKLCH知覚均等色空間** 上で行っています。

* **色相シフト（`-180°` 〜 `+180°`）**：パレット全体の色相を回転させても各スロットの知覚明度（Lightness）が厳密に維持されるため、シンタックスハイライトの階層や視認性を損なわずに別系統のカラーテーマへ変換できます。
* **彩度・明度・コントラストスライダー**：鮮やかなテーマを落ち着いた低彩度トーンに抑えたり、暗部を一括で持ち上げたりでき、スライダーのダブルクリックで即座に初期値へ戻せます。
* **表示環境のシミュレーション**：「表示」タブでは、等幅フォント（`JetBrains Mono`など）、フォントサイズ、行間、太字への明るい色の適用、カーソル点滅の有無を切り替えられるほか、`80×24`、`100×30`、`120×40`といったウィンドウサイズ別の表示密度も検証できます。

![Rosé Pine 詳細ページのコードハイライトと OKLCH 調整タブの画面。左側に TypeScript コードのシンタックスハイライトを表示し、右側の調整パネルで色相シフトを +38 度、彩度を 115% に設定](https://afengblog.com/uploads/2026/11/8007e0c45fcea68b2a8f379f.webp "図 5 · Rosé Pine でコードハイライト表示（TS / Python / Rust / Go / CSS 対応）に切り替え、右側の OKLCH スライダーで知覚明度を保ったまま色相と彩度を調整")

色を調整したあとは、右上の **共有** ボタンからカスタムパレット全体をエンコードしたURLをコピーでき、ブックマークやチーム内での共有も簡単です。

## 代表的な人気カラースキーム6選と複数テーマの横並び比較

どのテーマから見るか迷ったときは、まずコミュニティで定評のある代表的なパレットを試し、比較ワークベンチで並べて見比べるのがおすすめです。

### 長時間の作業でも目が疲れにくい代表的な6テーマ

パステル、クールダーク、低彩度パイン、レトロウォーム、和風ダーク、日中向けライトの6系統から代表的なスキームをまとめました。リンクから直接プレビューと調色を試せます。

| テーマ名 | スタイルの特徴 | 背景色 / 前景色 | 本文コントラスト比 | オンラインプレビュー・調色URL |
|---|---|---|---|---|
| **Catppuccin Mocha** | 柔らかなパステルダークの定番。彩り豊かで目が疲れにくい | `#1e1e2e` / `#cdd6f4` | `11.34:1` (AAA) | https://tintdex.afengim.com/schemes/catppuccin-mocha |
| **Tokyo Night** | 深夜の青紫を基調としたクール系。暗所での長時間作業に最適 | `#1a1b26` / `#a9b1d6` | `8.10:1` (AAA) | https://tintdex.afengim.com/schemes/tokyo-night |
| **Rosé Pine** | 低彩度のパイングレーとローズゴールドが調和した上品な配色 | `#191724` / `#e0def4` | `13.39:1` (AAA) | https://tintdex.afengim.com/schemes/rose-pine |
| **Gruvbox Dark** | 温かみのあるレトロブラウン基調。高い識別性を誇る暖色系の代表格 | `#282828` / `#ebdbb2` | `10.8:1` (AAA) | https://tintdex.afengim.com/schemes/gruvbox-dark |
| **Kanagawa Wave** | 葛飾北斎『神奈川沖浪裏』に着想を得た落ち着きのある和風ダーク | `#1f1f28` / `#dcd7ba` | `11.3:1` (AAA) | https://tintdex.afengim.com/schemes/kanagawa-wave |
| **Catppuccin Latte** | 日中の明るい部屋でも読みやすいウォームホワイト系ライトテーマ | `#eff1f5` / `#4c4f69` | `7.1:1` (AAA) | https://tintdex.afengim.com/schemes/catppuccin-latte |

### 最大4テーマの横並び比較とハイブリッド合成ワークベンチ

複数の候補で迷ったときは、**カラースキーム比較ワークベンチ**（https://tintdex.afengim.com/compare ）が便利です。最大 **4つのテーマ** を横並びで比較でき、「Catppuccin 4フレーバー」「Tokyo Night と One Dark」「Dracula と Nord」「Gruvbox ダーク＆ライト」のクイックプリセットも備えています。

比較画面では各スロットのカラーコード差や実画面、コントラスト指標を見比べられるだけでなく、**ミックス作成** を押して「Tokyo Nightの背景色にCatppuccin Mochaのアクセントカラーを組み合わせる」といったハイブリッドテーマの合成も可能です。

![Tintdex カラースキーム比較ワークベンチの画面。Catppuccin Latte、Frappe、Macchiato、Mocha の 4 テーマについて背景色、前景色、カーソル色、選択範囲色のカラースウォッチを横並びで比較](https://afengblog.com/uploads/2026/11/be7ea140a5c1d247473a8f2f.webp "図 6 · カラースキーム比較ワークベンチ（tintdex.afengim.com/compare）。Catppuccin 4 フレーバーを横並びで比較し、その場で色の変更やミックス作成が行えます")

## 単一パレットから16種類のターミナル・開発ツール設定を即時出力

既存のスキームをそのまま使う場合も、個別調整やOKLCHスライダーで自分好みに仕上げた場合も、ページ下部の **設定ファイル出力セクション** から変換作業なしで **16種類のフォーマット** を即座に取得できます。

### 11種のターミナル・2種のエディタ・Webスタイルへのリアルタイム出力

出力フォーマットは用途別に4つのカテゴリーに分かれており、左側のタブをクリックすると対応する設定コードが即座に切り替わります。

* **11種類の主要ターミナルエミュレータ**：`Ghostty`、`iTerm2`、`Kitty`、`Alacritty`、`WezTerm`、`Windows Terminal`、`Warp`、`foot`、`Rio`、`XFCE4 Terminal`、`Xresources`（各タブの上部にはローカル設定ファイルの配置パス手順も記載しており、ターミナル別一覧ページ https://tintdex.afengim.com/terminals からも探せます）。
* **2種類のコードエディタ内蔵ターミナル**：`VS Code ターミナル`（`workbench.colorCustomizations`のJSONスニペット）および`Zed ターミナル`。
* **3種類のWebフロントエンド・汎用データ形式**：`CSS 変数`、`Tailwind CSS v4`（`@theme`構文）、標準`JSON`。

![Catppuccin Mocha の設定ファイル出力セクションの画面。左側のリストに 11 種のターミナル、2 種のエディタ、CSS 変数、Tailwind CSS v4、JSON の計 16 形式が並び、右側に Ghostty 用の設定コードとダウンロード・プロンプトコピーボタンを表示](https://afengblog.com/uploads/2026/11/ba8d503953fcc2e531005928.webp "図 7 · 設定ファイル出力パネル。個別スロットの調色や OKLCH スライダーの変更内容は、16 種類すべての出力フォーマットと AI プロンプトへリアルタイムに反映されます")

設定ファイルの **ダウンロード** や **コピー** に加え、**プロンプトをコピー** ボタンも用意しました。まだリストにないマイナーなターミナルやTmuxステータスバー、Neovimプラグイン、自作TUIツールなどに適用したい場合、このボタンを押せば全スロットの正確なHexマッピングを含む構造化プロンプトがコピーされ、そのままAIに渡すだけで目的のツール向け設定を生成できます。

サイトは日本語・簡体字中国語・繁体字中国語・英語などの多言語切り替えに対応しています。ぜひ https://tintdex.afengim.com/ にアクセスして、目に馴染む一着を見つけるか、自分だけのターミナルテーマを作ってみてください。

タグ：[開発者エコシステム](https://afengblog.com/ja/tag/developer-ecosystem)、[Tintdex](https://afengblog.com/ja/tag/tintdex)、[ターミナルエミュレータ](https://afengblog.com/ja/tag/terminal-emulator)、[ターミナル配色](https://afengblog.com/ja/tag/terminal-color-scheme)

---

URL：https://afengblog.com/ja/blog/tintdex-terminal-color-schemes.html

他の公開ページも URL 末尾に `.md` を付けると Markdown 版を取得できます。サイト索引： https://afengblog.com/ja/llms.txt