本文へスキップ

Cobweb

Cobweb はダーク系のターミナル配色(落ち着いた・パステル)。背景色 #20272d、文字色 #eef1f3、コントラスト比 13.3:1

設定を取得
背景色
#20272d
前景色
#eef1f3
文字のコントラスト
13.32:1AAA
アクセントのコントラスト
8.26:1最小 6.35
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
❯

Cobweb の設定ファイル

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

Cobweb

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

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

palette = 0=#aeb5ba
palette = 1=#ed8e88
palette = 2=#9bc6a3
palette = 3=#dec575
palette = 4=#92bad5
palette = 5=#bba4c9
palette = 6=#88c8c8
palette = 7=#eef1f3
palette = 8=#c3c9cd
palette = 9=#f0a7a1
palette = 10=#afd3b6
palette = 11=#e8d493
palette = 12=#abcde0
palette = 13=#cab8d4
palette = 14=#a4d6d6
palette = 15=#ffffff
background = #20272d
foreground = #eef1f3
cursor-color = #e7ebee
cursor-text = #20272d
selection-background = #3d454c
selection-foreground = #ffffff

Cobweb のパレット

パレット各スロットの色値と背景に対する WCAG コントラスト比
カラースロットHEXRGBHSLOKLCHコントラスト
背景色background#20272drgb(32 39 45)hsl(208 17% 15%)oklch(26.8% 0.015 244.2)—
前景色foreground#eef1f3rgb(238 241 243)hsl(204 17% 94%)oklch(95.6% 0.004 236.5)13.32 AAA
カーソルcursor#e7ebeergb(231 235 238)hsl(206 17% 92%)oklch(93.8% 0.006 239.8)12.61 AAA
カーソルの文字cursorText#20272drgb(32 39 45)hsl(208 17% 15%)oklch(26.8% 0.015 244.2)1.00 AA 未満
選択範囲selection#3d454crgb(61 69 76)hsl(208 11% 27%)oklch(38.6% 0.016 244.6)1.55 AA 未満
選択範囲の文字selectionText#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.11 AAA
黒color0#aeb5bargb(174 181 186)hsl(205 8% 71%)oklch(76.9% 0.011 238.6)7.28 AAA
赤color1#ed8e88rgb(237 142 136)hsl(4 74% 73%)oklch(74.5% 0.116 24.1)6.35 AA
緑color2#9bc6a3rgb(155 198 163)hsl(131 27% 69%)oklch(78.6% 0.067 150.2)7.92 AAA
黄color3#dec575rgb(222 197 117)hsl(46 61% 66%)oklch(82.7% 0.104 92.6)8.89 AAA
青color4#92bad5rgb(146 186 213)hsl(204 44% 70%)oklch(76.9% 0.058 238.0)7.35 AAA
マゼンタcolor5#bba4c9rgb(187 164 201)hsl(277 26% 72%)oklch(75.1% 0.058 312.7)6.67 AA
シアンcolor6#88c8c8rgb(136 200 200)hsl(180 37% 66%)oklch(79.0% 0.065 195.9)8.02 AAA
白color7#eef1f3rgb(238 241 243)hsl(204 17% 94%)oklch(95.6% 0.004 236.5)13.32 AAA
明るい黒color8#c3c9cdrgb(195 201 205)hsl(204 9% 78%)oklch(83.2% 0.009 236.6)9.04 AAA
明るい赤color9#f0a7a1rgb(240 167 161)hsl(5 72% 79%)oklch(79.7% 0.087 24.4)7.73 AAA
明るい緑color10#afd3b6rgb(175 211 182)hsl(132 29% 76%)oklch(83.3% 0.055 150.8)9.22 AAA
明るい黄color11#e8d493rgb(232 212 147)hsl(46 65% 74%)oklch(87.1% 0.086 93.0)10.27 AAA
明るい青color12#abcde0rgb(171 205 224)hsl(202 46% 77%)oklch(83.0% 0.045 232.5)9.03 AAA
明るいマゼンタcolor13#cab8d4rgb(202 184 212)hsl(279 25% 78%)oklch(80.6% 0.043 313.6)8.15 AAA
明るいシアンcolor14#a4d6d6rgb(164 214 214)hsl(180 38% 74%)oklch(84.1% 0.052 196.2)9.48 AAA
明るい白color15#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.11 AAA

Cobweb について

Cobweb は寒色寄りのダーク背景(#20272d)を採用し、標準の前景色に #eef1f3 を使ったターミナル配色です。本文の WCAG コントラスト比は 13.32:1(AAA)、12 色の ANSI カラーは平均 8.26:1、最小 6.35:1 です。

パレット全体は彩度が控えめで、赤 #ed8e88、緑 #9bc6a3、青 #92bad5、マゼンタ #bba4c9 を基調としています。

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

Cobweb に似た配色

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