Cosmic Bit Flip to June Ivy Color Palette

About this palette

Cosmic Bit Flip to June Ivy is a 5-color dark, cool, earthy, gradient palette: #021000 (Cosmic Bit Flip), #141D00 (Nightmare), #00451C (Deep Pond), #4E4530 (Olive Leaf), #47665E (June Ivy). It mixes black, green, brown, turquoise tones and feels cool overall. The strongest text pairing is #021000 on #47665E with a contrast ratio of 3.09:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cosmic Bit Flip	rgb(2, 16, 0)	hsl(112, 100%, 3%)
Nightmare	rgb(20, 29, 0)	hsl(79, 100%, 6%)
Deep Pond	rgb(0, 69, 28)	hsl(144, 100%, 14%)
Olive Leaf	rgb(78, 69, 48)	hsl(42, 24%, 25%)
June Ivy	rgb(71, 102, 94)	hsl(165, 18%, 34%)

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.

Aa3.09:1 Poor#021000 on #47665E
Aa3.09:1 Poor#47665E on #021000

Color blindness preview

CSS variables

/* Cosmic Bit Flip to June Ivy — https://swatchly.xyz/palette/021000-141d00-00451c-4e4530-47665e */
:root {
  --cosmic-bit-flip: #021000;
  --nightmare: #141d00;
  --deep-pond: #00451c;
  --olive-leaf: #4e4530;
  --june-ivy: #47665e;
}

Tailwind CSS v4

/* Cosmic Bit Flip to June Ivy — https://swatchly.xyz/palette/021000-141d00-00451c-4e4530-47665e */
@theme {
  --color-cosmic-bit-flip: #021000;
  --color-cosmic-bit-flip-50: #edfae9;
  --color-cosmic-bit-flip-100: #e2f0dd;
  --color-cosmic-bit-flip-200: #ccdec7;
  --color-cosmic-bit-flip-300: #b4c8af;
  --color-cosmic-bit-flip-400: #93a98d;
  --color-cosmic-bit-flip-500: #73896e;
  --color-cosmic-bit-flip-600: #566a51;
  --color-cosmic-bit-flip-700: #3e4f39;
  --color-cosmic-bit-flip-800: #2a3826;
  --color-cosmic-bit-flip-900: #1a2417;
  --color-cosmic-bit-flip-950: #021000;
  --color-nightmare: #141d00;
  --color-nightmare-50: #f1f9e4;
  --color-nightmare-100: #e6efd8;
  --color-nightmare-200: #d2dcc0;
  --color-nightmare-300: #bac6a7;
  --color-nightmare-400: #9aa785;
  --color-nightmare-500: #7e8b67;
  --color-nightmare-600: #636f4d;
  --color-nightmare-700: #4c5638;
  --color-nightmare-800: #394228;
  --color-nightmare-900: #29311c;
  --color-nightmare-950: #141d00;
  --color-deep-pond: #00451c;
  --color-deep-pond-50: #dfffe4;
  --color-deep-pond-100: #d1f7d7;
  --color-deep-pond-200: #b8e5c0;
  --color-deep-pond-300: #9cd0a6;
  --color-deep-pond-400: #79b385;
  --color-deep-pond-500: #5d986a;
  --color-deep-pond-600: #447e52;
  --color-deep-pond-700: #30673e;
  --color-deep-pond-800: #21532f;
  --color-deep-pond-900: #00451c;
  --color-deep-pond-950: #0a2b14;
  --color-olive-leaf: #4e4530;
  --color-olive-leaf-50: #fbf5e7;
  --color-olive-leaf-100: #f1ebdb;
  --color-olive-leaf-200: #dfd7c5;
  --color-olive-leaf-300: #cac1ac;
  --color-olive-leaf-400: #aca28b;
  --color-olive-leaf-500: #918770;
  --color-olive-leaf-600: #776d57;
  --color-olive-leaf-700: #605843;
  --color-olive-leaf-800: #4e4530;
  --color-olive-leaf-900: #3c3526;
  --color-olive-leaf-950: #262116;
  --color-june-ivy: #47665e;
  --color-june-ivy-50: #e7faf5;
  --color-june-ivy-100: #dbf1eb;
  --color-june-ivy-200: #c7e0d9;
  --color-june-ivy-300: #afccc4;
  --color-june-ivy-400: #8fafa6;
  --color-june-ivy-500: #75958c;
  --color-june-ivy-600: #5c7c73;
  --color-june-ivy-700: #47665e;
  --color-june-ivy-800: #365049;
  --color-june-ivy-900: #273e38;
  --color-june-ivy-950: #172723;
}