---
title: "Tintdex 终端配色工作台，2037 套主题在线预览、调色与多端配置导出"
url: "https://afengblog.com/blog/tintdex-terminal-color-schemes.html"
language: "zh-CN"
author: "AFeng"
published: "2026-11-02T09:10:41.389Z"
updated: "2026-11-02T10:54:20.517Z"
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/tag/developer-ecosystem)、[Tintdex](https://afengblog.com/tag/tintdex)、[终端模拟器](https://afengblog.com/tag/terminal-emulator)、[终端配色](https://afengblog.com/tag/terminal-color-scheme)

---

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

Other pages also provide Markdown by appending `.md`; site index: https://afengblog.com/llms.txt