Skip to content
Tintdex

Material Design Colors

Material Design Colors is a cool, dark terminal color scheme with a #1d262a background and #e7ebed text (12.8:1 contrast)

Get config
Background
#1d262a
Foreground
#e7ebed
Text contrast
12.84:1AAA
Accent contrast
8.83:1min 4.10
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
❯

Material Design Colors configs

16 formats, all from one palette

Material Design Colors

Save to ~/.config/ghostty/themes/Material Design Colors, then set theme = Material Design Colors in config or config.ghostty

More Ghostty themes
Raw file
# Theme: Material Design Colors (Ghostty)
# Preview & customize online: https://tintdex.afengim.com/en/schemes/material-design-colors?format=ghostty

palette = 0=#435b67
palette = 1=#fc3841
palette = 2=#5cf19e
palette = 3=#fed032
palette = 4=#37b6ff
palette = 5=#fc226e
palette = 6=#59ffd1
palette = 7=#ffffff
palette = 8=#a1b0b8
palette = 9=#fc746d
palette = 10=#adf7be
palette = 11=#fee16c
palette = 12=#70cfff
palette = 13=#fc669b
palette = 14=#9affe6
palette = 15=#ffffff
background = #1d262a
foreground = #e7ebed
cursor-color = #eaeaea
cursor-text = #000000
selection-background = #4e6a78
selection-foreground = #e7ebed

Material Design Colors palette

Palette color values and WCAG contrast ratios against the background
ColorSlotHEXRGBHSLOKLCHContrast
Backgroundbackground#1d262argb(29 38 42)hsl(198 18% 14%)oklch(26.2% 0.015 226.7)—
Foregroundforeground#e7ebedrgb(231 235 237)hsl(200 14% 92%)oklch(93.8% 0.005 228.8)12.84 AAA
Cursorcursor#eaeaeargb(234 234 234)hsl(0 0% 92%)oklch(93.7% 0.000 0)12.81 AAA
Cursor textcursorText#000000rgb(0 0 0)hsl(0 0% 0%)oklch(0.0% 0.000 0)1.36 Fail
Selectionselection#4e6a78rgb(78 106 120)hsl(200 21% 39%)oklch(50.8% 0.040 230.1)2.68 Fail
Selection textselectionText#e7ebedrgb(231 235 237)hsl(200 14% 92%)oklch(93.8% 0.005 228.8)12.84 AAA
Blackcolor0#435b67rgb(67 91 103)hsl(200 21% 33%)oklch(45.6% 0.035 230.1)2.15 Fail
Redcolor1#fc3841rgb(252 56 65)hsl(357 97% 60%)oklch(64.9% 0.230 24.5)4.24 AA Large
Greencolor2#5cf19ergb(92 241 158)hsl(147 84% 65%)oklch(85.8% 0.173 155.4)10.66 AAA
Yellowcolor3#fed032rgb(254 208 50)hsl(46 99% 60%)oklch(87.3% 0.167 91.2)10.48 AAA
Bluecolor4#37b6ffrgb(55 182 255)hsl(202 100% 61%)oklch(74.1% 0.150 239.5)6.82 AA
Magentacolor5#fc226ergb(252 34 110)hsl(339 97% 56%)oklch(64.4% 0.244 8.9)4.10 AA Large
Cyancolor6#59ffd1rgb(89 255 209)hsl(163 100% 67%)oklch(90.2% 0.152 170.8)12.22 AAA
Whitecolor7#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.41 AAA
Bright Blackcolor8#a1b0b8rgb(161 176 184)hsl(201 14% 68%)oklch(74.8% 0.020 230.8)6.91 AA
Bright Redcolor9#fc746drgb(252 116 109)hsl(3 96% 71%)oklch(72.0% 0.168 25.1)5.77 AA
Bright Greencolor10#adf7bergb(173 247 190)hsl(134 82% 82%)oklch(91.3% 0.107 151.0)12.34 AAA
Bright Yellowcolor11#fee16crgb(254 225 108)hsl(48 99% 71%)oklch(91.1% 0.140 95.6)11.89 AAA
Bright Bluecolor12#70cfffrgb(112 207 255)hsl(200 100% 72%)oklch(81.4% 0.113 232.4)8.85 AAA
Bright Magentacolor13#fc669brgb(252 102 155)hsl(339 96% 69%)oklch(71.3% 0.189 1.1)5.51 AA
Bright Cyancolor14#9affe6rgb(154 255 230)hsl(165 100% 80%)oklch(93.1% 0.102 176.3)13.08 AAA
Bright Whitecolor15#ffffffrgb(255 255 255)hsl(0 0% 100%)oklch(100.0% 0.000 0)15.41 AAA

About Material Design Colors

Material Design Colors is a dark terminal color scheme built on a cool-tinted #1d262a background with #e7ebed as the default foreground. Body text reaches a 12.84:1 WCAG contrast ratio (AAA), while the 12 ANSI accent colors average 8.83:1 (minimum 4.10:1).

Its palette is moderately saturated, anchored by #fc3841 red, #5cf19e green, #37b6ff blue, and #fc226e magenta. Part of the Material theme family.

Ready-to-use configs can be exported for Ghostty, iTerm2, Kitty, Alacritty, WezTerm, Windows Terminal, Warp, foot, Rio, XFCE4 Terminal, and Xresources, along with VS Code and Zed integrated terminals, CSS variables, Tailwind CSS, and JSON.

Schemes similar to Material Design Colors

Source: iTerm2 Color Schemes (MIT)