Toad to Seashell Color Palette

About this palette

Toad to Seashell is a 5-color muted, cool palette: #778C6D (Toad), #554865 (Nightly Walk), #162931 (Black Box), #BBABD2 (Pastel Lilac), #FFF6F2 (Seashell). It mixes green, purple, gray, white tones and feels cool overall. The strongest text pairing is #162931 on #FFF6F2 with a contrast ratio of 14.13:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Toad	rgb(119, 140, 109)	hsl(101, 12%, 49%)
Nightly Walk	rgb(85, 72, 101)	hsl(267, 17%, 34%)
Black Box	rgb(22, 41, 49)	hsl(198, 38%, 14%)
Pastel Lilac	rgb(187, 171, 210)	hsl(265, 30%, 75%)
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.

Aa14.13:1 Super#162931 on #FFF6F2
Aa14.13:1 Super#FFF6F2 on #162931
Aa7.88:1 Very good#554865 on #FFF6F2
Aa7.88:1 Very good#FFF6F2 on #554865
Aa7.07:1 Very good#162931 on #BBABD2
Aa7.07:1 Very good#BBABD2 on #162931
Aa4.12:1 Poor#778C6D on #162931
Aa4.12:1 Poor#162931 on #778C6D

Color blindness preview

CSS variables

/* Toad to Seashell — https://swatchly.xyz/palette/778c6d-554865-162931-bbabd2-fff6f2 */
:root {
  --toad: #778c6d;
  --nightly-walk: #554865;
  --black-box: #162931;
  --pastel-lilac: #bbabd2;
  --seashell: #fff6f2;
}

Tailwind CSS v4

/* Toad to Seashell — https://swatchly.xyz/palette/778c6d-554865-162931-bbabd2-fff6f2 */
@theme {
  --color-toad: #778c6d;
  --color-toad-50: #edfae7;
  --color-toad-100: #e1f0db;
  --color-toad-200: #ccddc4;
  --color-toad-300: #b3c7aa;
  --color-toad-400: #93a889;
  --color-toad-500: #778c6d;
  --color-toad-600: #5e7154;
  --color-toad-700: #495b40;
  --color-toad-800: #374730;
  --color-toad-900: #2a3723;
  --color-toad-950: #192214;
  --color-nightly-walk: #554865;
  --color-nightly-walk-50: #f8f2ff;
  --color-nightly-walk-100: #f0e6fc;
  --color-nightly-walk-200: #dcd1eb;
  --color-nightly-walk-300: #c5b8d5;
  --color-nightly-walk-400: #a597b7;
  --color-nightly-walk-500: #887a9a;
  --color-nightly-walk-600: #6c5f7d;
  --color-nightly-walk-700: #554865;
  --color-nightly-walk-800: #42384e;
  --color-nightly-walk-900: #332a3d;
  --color-nightly-walk-950: #1f1927;
  --color-black-box: #162931;
  --color-black-box-50: #ebf8fe;
  --color-black-box-100: #dfeef5;
  --color-black-box-200: #cadbe3;
  --color-black-box-300: #b1c5cd;
  --color-black-box-400: #90a5af;
  --color-black-box-500: #768c95;
  --color-black-box-600: #5d727c;
  --color-black-box-700: #495d65;
  --color-black-box-800: #394a52;
  --color-black-box-900: #2d3b42;
  --color-black-box-950: #162931;
  --color-pastel-lilac: #bbabd2;
  --color-pastel-lilac-50: #f2eaff;
  --color-pastel-lilac-100: #e7dcf8;
  --color-pastel-lilac-200: #d2c5e5;
  --color-pastel-lilac-300: #bbabd2;
  --color-pastel-lilac-400: #9e8fb4;
  --color-pastel-lilac-500: #85769a;
  --color-pastel-lilac-600: #6c5e80;
  --color-pastel-lilac-700: #574a69;
  --color-pastel-lilac-800: #463a55;
  --color-pastel-lilac-900: #372d45;
  --color-pastel-lilac-950: #231b2c;
  --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;
}