Nightmare to Bunny Tail color palette

02220DNightmare 6D2600Roastery 006E84Waterworld 00A4DABlue Burst 55D4A2Vegetation FFE5F5Bunny Tail

Open in generator Export PNG, PDF, ASE…

About this palette

Nightmare to Bunny Tail is a 6-color cool palette: #02220D (Nightmare), #6D2600 (Roastery), #006E84 (Waterworld), #00A4DA (Blue Burst), #55D4A2 (Vegetation), #FFE5F5 (Bunny Tail). It mixes green, brown, blue, white tones and feels cool overall. The strongest text pairing is #02220D on #FFE5F5 with a contrast ratio of 14.37:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(2, 34, 13)	hsl(141, 89%, 7%)
Roastery	rgb(109, 38, 0)	hsl(21, 100%, 21%)
Waterworld	rgb(0, 110, 132)	hsl(190, 100%, 26%)
Blue Burst	rgb(0, 164, 218)	hsl(195, 100%, 43%)
Vegetation	rgb(85, 212, 162)	hsl(156, 60%, 58%)
Bunny Tail	rgb(255, 229, 245)	hsl(323, 100%, 95%)

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.

Aa14.37:1 Super#02220D on #FFE5F5
Aa14.37:1 Super#FFE5F5 on #02220D
Aa9.22:1 Very good#6D2600 on #FFE5F5
Aa9.22:1 Very good#FFE5F5 on #6D2600
Aa9.15:1 Very good#02220D on #55D4A2
Aa9.15:1 Very good#55D4A2 on #02220D
Aa5.92:1 Good#02220D on #00A4DA
Aa5.92:1 Good#00A4DA on #02220D

Color blindness preview

CSS variables

/* Nightmare to Bunny Tail — https://swatchly.xyz/palette/02220d-6d2600-006e84-00a4da-55d4a2-ffe5f5 */
:root {
  --nightmare: #02220d;
  --roastery: #6d2600;
  --waterworld: #006e84;
  --blue-burst: #00a4da;
  --vegetation: #55d4a2;
  --bunny-tail: #ffe5f5;
}

Tailwind CSS v4

/* Nightmare to Bunny Tail — https://swatchly.xyz/palette/02220d-6d2600-006e84-00a4da-55d4a2-ffe5f5 */
@theme {
  --color-nightmare: #02220d;
  --color-nightmare-50: #e7fbeb;
  --color-nightmare-100: #dbf2e0;
  --color-nightmare-200: #c5e0ca;
  --color-nightmare-300: #abcab2;
  --color-nightmare-400: #8aac91;
  --color-nightmare-500: #6d8f75;
  --color-nightmare-600: #53735a;
  --color-nightmare-700: #3d5b45;
  --color-nightmare-800: #2d4633;
  --color-nightmare-900: #203525;
  --color-nightmare-950: #02220d;
  --color-roastery: #6d2600;
  --color-roastery-50: #fff2ed;
  --color-roastery-100: #ffe5db;
  --color-roastery-200: #ffcab5;
  --color-roastery-300: #f5ad90;
  --color-roastery-400: #d88a6a;
  --color-roastery-500: #bb6d4d;
  --color-roastery-600: #9d5333;
  --color-roastery-700: #803d21;
  --color-roastery-800: #6d2600;
  --color-roastery-900: #51200a;
  --color-roastery-950: #351204;
  --color-waterworld: #006e84;
  --color-waterworld-50: #e6f9ff;
  --color-waterworld-100: #c6f2ff;
  --color-waterworld-200: #a1dff2;
  --color-waterworld-300: #80c8dd;
  --color-waterworld-400: #55a8bf;
  --color-waterworld-500: #318ba1;
  --color-waterworld-600: #006e84;
  --color-waterworld-700: #005769;
  --color-waterworld-800: #004453;
  --color-waterworld-900: #003541;
  --color-waterworld-950: #00212a;
  --color-blue-burst: #00a4da;
  --color-blue-burst-50: #e1f5ff;
  --color-blue-burst-100: #c7ecff;
  --color-blue-burst-200: #92dbff;
  --color-blue-burst-300: #59c5f6;
  --color-blue-burst-400: #00a4da;
  --color-blue-burst-500: #0089b6;
  --color-blue-burst-600: #006e94;
  --color-blue-burst-700: #005877;
  --color-blue-burst-800: #00465f;
  --color-blue-burst-900: #00374b;
  --color-blue-burst-950: #002332;
  --color-vegetation: #55d4a2;
  --color-vegetation-50: #ccffe6;
  --color-vegetation-100: #aef9d6;
  --color-vegetation-200: #8ce7bf;
  --color-vegetation-300: #55d4a2;
  --color-vegetation-400: #34b485;
  --color-vegetation-500: #00996c;
  --color-vegetation-600: #007c57;
  --color-vegetation-700: #006345;
  --color-vegetation-800: #004e36;
  --color-vegetation-900: #003d29;
  --color-vegetation-950: #002719;
  --color-bunny-tail: #ffe5f5;
  --color-bunny-tail-50: #fff3fa;
  --color-bunny-tail-100: #ffe5f5;
  --color-bunny-tail-200: #e6d3df;
  --color-bunny-tail-300: #d1bbc8;
  --color-bunny-tail-400: #b29ba9;
  --color-bunny-tail-500: #967f8d;
  --color-bunny-tail-600: #7b6572;
  --color-bunny-tail-700: #624e5b;
  --color-bunny-tail-800: #4e3c47;
  --color-bunny-tail-900: #3c2e37;
  --color-bunny-tail-950: #261c22;
}