Black Stallion to Bubblegum Crisis color palette

0C161DBlack Stallion 0F3D57Maniac Mansion 655940Baby Bear 958A69Wilderness B18DC9Fleur-De-Lis E7D3FABubblegum Crisis

Open in generator Export PNG, PDF, ASE…

About this palette

Black Stallion to Bubblegum Crisis is a 6-color muted palette: #0C161D (Black Stallion), #0F3D57 (Maniac Mansion), #655940 (Baby Bear), #958A69 (Wilderness), #B18DC9 (Fleur-De-Lis), #E7D3FA (Bubblegum Crisis). It mixes black, blue, brown, yellow, purple tones and feels cool overall. The strongest text pairing is #0C161D on #E7D3FA with a contrast ratio of 13.15:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(12, 22, 29)	hsl(205, 41%, 8%)
Maniac Mansion	rgb(15, 61, 87)	hsl(202, 71%, 20%)
Baby Bear	rgb(101, 89, 64)	hsl(41, 22%, 32%)
Wilderness	rgb(149, 138, 105)	hsl(45, 17%, 50%)
Fleur-De-Lis	rgb(177, 141, 201)	hsl(276, 36%, 67%)
Bubblegum Crisis	rgb(231, 211, 250)	hsl(271, 80%, 90%)

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.15:1 Super#0C161D on #E7D3FA
Aa13.15:1 Super#E7D3FA on #0C161D
Aa8.27:1 Very good#0F3D57 on #E7D3FA
Aa8.27:1 Very good#E7D3FA on #0F3D57
Aa6.55:1 Good#0C161D on #B18DC9
Aa6.55:1 Good#B18DC9 on #0C161D
Aa5.33:1 Good#0C161D on #958A69
Aa5.33:1 Good#958A69 on #0C161D

Color blindness preview

CSS variables

/* Black Stallion to Bubblegum Crisis — https://swatchly.xyz/palette/0c161d-0f3d57-655940-958a69-b18dc9-e7d3fa */
:root {
  --black-stallion: #0c161d;
  --maniac-mansion: #0f3d57;
  --baby-bear: #655940;
  --wilderness: #958a69;
  --fleur-de-lis: #b18dc9;
  --bubblegum-crisis: #e7d3fa;
}

Tailwind CSS v4

/* Black Stallion to Bubblegum Crisis — https://swatchly.xyz/palette/0c161d-0f3d57-655940-958a69-b18dc9-e7d3fa */
@theme {
  --color-black-stallion: #0c161d;
  --color-black-stallion-50: #eff6fc;
  --color-black-stallion-100: #e4edf3;
  --color-black-stallion-200: #cfd9e1;
  --color-black-stallion-300: #b7c3cb;
  --color-black-stallion-400: #97a3ad;
  --color-black-stallion-500: #79868f;
  --color-black-stallion-600: #5d6972;
  --color-black-stallion-700: #465158;
  --color-black-stallion-800: #333c42;
  --color-black-stallion-900: #232a2f;
  --color-black-stallion-950: #0c161d;
  --color-maniac-mansion: #0f3d57;
  --color-maniac-mansion-50: #ecf7ff;
  --color-maniac-mansion-100: #d8efff;
  --color-maniac-mansion-200: #baddf5;
  --color-maniac-mansion-300: #a0c7e2;
  --color-maniac-mansion-400: #7ea9c6;
  --color-maniac-mansion-500: #628fac;
  --color-maniac-mansion-600: #497591;
  --color-maniac-mansion-700: #365f79;
  --color-maniac-mansion-800: #274c63;
  --color-maniac-mansion-900: #0f3d57;
  --color-maniac-mansion-950: #0f2635;
  --color-baby-bear: #655940;
  --color-baby-bear-50: #fcf4e5;
  --color-baby-bear-100: #f3ead9;
  --color-baby-bear-200: #e2d7c3;
  --color-baby-bear-300: #cdc2aa;
  --color-baby-bear-400: #b0a389;
  --color-baby-bear-500: #95886e;
  --color-baby-bear-600: #7b6f55;
  --color-baby-bear-700: #655940;
  --color-baby-bear-800: #4f4531;
  --color-baby-bear-900: #3d3523;
  --color-baby-bear-950: #272114;
  --color-wilderness: #958a69;
  --color-wilderness-50: #fcf6e3;
  --color-wilderness-100: #f4edd7;
  --color-wilderness-200: #e2dac0;
  --color-wilderness-300: #cdc4a7;
  --color-wilderness-400: #b0a585;
  --color-wilderness-500: #958a69;
  --color-wilderness-600: #796f4f;
  --color-wilderness-700: #61573a;
  --color-wilderness-800: #4c442a;
  --color-wilderness-900: #3b341e;
  --color-wilderness-950: #251f10;
  --color-fleur-de-lis: #b18dc9;
  --color-fleur-de-lis-50: #f9f0ff;
  --color-fleur-de-lis-100: #f3e2ff;
  --color-fleur-de-lis-200: #e4c8f8;
  --color-fleur-de-lis-300: #cfafe5;
  --color-fleur-de-lis-400: #b18dc9;
  --color-fleur-de-lis-500: #9673ad;
  --color-fleur-de-lis-600: #7b5990;
  --color-fleur-de-lis-700: #634577;
  --color-fleur-de-lis-800: #4f3460;
  --color-fleur-de-lis-900: #3e274c;
  --color-fleur-de-lis-950: #281732;
  --color-bubblegum-crisis: #e7d3fa;
  --color-bubblegum-crisis-50: #fbf6ff;
  --color-bubblegum-crisis-100: #f5ebff;
  --color-bubblegum-crisis-200: #e7d3fa;
  --color-bubblegum-crisis-300: #cebddd;
  --color-bubblegum-crisis-400: #ae9cbf;
  --color-bubblegum-crisis-500: #9280a3;
  --color-bubblegum-crisis-600: #766587;
  --color-bubblegum-crisis-700: #5e4e6d;
  --color-bubblegum-crisis-800: #493b56;
  --color-bubblegum-crisis-900: #392d43;
  --color-bubblegum-crisis-950: #241b2b;
}