Cosmic Bit Flip to Terrestrial color palette

001300Cosmic Bit Flip 002232Midnight Dreams 2E3100Wasabi Nori 364719Treetop Cathedral 006C5FTerrestrial

Open in generator Export PNG, PDF, ASE…

About this palette

Cosmic Bit Flip to Terrestrial is a 5-color dark, cool, gradient palette: #001300 (Cosmic Bit Flip), #002232 (Midnight Dreams), #2E3100 (Wasabi Nori), #364719 (Treetop Cathedral), #006C5F (Terrestrial). It mixes black, blue, green, turquoise tones and feels cool overall. The strongest text pairing is #001300 on #006C5F with a contrast ratio of 3.03:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cosmic Bit Flip	rgb(0, 19, 0)	hsl(120, 100%, 4%)
Midnight Dreams	rgb(0, 34, 50)	hsl(199, 100%, 10%)
Wasabi Nori	rgb(46, 49, 0)	hsl(64, 100%, 10%)
Treetop Cathedral	rgb(54, 71, 25)	hsl(82, 48%, 19%)
Terrestrial	rgb(0, 108, 95)	hsl(173, 100%, 21%)

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.03:1 Poor#001300 on #006C5F
Aa3.03:1 Poor#006C5F on #001300

Color blindness preview

CSS variables

/* Cosmic Bit Flip to Terrestrial — https://swatchly.xyz/palette/001300-002232-2e3100-364719-006c5f */
:root {
  --cosmic-bit-flip: #001300;
  --midnight-dreams: #002232;
  --wasabi-nori: #2e3100;
  --treetop-cathedral: #364719;
  --terrestrial: #006c5f;
}

Tailwind CSS v4

/* Cosmic Bit Flip to Terrestrial — https://swatchly.xyz/palette/001300-002232-2e3100-364719-006c5f */
@theme {
  --color-cosmic-bit-flip: #001300;
  --color-cosmic-bit-flip-50: #eafbe8;
  --color-cosmic-bit-flip-100: #dff1dd;
  --color-cosmic-bit-flip-200: #c9dfc6;
  --color-cosmic-bit-flip-300: #b0c9ad;
  --color-cosmic-bit-flip-400: #8faa8c;
  --color-cosmic-bit-flip-500: #6f8b6d;
  --color-cosmic-bit-flip-600: #536c50;
  --color-cosmic-bit-flip-700: #3b5239;
  --color-cosmic-bit-flip-800: #283a27;
  --color-cosmic-bit-flip-900: #192718;
  --color-cosmic-bit-flip-950: #001300;
  --color-midnight-dreams: #002232;
  --color-midnight-dreams-50: #ebf7ff;
  --color-midnight-dreams-100: #d8effd;
  --color-midnight-dreams-200: #c1dcec;
  --color-midnight-dreams-300: #a7c6d8;
  --color-midnight-dreams-400: #85a7bb;
  --color-midnight-dreams-500: #698c9f;
  --color-midnight-dreams-600: #4f7183;
  --color-midnight-dreams-700: #3b596a;
  --color-midnight-dreams-800: #2b4654;
  --color-midnight-dreams-900: #1f3542;
  --color-midnight-dreams-950: #002232;
  --color-wasabi-nori: #2e3100;
  --color-wasabi-nori-50: #f5f8dc;
  --color-wasabi-nori-100: #ebefcf;
  --color-wasabi-nori-200: #d7dcb6;
  --color-wasabi-nori-300: #c0c69b;
  --color-wasabi-nori-400: #a0a577;
  --color-wasabi-nori-500: #848959;
  --color-wasabi-nori-600: #696d40;
  --color-wasabi-nori-700: #51552c;
  --color-wasabi-nori-800: #3e411d;
  --color-wasabi-nori-900: #2e3100;
  --color-wasabi-nori-950: #1b1d08;
  --color-treetop-cathedral: #364719;
  --color-treetop-cathedral-50: #eefbde;
  --color-treetop-cathedral-100: #e3f1d1;
  --color-treetop-cathedral-200: #cedfb9;
  --color-treetop-cathedral-300: #b6c89d;
  --color-treetop-cathedral-400: #95a97a;
  --color-treetop-cathedral-500: #798d5d;
  --color-treetop-cathedral-600: #5f7244;
  --color-treetop-cathedral-700: #4a5a30;
  --color-treetop-cathedral-800: #364719;
  --color-treetop-cathedral-900: #2a3617;
  --color-treetop-cathedral-950: #19210b;
  --color-terrestrial: #006c5f;
  --color-terrestrial-50: #d8fff6;
  --color-terrestrial-100: #c5f8ed;
  --color-terrestrial-200: #abe7db;
  --color-terrestrial-300: #8ed4c6;
  --color-terrestrial-400: #67b7a8;
  --color-terrestrial-500: #479c8e;
  --color-terrestrial-600: #2a8275;
  --color-terrestrial-700: #006c5f;
  --color-terrestrial-800: #00554a;
  --color-terrestrial-900: #004139;
  --color-terrestrial-950: #002923;
}