Terminal Black to Seashell Color Palette

About this palette

Terminal Black to Seashell is a 5-color muted palette: #1D3229 (Terminal Black), #9D786A (Woodhaven), #496F5D (Toad King), #BDC2E1 (Stardust Evening), #FFF6F2 (Seashell). It mixes gray, orange, green, purple, white tones and feels cool overall. The strongest text pairing is #1D3229 on #FFF6F2 with a contrast ratio of 12.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terminal Black	rgb(29, 50, 41)	hsl(154, 27%, 15%)
Woodhaven	rgb(157, 120, 106)	hsl(16, 21%, 52%)
Toad King	rgb(73, 111, 93)	hsl(152, 21%, 36%)
Stardust Evening	rgb(189, 194, 225)	hsl(232, 37%, 81%)
Seashell	rgb(255, 246, 242)	hsl(18, 100%, 97%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa12.80:1 Super#1D3229 on #FFF6F2
Aa12.80:1 Super#FFF6F2 on #1D3229
Aa7.77:1 Very good#1D3229 on #BDC2E1
Aa7.77:1 Very good#BDC2E1 on #1D3229
Aa5.31:1 Good#496F5D on #FFF6F2
Aa5.31:1 Good#FFF6F2 on #496F5D
Aa3.70:1 Poor#9D786A on #FFF6F2
Aa3.70:1 Poor#FFF6F2 on #9D786A

Color blindness preview

CSS variables

/* Terminal Black to Seashell — https://swatchly.xyz/palette/1d3229-9d786a-496f5d-bdc2e1-fff6f2 */
:root {
  --terminal-black: #1d3229;
  --woodhaven: #9d786a;
  --toad-king: #496f5d;
  --stardust-evening: #bdc2e1;
  --seashell: #fff6f2;
}

Tailwind CSS v4

/* Terminal Black to Seashell — https://swatchly.xyz/palette/1d3229-9d786a-496f5d-bdc2e1-fff6f2 */
@theme {
  --color-terminal-black: #1d3229;
  --color-terminal-black-50: #ebf9f2;
  --color-terminal-black-100: #e0f0e8;
  --color-terminal-black-200: #caddd4;
  --color-terminal-black-300: #b1c7bd;
  --color-terminal-black-400: #8fa79c;
  --color-terminal-black-500: #738a7f;
  --color-terminal-black-600: #586e64;
  --color-terminal-black-700: #42564d;
  --color-terminal-black-800: #31423a;
  --color-terminal-black-900: #1d3229;
  --color-terminal-black-950: #131d19;
  --color-woodhaven: #9d786a;
  --color-woodhaven-50: #fff1ec;
  --color-woodhaven-100: #fee3d9;
  --color-woodhaven-200: #eccdc2;
  --color-woodhaven-300: #d8b5a8;
  --color-woodhaven-400: #b99486;
  --color-woodhaven-500: #9d786a;
  --color-woodhaven-600: #825f52;
  --color-woodhaven-700: #694a3e;
  --color-woodhaven-800: #54392f;
  --color-woodhaven-900: #422b23;
  --color-woodhaven-950: #2a1a14;
  --color-toad-king: #496f5d;
  --color-toad-king-50: #e5fcf0;
  --color-toad-king-100: #d7f1e4;
  --color-toad-king-200: #bfdece;
  --color-toad-king-300: #a4c7b5;
  --color-toad-king-400: #81a794;
  --color-toad-king-500: #648b78;
  --color-toad-king-600: #496f5d;
  --color-toad-king-700: #375849;
  --color-toad-king-800: #284638;
  --color-toad-king-900: #1d362b;
  --color-toad-king-950: #10221a;
  --color-stardust-evening: #bdc2e1;
  --color-stardust-evening-50: #f5f6ff;
  --color-stardust-evening-100: #e9ecff;
  --color-stardust-evening-200: #d5d9f0;
  --color-stardust-evening-300: #bdc2e1;
  --color-stardust-evening-400: #9ea2bf;
  --color-stardust-evening-500: #8286a3;
  --color-stardust-evening-600: #676b87;
  --color-stardust-evening-700: #51546d;
  --color-stardust-evening-800: #3e4157;
  --color-stardust-evening-900: #2f3143;
  --color-stardust-evening-950: #1c1e2b;
  --color-seashell: #fff6f2;
  --color-seashell-50: #fff6f2;
  --color-seashell-100: #f2ecea;
  --color-seashell-200: #ded8d5;
  --color-seashell-300: #c8c1bd;
  --color-seashell-400: #a8a09d;
  --color-seashell-500: #8d8581;
  --color-seashell-600: #726a67;
  --color-seashell-700: #5a5451;
  --color-seashell-800: #47413e;
  --color-seashell-900: #37322f;
  --color-seashell-950: #221e1d;
}