Ice to Evil Cigar Color Palette

About this palette

Ice to Evil Cigar is a 4-color vintage palette: #D8FFFA (Ice), #DE89BC (Pink Punk), #00887E (Go Go Green), #4E2510 (Evil Cigar). It mixes white, pink, turquoise, brown tones and feels balanced overall. The strongest text pairing is #D8FFFA on #4E2510 with a contrast ratio of 12.28:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ice	rgb(216, 255, 250)	hsl(172, 100%, 92%)
Pink Punk	rgb(222, 137, 188)	hsl(324, 56%, 70%)
Go Go Green	rgb(0, 136, 126)	hsl(176, 100%, 27%)
Evil Cigar	rgb(78, 37, 16)	hsl(20, 66%, 18%)

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.

Aa12.28:1 Super#D8FFFA on #4E2510
Aa12.28:1 Super#4E2510 on #D8FFFA
Aa5.27:1 Good#DE89BC on #4E2510
Aa5.27:1 Good#4E2510 on #DE89BC
Aa4.06:1 Poor#D8FFFA on #00887E
Aa4.06:1 Poor#00887E on #D8FFFA
Aa3.02:1 Poor#00887E on #4E2510
Aa3.02:1 Poor#4E2510 on #00887E

Color blindness preview

CSS variables

/* Ice to Evil Cigar — https://swatchly.xyz/palette/d8fffa-de89bc-00887e-4e2510 */
:root {
  --ice: #d8fffa;
  --pink-punk: #de89bc;
  --go-go-green: #00887e;
  --evil-cigar: #4e2510;
}

Tailwind CSS v4

/* Ice to Evil Cigar — https://swatchly.xyz/palette/d8fffa-de89bc-00887e-4e2510 */
@theme {
  --color-ice: #d8fffa;
  --color-ice-50: #d8fffa;
  --color-ice-100: #daf1ee;
  --color-ice-200: #c3dfdb;
  --color-ice-300: #a9c9c5;
  --color-ice-400: #87aaa6;
  --color-ice-500: #6b8e8a;
  --color-ice-600: #517470;
  --color-ice-700: #3d5c59;
  --color-ice-800: #2d4845;
  --color-ice-900: #203835;
  --color-ice-950: #122321;
  --color-pink-punk: #de89bc;
  --color-pink-punk-50: #fff4fa;
  --color-pink-punk-100: #ffe7f4;
  --color-pink-punk-200: #ffcbe8;
  --color-pink-punk-300: #f6add8;
  --color-pink-punk-400: #de89bc;
  --color-pink-punk-500: #be6d9e;
  --color-pink-punk-600: #9f5182;
  --color-pink-punk-700: #833b68;
  --color-pink-punk-800: #692a52;
  --color-pink-punk-900: #521d3f;
  --color-pink-punk-950: #340f27;
  --color-go-go-green: #00887e;
  --color-go-go-green-50: #d7fff9;
  --color-go-go-green-100: #c0fbf3;
  --color-go-go-green-200: #a5ebe2;
  --color-go-go-green-300: #86d8ce;
  --color-go-go-green-400: #5bbcb1;
  --color-go-go-green-500: #35a297;
  --color-go-go-green-600: #00887e;
  --color-go-go-green-700: #006c64;
  --color-go-go-green-800: #00544e;
  --color-go-go-green-900: #00413c;
  --color-go-go-green-950: #002925;
  --color-evil-cigar: #4e2510;
  --color-evil-cigar-50: #fff2ec;
  --color-evil-cigar-100: #ffe5d9;
  --color-evil-cigar-200: #f6cebc;
  --color-evil-cigar-300: #e2b6a1;
  --color-evil-cigar-400: #c5957e;
  --color-evil-cigar-500: #a97962;
  --color-evil-cigar-600: #8c5f49;
  --color-evil-cigar-700: #724936;
  --color-evil-cigar-800: #5b3726;
  --color-evil-cigar-900: #4e2510;
  --color-evil-cigar-950: #2e180e;
}