Cosmic Bit Flip to Coffee Adept color palette

001001Cosmic Bit Flip 221800Noir Mystique 003829Pitch-Black Forests 4A3613Café Noir 005A5BMosque 784E00Coffee Adept

Open in generator Export PNG, PDF, ASE…

About this palette

Cosmic Bit Flip to Coffee Adept is a 6-color dark palette: #001001 (Cosmic Bit Flip), #221800 (Noir Mystique), #003829 (Pitch-Black Forests), #4A3613 (Café Noir), #005A5B (Mosque), #784E00 (Coffee Adept). It mixes black, brown, turquoise tones and feels balanced overall. The strongest text pairing is #001001 on #784E00 with a contrast ratio of 2.69:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cosmic Bit Flip	rgb(0, 16, 1)	hsl(124, 100%, 3%)
Noir Mystique	rgb(34, 24, 0)	hsl(42, 100%, 7%)
Pitch-Black Forests	rgb(0, 56, 41)	hsl(164, 100%, 11%)
Café Noir	rgb(74, 54, 19)	hsl(38, 59%, 18%)
Mosque	rgb(0, 90, 91)	hsl(181, 100%, 18%)
Coffee Adept	rgb(120, 78, 0)	hsl(39, 100%, 24%)

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.

Color blindness preview

CSS variables

/* Cosmic Bit Flip to Coffee Adept — https://swatchly.xyz/palette/001001-221800-003829-4a3613-005a5b-784e00 */
:root {
  --cosmic-bit-flip: #001001;
  --noir-mystique: #221800;
  --pitch-black-forests: #003829;
  --caf-noir: #4a3613;
  --mosque: #005a5b;
  --coffee-adept: #784e00;
}

Tailwind CSS v4

/* Cosmic Bit Flip to Coffee Adept — https://swatchly.xyz/palette/001001-221800-003829-4a3613-005a5b-784e00 */
@theme {
  --color-cosmic-bit-flip: #001001;
  --color-cosmic-bit-flip-50: #ebfaeb;
  --color-cosmic-bit-flip-100: #e0f1df;
  --color-cosmic-bit-flip-200: #cadec9;
  --color-cosmic-bit-flip-300: #b1c8b1;
  --color-cosmic-bit-flip-400: #90a990;
  --color-cosmic-bit-flip-500: #708a70;
  --color-cosmic-bit-flip-600: #536b53;
  --color-cosmic-bit-flip-700: #3b4f3b;
  --color-cosmic-bit-flip-800: #283828;
  --color-cosmic-bit-flip-900: #182418;
  --color-cosmic-bit-flip-950: #001001;
  --color-noir-mystique: #221800;
  --color-noir-mystique-50: #fcf5e3;
  --color-noir-mystique-100: #f3ebd7;
  --color-noir-mystique-200: #e0d7c0;
  --color-noir-mystique-300: #cbc0a6;
  --color-noir-mystique-400: #aca084;
  --color-noir-mystique-500: #908467;
  --color-noir-mystique-600: #74684d;
  --color-noir-mystique-700: #5b5138;
  --color-noir-mystique-800: #463d28;
  --color-noir-mystique-900: #342d1b;
  --color-noir-mystique-950: #221800;
  --color-pitch-black-forests: #003829;
  --color-pitch-black-forests-50: #e1fdf1;
  --color-pitch-black-forests-100: #d4f4e7;
  --color-pitch-black-forests-200: #bce2d2;
  --color-pitch-black-forests-300: #a1ccbb;
  --color-pitch-black-forests-400: #7cad9a;
  --color-pitch-black-forests-500: #5f917e;
  --color-pitch-black-forests-600: #457563;
  --color-pitch-black-forests-700: #305c4d;
  --color-pitch-black-forests-800: #21473a;
  --color-pitch-black-forests-900: #003829;
  --color-pitch-black-forests-950: #0a2119;
  --color-caf-noir: #4a3613;
  --color-caf-noir-50: #fff4e2;
  --color-caf-noir-100: #f8e9d1;
  --color-caf-noir-200: #e7d5b9;
  --color-caf-noir-300: #d2be9e;
  --color-caf-noir-400: #b69f7c;
  --color-caf-noir-500: #9c8561;
  --color-caf-noir-600: #826c49;
  --color-caf-noir-700: #6b5737;
  --color-caf-noir-800: #574528;
  --color-caf-noir-900: #4a3613;
  --color-caf-noir-950: #2e2310;
  --color-mosque: #005a5b;
  --color-mosque-50: #d8fefe;
  --color-mosque-100: #caf5f5;
  --color-mosque-200: #ade2e2;
  --color-mosque-300: #8ecbcb;
  --color-mosque-400: #66abac;
  --color-mosque-500: #468f8f;
  --color-mosque-600: #2a7273;
  --color-mosque-700: #005a5b;
  --color-mosque-800: #064647;
  --color-mosque-900: #013637;
  --color-mosque-950: #002222;
  --color-coffee-adept: #784e00;
  --color-coffee-adept-50: #fff3e4;
  --color-coffee-adept-100: #ffe7c9;
  --color-coffee-adept-200: #f5d2a4;
  --color-coffee-adept-300: #e3ba86;
  --color-coffee-adept-400: #c69a5f;
  --color-coffee-adept-500: #ab7f40;
  --color-coffee-adept-600: #8f6524;
  --color-coffee-adept-700: #784e00;
  --color-coffee-adept-800: #5e3c00;
  --color-coffee-adept-900: #492e00;
  --color-coffee-adept-950: #2f1c00;
}