Close but No Cigar to Permafrost Color Palette

About this palette

Close but No Cigar to Permafrost is a 5-color cool palette: #381913 (Close but No Cigar), #035162 (Raging Thunderstorm), #788D64 (Crispy Crunch), #BFA3FF (Diva), #9AF2FF (Permafrost). It mixes brown, blue, green, purple, turquoise tones and feels cool overall. The strongest text pairing is #381913 on #9AF2FF with a contrast ratio of 12.55:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Close but No Cigar	rgb(56, 25, 19)	hsl(10, 49%, 15%)
Raging Thunderstorm	rgb(3, 81, 98)	hsl(191, 94%, 20%)
Crispy Crunch	rgb(120, 141, 100)	hsl(91, 17%, 47%)
Diva	rgb(191, 163, 255)	hsl(258, 100%, 82%)
Permafrost	rgb(154, 242, 255)	hsl(188, 100%, 80%)

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.55:1 Super#381913 on #9AF2FF
Aa12.55:1 Super#9AF2FF on #381913
Aa7.52:1 Very good#381913 on #BFA3FF
Aa7.52:1 Very good#BFA3FF on #381913
Aa7.01:1 Very good#035162 on #9AF2FF
Aa7.01:1 Very good#9AF2FF on #035162
Aa4.40:1 Poor#381913 on #788D64
Aa4.40:1 Poor#788D64 on #381913

Color blindness preview

CSS variables

/* Close but No Cigar to Permafrost — https://swatchly.xyz/palette/381913-035162-788d64-bfa3ff-9af2ff */
:root {
  --close-but-no-cigar: #381913;
  --raging-thunderstorm: #035162;
  --crispy-crunch: #788d64;
  --diva: #bfa3ff;
  --permafrost: #9af2ff;
}

Tailwind CSS v4

/* Close but No Cigar to Permafrost — https://swatchly.xyz/palette/381913-035162-788d64-bfa3ff-9af2ff */
@theme {
  --color-close-but-no-cigar: #381913;
  --color-close-but-no-cigar-50: #fff2ef;
  --color-close-but-no-cigar-100: #ffe4df;
  --color-close-but-no-cigar-200: #efcfc8;
  --color-close-but-no-cigar-300: #dcb7b0;
  --color-close-but-no-cigar-400: #be978f;
  --color-close-but-no-cigar-500: #a37c74;
  --color-close-but-no-cigar-600: #88635b;
  --color-close-but-no-cigar-700: #704e47;
  --color-close-but-no-cigar-800: #5a3d37;
  --color-close-but-no-cigar-900: #482f2a;
  --color-close-but-no-cigar-950: #381913;
  --color-raging-thunderstorm: #035162;
  --color-raging-thunderstorm-50: #e6f9ff;
  --color-raging-thunderstorm-100: #ccf3ff;
  --color-raging-thunderstorm-200: #b1e1ef;
  --color-raging-thunderstorm-300: #96ccdd;
  --color-raging-thunderstorm-400: #71aec1;
  --color-raging-thunderstorm-500: #5494a6;
  --color-raging-thunderstorm-600: #3a7a8c;
  --color-raging-thunderstorm-700: #266374;
  --color-raging-thunderstorm-800: #035162;
  --color-raging-thunderstorm-900: #0b3e4b;
  --color-raging-thunderstorm-950: #032831;
  --color-crispy-crunch: #788d64;
  --color-crispy-crunch-50: #edfae2;
  --color-crispy-crunch-100: #e2f1d5;
  --color-crispy-crunch-200: #ccdebd;
  --color-crispy-crunch-300: #b4c8a3;
  --color-crispy-crunch-400: #94a980;
  --color-crispy-crunch-500: #788d64;
  --color-crispy-crunch-600: #5f724b;
  --color-crispy-crunch-700: #495b38;
  --color-crispy-crunch-800: #384829;
  --color-crispy-crunch-900: #2a371d;
  --color-crispy-crunch-950: #192310;
  --color-diva: #bfa3ff;
  --color-diva-50: #f1ecff;
  --color-diva-100: #e6deff;
  --color-diva-200: #d3c3ff;
  --color-diva-300: #bfa3ff;
  --color-diva-400: #a186de;
  --color-diva-500: #886cc3;
  --color-diva-600: #7054a6;
  --color-diva-700: #5a408b;
  --color-diva-800: #483172;
  --color-diva-900: #39255d;
  --color-diva-950: #24153e;
  --color-permafrost: #9af2ff;
  --color-permafrost-50: #f5feff;
  --color-permafrost-100: #dbfaff;
  --color-permafrost-200: #9af2ff;
  --color-permafrost-300: #91d6e1;
  --color-permafrost-400: #65b6c2;
  --color-permafrost-500: #4099a6;
  --color-permafrost-600: #1c7c88;
  --color-permafrost-700: #00626d;
  --color-permafrost-800: #004c54;
  --color-permafrost-900: #003a41;
  --color-permafrost-950: #002529;
}