Twilight Zone to Irish Clover Color Palette

About this palette

Twilight Zone to Irish Clover is a 4-color cool palette: #101911 (Twilight Zone), #B8ECDD (Water Leaf), #2FB7C4 (Glassmith), #4C6F4D (Irish Clover). It mixes black, turquoise, green tones and feels cool overall. The strongest text pairing is #101911 on #B8ECDD with a contrast ratio of 13.75:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Twilight Zone	rgb(16, 25, 17)	hsl(127, 22%, 8%)
Water Leaf	rgb(184, 236, 221)	hsl(163, 58%, 82%)
Glassmith	rgb(47, 183, 196)	hsl(185, 61%, 48%)
Irish Clover	rgb(76, 111, 77)	hsl(122, 19%, 37%)

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.

Aa13.75:1 Super#101911 on #B8ECDD
Aa13.75:1 Super#B8ECDD on #101911
Aa7.43:1 Very good#101911 on #2FB7C4
Aa7.43:1 Very good#2FB7C4 on #101911
Aa4.36:1 Poor#B8ECDD on #4C6F4D
Aa4.36:1 Poor#4C6F4D on #B8ECDD
Aa3.15:1 Poor#101911 on #4C6F4D
Aa3.15:1 Poor#4C6F4D on #101911

Color blindness preview

CSS variables

/* Twilight Zone to Irish Clover — https://swatchly.xyz/palette/101911-b8ecdd-2fb7c4-4c6f4d */
:root {
  --twilight-zone: #101911;
  --water-leaf: #b8ecdd;
  --glassmith: #2fb7c4;
  --irish-clover: #4c6f4d;
}

Tailwind CSS v4

/* Twilight Zone to Irish Clover — https://swatchly.xyz/palette/101911-b8ecdd-2fb7c4-4c6f4d */
@theme {
  --color-twilight-zone: #101911;
  --color-twilight-zone-50: #f0f7f1;
  --color-twilight-zone-100: #e6eee6;
  --color-twilight-zone-200: #d1dad2;
  --color-twilight-zone-300: #bac4bb;
  --color-twilight-zone-400: #9aa59b;
  --color-twilight-zone-500: #7c887d;
  --color-twilight-zone-600: #616b62;
  --color-twilight-zone-700: #49534a;
  --color-twilight-zone-800: #363e37;
  --color-twilight-zone-900: #262d27;
  --color-twilight-zone-950: #101911;
  --color-water-leaf: #b8ecdd;
  --color-water-leaf-50: #edfff9;
  --color-water-leaf-100: #dcf9f0;
  --color-water-leaf-200: #b8ecdd;
  --color-water-leaf-300: #a8d2c5;
  --color-water-leaf-400: #82b2a4;
  --color-water-leaf-500: #649588;
  --color-water-leaf-600: #49796c;
  --color-water-leaf-700: #346055;
  --color-water-leaf-800: #244b41;
  --color-water-leaf-900: #183a32;
  --color-water-leaf-950: #0c241e;
  --color-glassmith: #2fb7c4;
  --color-glassmith-50: #e0fcff;
  --color-glassmith-100: #bef8ff;
  --color-glassmith-200: #95e9f2;
  --color-glassmith-300: #70d4df;
  --color-glassmith-400: #2fb7c4;
  --color-glassmith-500: #009aa6;
  --color-glassmith-600: #007c86;
  --color-glassmith-700: #00626a;
  --color-glassmith-800: #004d53;
  --color-glassmith-900: #003b40;
  --color-glassmith-950: #002528;
  --color-irish-clover: #4c6f4d;
  --color-irish-clover-50: #e7fce7;
  --color-irish-clover-100: #d9f2d9;
  --color-irish-clover-200: #c1dec1;
  --color-irish-clover-300: #a6c7a7;
  --color-irish-clover-400: #84a884;
  --color-irish-clover-500: #678b68;
  --color-irish-clover-600: #4c6f4d;
  --color-irish-clover-700: #3a583b;
  --color-irish-clover-800: #2b462c;
  --color-irish-clover-900: #203620;
  --color-irish-clover-950: #122212;
}