---
title: "Tintdex 終端機配色工作台，2037 套主題網上預覽、調色與多端設定匯出"
url: "https://afengblog.com/zh-hk/blog/tintdex-terminal-color-schemes.html"
language: "zh-HK"
author: "AFeng"
published: "2026-11-02T09:15:44.085Z"
updated: "2026-11-02T10:54:21.525Z"
category: "工具與效率"
tags: ["開發者生態","Tintdex","終端機模擬器","終端機配色"]
reading_time: "15 分鐘閱讀"
description: "開源終端機配色工作台 Tintdex（tintdex.afengim.com）匯集 2037 套社群主題，支援 8 種真實終端機場景與多語言程式碼高亮預覽、WCAG 2 對比度檢測、22 槽位單點改色與 OKLCH 感知空間全域調色，一鍵匯出 Ghostty、WezTerm、iTerm2 等 16 種設定。"
---

# Tintdex 終端機配色工作台，2037 套主題網上預覽、調色與多端設定匯出

> 為解決每次更換終端機模擬器都要重新尋找主題、轉換格式及盲目修改色值的痛點，我建立了開源終端機配色工作台 Tintdex（tintdex.afengim.com），收錄 2037 套配色，支援 8 類真實指令場景預覽、WCAG 2 對比度檢測、OKLCH 網上調色與 16 種設定一鍵匯出。

## TL;DR（重點速覽）

- 匯集 iTerm2、Gogh、Base16 等六大開源社群共 2037 套終端機配色，按 11 種視覺風格分類檢索
- 內置 8 類真實終端機指令場景、5 種語言程式碼語法高亮與逐槽位 WCAG 2 對比度檢測矩陣
- 支援 22 個顏色槽位獨立取色微調，以及基於 OKLCH 感知均勻色彩空間的全域色相與明度調整
- 一套色板即時生成 Ghostty、iTerm2、Kitty、Alacritty、WezTerm、VS Code、Tailwind v4 等 16 種設定

我做了一個開源終端機配色檢索、實景預覽與網上調色網站 **Tintdex**（造訪網址：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 翻查各個主題儲存庫，往往只有一兩張靜態截圖，想換個終端機就得自己動手寫腳本轉換色值。

更令人頭痛的是**「買家秀與賣家秀」的落差**。許多主題在作者精挑細選的 `neofetch` 截圖內看起來極其驚艷，結果真正匯入本機終端機執行 `git diff`、`htop` 或者 `bun test`，才發現 `color0`（黑）或 `color8`（亮黑）的註解文字與背景幾乎融為一體；要麼就是紅色報錯和黃色警告在深色背景下刺眼得無法盯屏幕超過半小時。為了一兩個看不清的槽位，又得翻開設定檔手動猜測 Hex 色值、儲存、切回終端機重新載入，來回折騰十幾次。

我想要的其實很簡單：有一個打開就能直接試用的網頁，能用我每天真正在輸入的指令場景看效果，告訴我哪幾個顏色對比度不達標，讓我順手將不舒服的那個色值改掉，最後直接輸出對應終端機的設定檔。既然現成工具總是差一點，乾脆就自己動手建立了 **Tintdex**（https://tintdex.afengim.com/ ）。

## 2037 套配色與 11 種視覺風格索引

為了不遺漏經典的社群作品，Tintdex 匯集了 `iTerm2 Color Schemes`、`Gogh`、`Tinted Theming (Base16 & Base24)`、`Alacritty Theme`、`Warp Themes` 和 `Kitty Themes` 六大開源數據源，去重整理出 **2037 套配色方案**。

### 動態渲染的熱門配色卡片牆

面對兩千多套主題，單靠名稱字母序翻找根本看不過來。在首頁和配色列表（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），卡片右上角標註了各分類下的配色總數")

## 真實工作流實景預覽與 WCAG 對比度檢測

點進任意一套配色的詳情頁，核心區域是一台可在網頁內互動的即時預覽工作台，頂部提供了 **終端機**、**程式碼** 與 **對比度** 三種視圖切換。

### 覆蓋日常指令行的 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 多核 CPU 與進程監控視圖，右側自訂面板選中紅 color1 槽位並展開二維取色器，底部顯示在背景上對比度為 6.46 比 1 AA 級](https://afengblog.com/uploads/2026/11/71df1aeb6b3785ab139c0b26.webp "圖 3 · Tokyo Night 詳情頁預覽工作台，左側支援切換 8 類真實指令場景，右側支援單槽位取色並即時顯示 WCAG 對比度")

