本文へスキップ

Sparky

Sparky はダーク系のターミナル配色(寒色)。背景色 #072b31、文字色 #f4f5f0、コントラスト比 13.7:1

設定を取得
背景色
#072b31
前景色
#f4f5f0
文字のコントラスト
13.70:1AAA
アクセントのコントラスト
7.63:1最小 4.73
zsh — ls & git status
zsh — ls & git status
zsh — ls & git status
zsh — ls & git status
zsh — ls & git status — Konsole
~/dev/tintdex on main [!?] via ⬢ v1.4.3
❯ ls -la
drwxr-xr-x 12 ada staff 384 Oct 30 09:12 .
drwxr-xr-x 8 ada staff 256 Oct 29 18:40 ..
-rw-r--r-- 1 ada staff 1.2K Oct 30 09:10 .gitignore
drwxr-xr-x 5 ada staff 160 Oct 30 09:12 src
drwxr-xr-x 3 ada staff 96 Oct 28 11:02 public
-rwxr-xr-x 1 ada staff 2.4K Oct 30 08:57 build.sh
-rw-r--r-- 1 ada staff 4.1K Oct 30 09:01 package.json
lrwxr-xr-x 1 ada staff 18 Oct 27 14:33 node_modules -> ../cache/modules
-rw-r--r-- 1 ada staff 48K Oct 26 10:15 logo.png
-rw-r--r-- 1 ada staff 9.8M Oct 25 21:47 backup.tar.gz
~/dev/tintdex on main [!?] via ⬢ v1.4.3
❯ git status
On branch main
Your branch is ahead of 'origin/main' by 2 commits.
Changes to be committed:
new file: src/theme.css
modified: README.md
Changes not staged for commit:
modified: src/app.tsx
deleted: legacy/colors.js
Untracked files:
notes.md
~/dev/tintdex on main [!?] via ⬢ v1.4.3
❯

Sparky の設定ファイル

16 種類の形式を、ひとつのパレットから生成

Sparky

~/.config/ghostty/themes/Sparky に保存し、config または config.ghostty に theme = Sparky を書く

Ghostty の配色をもっと見る
元ファイル
# Theme: Sparky (Ghostty)
# Preview & customize online: https://tintdex.afengim.com/ja/schemes/sparky?format=ghostty

palette = 0=#212322
palette = 1=#ff585d
palette = 2=#78d64b
palette = 3=#fbdd40
palette = 4=#4698cb
palette = 5=#d59ed7
palette = 6=#2dccd3
palette = 7=#dee6de
palette = 8=#4b4f54
palette = 9=#ff7276
palette = 10=#8edd65
palette = 11=#f6eb61
palette = 12=#69b3e7
palette = 13=#f99fc9
palette = 14=#00c1d5
palette = 15=#d9e1e2
background = #072b31
foreground = #f4f5f0
cursor-color = #f4f5f0
cursor-text = #072b31
selection-background = #3f585c
selection-foreground = #f4f5f0

Sparky のパレット

パレット各スロットの色値と背景に対する WCAG コントラスト比
カラースロットHEXRGBHSLOKLCHコントラスト
背景色background#072b31rgb(7 43 49)hsl(189 75% 11%)oklch(26.7% 0.041 211.0)—
前景色foreground#f4f5f0rgb(244 245 240)hsl(72 20% 95%)oklch(96.8% 0.007 115.7)13.70 AAA
カーソルcursor#f4f5f0rgb(244 245 240)hsl(72 20% 95%)oklch(96.8% 0.007 115.7)13.70 AAA
カーソルの文字cursorText#072b31rgb(7 43 49)hsl(189 75% 11%)oklch(26.7% 0.041 211.0)1.00 AA 未満
選択範囲selection#3f585crgb(63 88 92)hsl(188 19% 30%)oklch(44.2% 0.031 208.4)1.97 AA 未満
選択範囲の文字selectionText#f4f5f0rgb(244 245 240)hsl(72 20% 95%)oklch(96.8% 0.007 115.7)13.70 AAA
黒color0#212322rgb(33 35 34)hsl(150 3% 13%)oklch(25.4% 0.003 164.8)1.05 AA 未満
赤color1#ff585drgb(255 88 93)hsl(358 100% 67%)oklch(68.7% 0.203 22.6)4.87 AA
緑color2#78d64brgb(120 214 75)hsl(101 63% 57%)oklch(79.0% 0.196 137.1)8.23 AAA
黄color3#fbdd40rgb(251 221 64)hsl(50 96% 62%)oklch(89.7% 0.167 97.9)11.09 AAA
青color4#4698cbrgb(70 152 203)hsl(203 56% 54%)oklch(65.1% 0.110 239.0)4.73 AA
マゼンタcolor5#d59ed7rgb(213 158 215)hsl(298 42% 73%)oklch(76.9% 0.100 325.3)6.93 AA
シアンcolor6#2dccd3rgb(45 204 211)hsl(183 65% 50%)oklch(77.2% 0.123 199.6)7.64 AAA
白color7#dee6dergb(222 230 222)hsl(120 14% 89%)oklch(91.7% 0.014 145.5)11.78 AAA
明るい黒color8#4b4f54rgb(75 79 84)hsl(213 6% 31%)oklch(42.6% 0.010 253.9)1.82 AA 未満
明るい赤color9#ff7276rgb(255 114 118)hsl(358 100% 72%)oklch(72.3% 0.172 20.7)5.66 AA
明るい緑color10#8edd65rgb(142 221 101)hsl(100 64% 63%)oklch(82.0% 0.173 136.1)9.06 AAA
明るい黄color11#f6eb61rgb(246 235 97)hsl(56 89% 67%)oklch(92.3% 0.157 104.8)12.13 AAA
明るい青color12#69b3e7rgb(105 179 231)hsl(205 72% 66%)oklch(73.9% 0.106 240.9)6.58 AA
明るいマゼンタcolor13#f99fc9rgb(249 159 201)hsl(332 88% 80%)oklch(80.4% 0.118 350.6)7.74 AAA
明るいシアンcolor14#00c1d5rgb(0 193 213)hsl(186 100% 42%)oklch(74.2% 0.127 207.9)6.85 AA
明るい白color15#d9e1e2rgb(217 225 226)hsl(187 13% 87%)oklch(90.4% 0.009 205.9)11.31 AAA

Sparky について

Sparky は寒色寄りのダーク背景(#072b31)を採用し、標準の前景色に #f4f5f0 を使ったターミナル配色です。本文の WCAG コントラスト比は 13.70:1(AAA)、12 色の ANSI カラーは平均 7.63:1、最小 4.73:1 です。

パレット全体は適度な彩度で、赤 #ff585d、緑 #78d64b、青 #4698cb、マゼンタ #d59ed7 を基調としています。

Ghostty、iTerm2、Kitty、Alacritty、WezTerm、Windows Terminal、Warp、foot、Rio、XFCE4 Terminal、Xresources 向けの設定ファイルを書き出せるほか、VS Code・Zed の統合ターミナル、CSS 変数、Tailwind CSS、JSON 形式にも対応しています。

Sparky に似た配色

データ出典:Gogh (MIT OR Apache-2.0)