Cosmic Bit Flip to Teal With It color palette

001301Cosmic Bit Flip 281F00Burnt Coffee 00323AElite Teal 235016Mysterious Mixture 006D76Teal With It

Open in generator Export PNG, PDF, ASE…

About this palette

Cosmic Bit Flip to Teal With It is a 5-color dark, cool, gradient palette: #001301 (Cosmic Bit Flip), #281F00 (Burnt Coffee), #00323A (Elite Teal), #235016 (Mysterious Mixture), #006D76 (Teal With It). It mixes black, brown, turquoise, green tones and feels cool overall. The strongest text pairing is #001301 on #006D76 with a contrast ratio of 3.15: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, 1)	hsl(123, 100%, 4%)
Burnt Coffee	rgb(40, 31, 0)	hsl(46, 100%, 8%)
Elite Teal	rgb(0, 50, 58)	hsl(188, 100%, 11%)
Mysterious Mixture	rgb(35, 80, 22)	hsl(107, 57%, 20%)
Teal With It	rgb(0, 109, 118)	hsl(185, 100%, 23%)

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.15:1 Poor#001301 on #006D76
Aa3.15:1 Poor#006D76 on #001301

Color blindness preview

CSS variables

/* Cosmic Bit Flip to Teal With It — https://swatchly.xyz/palette/001301-281f00-00323a-235016-006d76 */
:root {
  --cosmic-bit-flip: #001301;
  --burnt-coffee: #281f00;
  --elite-teal: #00323a;
  --mysterious-mixture: #235016;
  --teal-with-it: #006d76;
}

Tailwind CSS v4

/* Cosmic Bit Flip to Teal With It — https://swatchly.xyz/palette/001301-281f00-00323a-235016-006d76 */
@theme {
  --color-cosmic-bit-flip: #001301;
  --color-cosmic-bit-flip-50: #eafbe9;
  --color-cosmic-bit-flip-100: #dff1de;
  --color-cosmic-bit-flip-200: #c9dfc8;
  --color-cosmic-bit-flip-300: #b0c9af;
  --color-cosmic-bit-flip-400: #8faa8e;
  --color-cosmic-bit-flip-500: #708b6f;
  --color-cosmic-bit-flip-600: #536c52;
  --color-cosmic-bit-flip-700: #3b513b;
  --color-cosmic-bit-flip-800: #283a28;
  --color-cosmic-bit-flip-900: #192719;
  --color-cosmic-bit-flip-950: #001301;
  --color-burnt-coffee: #281f00;
  --color-burnt-coffee-50: #fbf5e1;
  --color-burnt-coffee-100: #f2ebd5;
  --color-burnt-coffee-200: #e0d7bd;
  --color-burnt-coffee-300: #cac1a2;
  --color-burnt-coffee-400: #aba180;
  --color-burnt-coffee-500: #908664;
  --color-burnt-coffee-600: #766c4b;
  --color-burnt-coffee-700: #5e5538;
  --color-burnt-coffee-800: #4a4328;
  --color-burnt-coffee-900: #3a331d;
  --color-burnt-coffee-950: #281f00;
  --color-elite-teal: #00323a;
  --color-elite-teal-50: #e3faff;
  --color-elite-teal-100: #d4f1f7;
  --color-elite-teal-200: #bcdfe6;
  --color-elite-teal-300: #a2c9d1;
  --color-elite-teal-400: #7da9b2;
  --color-elite-teal-500: #5f8c95;
  --color-elite-teal-600: #457078;
  --color-elite-teal-700: #30575e;
  --color-elite-teal-800: #204248;
  --color-elite-teal-900: #00323a;
  --color-elite-teal-950: #0a1d21;
  --color-mysterious-mixture: #235016;
  --color-mysterious-mixture-50: #e3ffdc;
  --color-mysterious-mixture-100: #d6f6ce;
  --color-mysterious-mixture-200: #bfe4b5;
  --color-mysterious-mixture-300: #a5cf9a;
  --color-mysterious-mixture-400: #82b177;
  --color-mysterious-mixture-500: #66965a;
  --color-mysterious-mixture-600: #4d7b41;
  --color-mysterious-mixture-700: #39632e;
  --color-mysterious-mixture-800: #235016;
  --color-mysterious-mixture-900: #1d3d15;
  --color-mysterious-mixture-950: #102609;
  --color-teal-with-it: #006d76;
  --color-teal-with-it-50: #defcff;
  --color-teal-with-it-100: #c4f6fb;
  --color-teal-with-it-200: #aae6ec;
  --color-teal-with-it-300: #8ed3da;
  --color-teal-with-it-400: #67b6bf;
  --color-teal-with-it-500: #479ca5;
  --color-teal-with-it-600: #29838c;
  --color-teal-with-it-700: #006d76;
  --color-teal-with-it-800: #00555d;
  --color-teal-with-it-900: #004248;
  --color-teal-with-it-950: #002a2e;
}