OKLCH Terminal Themes

Browse 485 terminal color schemes in a live showcase — terminal, editor, reading, dashboard — swap themes with ←/→, / to search, r for a random pick.

total: 485
dark: 397
light: 88
popular: 95

Preview

—

Palette 20 slots · click to copy oklch(...)

Terminal

Covers all 16 ANSI slots plus cursor, selection, and fg/bg.

user@host ~/projects $ ls --color=auto
.git/ src/ test/ README.md package.json .env
user@host ~/projects $ git status --short
 M src/convert.ts
?? site/public/og-image.png
user@host ~/projects $ git diff src/convert.ts
diff --git a/src/convert.ts b/src/convert.ts
@@ -22,7 +22,6 @@ convertHexToColor
-  if (ok === undefined) throw new Error('fail');
+  // trust culori non-nullable return type
user@host ~/projects $ pnpm test
 ✓ test/convert.test.ts (24 tests) 46ms
 ✓ test/theme-filter.test.ts (17 tests) 19ms
 ✓ test/formatters.test.ts (8 tests) 15ms
 ✗ test/a11y.test.ts (1 failing)
   → AssertionError: expected [ ] to equal [ Object ]
user@host ~/projects $ vim src/schema.ts
── INSERT ── 3,15 Top
import { z } from 'zod';
export const Hex = z.string().regex(/#[0-9a-f]{6}/);
∼
user@host ~/projects $ ▎

Editor

File tree, tabs, syntax highlighting, status bar — all slots in context.

convert.ts schema.ts classify.ts

1  // convert hex → OKLCH via culori, clamp + round, coerce NaN hue.
2  import { parse, converter, formatHex } from 'culori';
3  import type { ColorValue, Oklch } from './types.js';
4
5  const toOklch = converter('oklch');
6
7  export function convertHexToColor(hex: string): ColorValue {
8    const parsed = parse(hex.toLowerCase());
9    if (parsed === undefined) throw new Error(`Unparseable: ${hex}`);
10   const ok = toOklch(parsed);
11   const oklch: Oklch = {
12     l: round(clamp(ok.l, 0, 1), 4),
13     c: round(clamp(ok.c, 0, 0.5), 4),
14     h: ok.h !== undefined && Number.isFinite(ok.h) ? round(ok.h, 1) : 0,
15   };
16   return { hex: parsed, oklch, oklchCss: `oklch(${oklch.l} ${oklch.c} ${oklch.h})` };
17 }

Reading

Long-form body copy, links, code, blockquote, callouts.

Why OKLCH is the right color space for terminal palettes

Dr. Evangelista Colorwheel · 8 min read · #colorimetry

Working in sRGB hex forces every theme author to eyeball relationships the eye actually wants expressed in perceptual lightness, chroma, and hue. OKLCH gives you those three axes directly — you can step through a ramp of eight backgrounds and know they'll feel evenly spaced, not just compute evenly.

A palette is a contract with your attention. OKLCH makes the contract explicit; RGB hides it behind gamma.

The CSS spec lets us ship oklch(0.23 0.016 264.1) directly and browsers will interpolate correctly in the same space. See CSS Color Module Level 4 § 9.3 for the gritty bits.

A small example

:root {
  --accent: oklch(0.62 0.18 280);
  --accent-hover: oklch(from var(--accent) calc(l + 0.08) c h);
}

Tip: The from syntax lets you derive hover / active variants without touching the hue, which keeps the family coherent across both light and dark themes.

Caveat: oklch(...) lands in Safari Technology Preview, Chrome, Firefox, and Edge — but pre-2023 engines fall back to transparent. Ship a hex fallback via @supports not (color: oklch(0 0 0)).

Dashboard

Cards, table, progress, badges — the dense-data test.

Builds today 48 +12%

p95 latency 182ms -6%

Error rate 0.4% ±0

Coverage 87% +2%

Recent runs

last 1h

●	lint + typecheck	18s	just now
●	build + validate	1m 12s	2m ago
●	lighthouse	1m 48s	7m ago
●	a11y	25s	14m ago

Quarterly objectives

Ship picker v1
100%
Reach Lighthouse ≥ 90
72%
Publish to npm
100%
Mobile responsive
90%