本文へスキップ

Starlight

Starlight はダーク系のターミナル配色。背景色 #242424、文字色 #ffffff、コントラスト比 15.5:1

設定を取得
背景色
#242424
前景色
#ffffff
文字のコントラスト
15.52:1AAA
アクセントのコントラスト
7.61:1最小 4.00
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
❯

Starlight の設定ファイル

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

Starlight

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

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

palette = 0=#242424
palette = 1=#f62b5a
palette = 2=#47b413
palette = 3=#e3c401
palette = 4=#24acd4
palette = 5=#f2affd
palette = 6=#13c299
palette = 7=#e6e6e6
palette = 8=#616161
palette = 9=#ff4d51
palette = 10=#35d450
palette = 11=#e9e836
palette = 12=#5dc5f8
palette = 13=#feabf2
palette = 14=#24dfc4
palette = 15=#ffffff
background = #242424
foreground = #ffffff
cursor-color = #ffffff
cursor-text = #242424
selection-background = #ffffff
selection-foreground = #242424

Starlight のパレット

パレット各スロットの色値と背景に対する WCAG コントラスト比
カラースロットHEXRGBHSLOKLCHコントラスト
背景色background#242424rgb(36 36 36)hsl(0 0% 14%)oklch(26.0% 0.000 0)—
前景色foreground#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.52 AAA
カーソルcursor#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.52 AAA
カーソルの文字cursorText#242424rgb(36 36 36)hsl(0 0% 14%)oklch(26.0% 0.000 0)1.00 AA 未満
選択範囲selection#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.52 AAA
選択範囲の文字selectionText#242424rgb(36 36 36)hsl(0 0% 14%)oklch(26.0% 0.000 0)1.00 AA 未満
黒color0#242424rgb(36 36 36)hsl(0 0% 14%)oklch(26.0% 0.000 0)1.00 AA 未満
赤color1#f62b5argb(246 43 90)hsl(346 92% 57%)oklch(63.4% 0.232 15.3)4.00 AA(大きな文字)
緑color2#47b413rgb(71 180 19)hsl(101 81% 39%)oklch(68.0% 0.207 138.8)5.77 AA
黄color3#e3c401rgb(227 196 1)hsl(52 99% 45%)oklch(82.2% 0.170 97.6)8.99 AAA
青color4#24acd4rgb(36 172 212)hsl(194 71% 49%)oklch(69.4% 0.122 223.7)5.86 AA
マゼンタcolor5#f2affdrgb(242 175 253)hsl(292 95% 84%)oklch(84.2% 0.128 321.7)9.11 AAA
シアンcolor6#13c299rgb(19 194 153)hsl(166 82% 42%)oklch(72.5% 0.141 170.2)6.80 AA
白color7#e6e6e6rgb(230 230 230)hsl(0 0% 90%)oklch(92.5% 0.000 0)12.44 AAA
明るい黒color8#616161rgb(97 97 97)hsl(0 0% 38%)oklch(49.3% 0.000 0)2.51 AA 未満
明るい赤color9#ff4d51rgb(255 77 81)hsl(359 100% 65%)oklch(67.4% 0.214 23.9)4.75 AA
明るい緑color10#35d450rgb(53 212 80)hsl(130 65% 52%)oklch(76.3% 0.217 145.5)7.90 AAA
明るい黄color11#e9e836rgb(233 232 54)hsl(60 80% 56%)oklch(90.3% 0.183 109.2)11.87 AAA
明るい青color12#5dc5f8rgb(93 197 248)hsl(200 92% 67%)oklch(78.2% 0.120 232.5)7.99 AAA
明るいマゼンタcolor13#feabf2rgb(254 171 242)hsl(309 98% 83%)oklch(84.4% 0.132 331.9)9.11 AAA
明るいシアンcolor14#24dfc4rgb(36 223 196)hsl(171 75% 51%)oklch(81.2% 0.143 179.4)9.19 AAA
明るい白color15#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.52 AAA

Starlight について

Starlight はニュートラルのダーク背景(#242424)を採用し、標準の前景色に #ffffff を使ったターミナル配色です。本文の WCAG コントラスト比は 15.52:1(AAA)、12 色の ANSI カラーは平均 7.61:1、最小 4.00:1 です。

パレット全体は適度な彩度で、赤 #f62b5a、緑 #47b413、青 #24acd4、マゼンタ #f2affd を基調としています。

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

Starlight に似た配色

データ出典:iTerm2 Color Schemes (Unlicense)