### 逐槽位測算的 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` 全部以獨立圓形色球排列。點擊任意色球（例如在 [Tokyo Night](https://tintdex.afengim.com/schemes/tokyo-night) 中選中 `紅 · color1`），即可直接拖動取色器或輸入 Hex 色值。

你拖動取色器的每一幀，左側的終端機視窗、程式碼語法高亮以及取色器底部的 **即時背景對比度數值** 都會同步刷新。哪一格覺得暗，看着底部的對比度數字將它拉上 `4.5:1`（`AA`）甚至 `7.0:1`（`AAA`）即可，如果不滿意隨時點色球右上角的單步還原恢復原值。

### 基於 OKLCH 空間的色相旋轉與多語言程式碼高亮

有時候我們很喜歡某套主題的明暗層次與對比度關係，只是想換個整體色調——例如將偏紫的 [Rosé Pine](https://tintdex.afengim.com/schemes/rose-pine) 往冷青色或暖琥珀色偏一點。

如果用傳統的 HSL 色彩空間整體旋轉色相，很容易出現「轉到黃色突然刺眼、轉到藍色瞬間發黑」的失真現象，因為人眼對不同色相的物理亮度感知完全不同。為此，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 套涵蓋粉彩、冷調深色、低飽和松木、復古暖棕、和風深色與日光淺色的代表作，點擊連結即可直接進入網上預覽與調色台：

| 配色名稱 | 風格定位 | 背景 / 前景色 | 正文對比度 | 網上預覽與調色直達 |
|---|---|---|---|---|
| **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 |

### 最多四套配色同屏對比與跨主題混搭工作台

選擇困難症發作、在幾套近似配色之間拿不定主意時，可以直接打開 **配色對比工作台**（https://tintdex.afengim.com/compare ）。它支援同時將最多 **4 套配色** 並排放在一起，內置了「Catppuccin 四種風味」「Tokyo Night 與 One Dark」「Dracula 與 Nord」「Gruvbox 深淺」四組快捷預設。

在對比視圖內，你不僅可以橫向比對每一個槽位的色值差異、實景終端機表現和對比度指標，甚至可以點擊 **新建混搭**——例如拿 Tokyo Night 的深邃背景，配 Catppuccin Mocha 的粉彩強調色，現場拼出一套混血主題。

![Tintdex 配色對比工作台介面截圖，並排展示 Catppuccin Latte、Frappe、Macchiato 與 Mocha 四套主題的背景色、前景色、游標色與選取區色色塊對比表](https://afengblog.com/uploads/2026/11/be7ea140a5c1d247473a8f2f.webp "圖 6 · 配色對比工作台（tintdex.afengim.com/compare）同屏並排比對 Catppuccin 四種風味，支援任意槽位改色與新建混搭")

## 一套色板直出 16 種終端機與開發設定

無論是直接使用原版配色，還是透過單點改色、OKLCH 滑桿調出了自己的滿意版本，頁面下方的 **設定檔匯出區** 都會即時生成 **16 種目標格式**，無需任何二次轉換。

### 覆蓋 11 款終端機、2 款編輯器與前端樣式的即時設定生成

匯出列表按使用場景分為四大類，點擊左側分頁即可即時切換對應的設定檔源碼：

* **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 種前端與通用數據格式**：`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 映射整理成一段結構化 Prompt，直接發給 AI 就能生成對應工具的完美設定。

網站目前支援簡體中文、繁體中文、日語和英語等多種語言切換，歡迎直接造訪 https://tintdex.afengim.com/ 挑一套順眼的配色，或者調出屬於你自己的終端機主題。

標籤：[開發者生態](https://afengblog.com/zh-hk/tag/developer-ecosystem)、[Tintdex](https://afengblog.com/zh-hk/tag/tintdex)、[終端機模擬器](https://afengblog.com/zh-hk/tag/terminal-emulator)、[終端機配色](https://afengblog.com/zh-hk/tag/terminal-color-scheme)

---

原文：https://afengblog.com/zh-hk/blog/tintdex-terminal-color-schemes.html

其他公開頁面亦可在 URL 後加上 `.md` 取得 Markdown 版本；網站索引： https://afengblog.com/zh-hk/llms.txt