Quick-Freeze to Haiti color palette

BCDAE0Quick-Freeze F7F8FFGhost White 5F8A97Horizon B2946FCaramel Gold 664C31Black Power 2B2C39Haiti

Open in generator Export PNG, PDF, ASE…

About this palette

Quick-Freeze to Haiti is a 6-color muted palette: #BCDAE0 (Quick-Freeze), #F7F8FF (Ghost White), #5F8A97 (Horizon), #B2946F (Caramel Gold), #664C31 (Black Power), #2B2C39 (Haiti). It mixes gray, white, blue, orange, brown tones and feels warm overall. The strongest text pairing is #F7F8FF on #2B2C39 with a contrast ratio of 13.03:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quick-Freeze	rgb(188, 218, 224)	hsl(190, 37%, 81%)
Ghost White	rgb(247, 248, 255)	hsl(233, 100%, 98%)
Horizon	rgb(95, 138, 151)	hsl(194, 23%, 48%)
Caramel Gold	rgb(178, 148, 111)	hsl(33, 30%, 57%)
Black Power	rgb(102, 76, 49)	hsl(31, 35%, 30%)
Haiti	rgb(43, 44, 57)	hsl(236, 14%, 20%)

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.03:1 Super#F7F8FF on #2B2C39
Aa13.03:1 Super#2B2C39 on #F7F8FF
Aa9.36:1 Very good#BCDAE0 on #2B2C39
Aa9.36:1 Very good#2B2C39 on #BCDAE0
Aa7.50:1 Very good#F7F8FF on #664C31
Aa7.50:1 Very good#664C31 on #F7F8FF
Aa5.39:1 Good#BCDAE0 on #664C31
Aa5.39:1 Good#664C31 on #BCDAE0

Color blindness preview

CSS variables

/* Quick-Freeze to Haiti — https://swatchly.xyz/palette/bcdae0-f7f8ff-5f8a97-b2946f-664c31-2b2c39 */
:root {
  --quick-freeze: #bcdae0;
  --ghost-white: #f7f8ff;
  --horizon: #5f8a97;
  --caramel-gold: #b2946f;
  --black-power: #664c31;
  --haiti: #2b2c39;
}

Tailwind CSS v4

/* Quick-Freeze to Haiti — https://swatchly.xyz/palette/bcdae0-f7f8ff-5f8a97-b2946f-664c31-2b2c39 */
@theme {
  --color-quick-freeze: #bcdae0;
  --color-quick-freeze-50: #e5f6fa;
  --color-quick-freeze-100: #d9ecf0;
  --color-quick-freeze-200: #bcdae0;
  --color-quick-freeze-300: #aac3c8;
  --color-quick-freeze-400: #89a5aa;
  --color-quick-freeze-500: #6e8a90;
  --color-quick-freeze-600: #557075;
  --color-quick-freeze-700: #415a5e;
  --color-quick-freeze-800: #31474b;
  --color-quick-freeze-900: #24363a;
  --color-quick-freeze-950: #152224;
  --color-ghost-white: #f7f8ff;
  --color-ghost-white-50: #f7f8ff;
  --color-ghost-white-100: #edeef2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c1c2c8;
  --color-ghost-white-400: #a1a2a8;
  --color-ghost-white-500: #85868c;
  --color-ghost-white-600: #6a6b71;
  --color-ghost-white-700: #54555a;
  --color-ghost-white-800: #414247;
  --color-ghost-white-900: #323236;
  --color-ghost-white-950: #1f1f22;
  --color-horizon: #5f8a97;
  --color-horizon-50: #e4f9ff;
  --color-horizon-100: #d3eff8;
  --color-horizon-200: #badce7;
  --color-horizon-300: #9fc6d1;
  --color-horizon-400: #7ca6b3;
  --color-horizon-500: #5f8a97;
  --color-horizon-600: #47707c;
  --color-horizon-700: #335964;
  --color-horizon-800: #254650;
  --color-horizon-900: #1a363f;
  --color-horizon-950: #0d2228;
  --color-caramel-gold: #b2946f;
  --color-caramel-gold-50: #fff0dd;
  --color-caramel-gold-100: #f8e3ca;
  --color-caramel-gold-200: #e6ceb0;
  --color-caramel-gold-300: #d1b594;
  --color-caramel-gold-400: #b2946f;
  --color-caramel-gold-500: #977a56;
  --color-caramel-gold-600: #7d613f;
  --color-caramel-gold-700: #654d2d;
  --color-caramel-gold-800: #513c20;
  --color-caramel-gold-900: #402e16;
  --color-caramel-gold-950: #2a1c0b;
  --color-black-power: #664c31;
  --color-black-power-50: #fff3e7;
  --color-black-power-100: #fbe7d4;
  --color-black-power-200: #e9d2bc;
  --color-black-power-300: #d5baa1;
  --color-black-power-400: #b69a7e;
  --color-black-power-500: #9a7e61;
  --color-black-power-600: #7e6348;
  --color-black-power-700: #664c31;
  --color-black-power-800: #503b26;
  --color-black-power-900: #3e2d1b;
  --color-black-power-950: #271b0e;
  --color-haiti: #2b2c39;
  --color-haiti-50: #f3f4fe;
  --color-haiti-100: #e9eaf5;
  --color-haiti-200: #d5d6e3;
  --color-haiti-300: #bec0ce;
  --color-haiti-400: #9d9faf;
  --color-haiti-500: #818392;
  --color-haiti-600: #666776;
  --color-haiti-700: #4f505d;
  --color-haiti-800: #3c3c48;
  --color-haiti-900: #2b2c39;
  --color-haiti-950: #1a1a21;
}