Icy Breeze to Elite Teal color palette

B6ECF1Icy Breeze C5B28BKhaki AA71BBLavendless 81507FPlum Highness 644500Very Coffee 00363CElite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Icy Breeze to Elite Teal is a 6-color cool palette: #B6ECF1 (Icy Breeze), #C5B28B (Khaki), #AA71BB (Lavendless), #81507F (Plum Highness), #644500 (Very Coffee), #00363C (Elite Teal). It mixes turquoise, yellow, purple, pink, brown tones and feels cool overall. The strongest text pairing is #B6ECF1 on #00363C with a contrast ratio of 10.21:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Breeze	rgb(182, 236, 241)	hsl(185, 68%, 83%)
Khaki	rgb(197, 178, 139)	hsl(40, 33%, 66%)
Lavendless	rgb(170, 113, 187)	hsl(286, 35%, 59%)
Plum Highness	rgb(129, 80, 127)	hsl(302, 23%, 41%)
Very Coffee	rgb(100, 69, 0)	hsl(41, 100%, 20%)
Elite Teal	rgb(0, 54, 60)	hsl(186, 100%, 12%)

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.

Aa10.21:1 Very good#B6ECF1 on #00363C
Aa10.21:1 Very good#00363C on #B6ECF1
Aa6.79:1 Good#B6ECF1 on #644500
Aa6.79:1 Good#644500 on #B6ECF1
Aa6.35:1 Good#C5B28B on #00363C
Aa6.35:1 Good#00363C on #C5B28B
Aa4.80:1 Good#B6ECF1 on #81507F
Aa4.80:1 Good#81507F on #B6ECF1

Color blindness preview

CSS variables

/* Icy Breeze to Elite Teal — https://swatchly.xyz/palette/b6ecf1-c5b28b-aa71bb-81507f-644500-00363c */
:root {
  --icy-breeze: #b6ecf1;
  --khaki: #c5b28b;
  --lavendless: #aa71bb;
  --plum-highness: #81507f;
  --very-coffee: #644500;
  --elite-teal: #00363c;
}

Tailwind CSS v4

/* Icy Breeze to Elite Teal — https://swatchly.xyz/palette/b6ecf1-c5b28b-aa71bb-81507f-644500-00363c */
@theme {
  --color-icy-breeze: #b6ecf1;
  --color-icy-breeze-50: #f2feff;
  --color-icy-breeze-100: #dcfafc;
  --color-icy-breeze-200: #b6ecf1;
  --color-icy-breeze-300: #a7d2d5;
  --color-icy-breeze-400: #80b1b6;
  --color-icy-breeze-500: #619499;
  --color-icy-breeze-600: #46787d;
  --color-icy-breeze-700: #305f63;
  --color-icy-breeze-800: #204a4d;
  --color-icy-breeze-900: #15393c;
  --color-icy-breeze-950: #0a2426;
  --color-khaki: #c5b28b;
  --color-khaki-50: #f9edd5;
  --color-khaki-100: #eee1c6;
  --color-khaki-200: #dacbac;
  --color-khaki-300: #c5b28b;
  --color-khaki-400: #a79570;
  --color-khaki-500: #8e7c57;
  --color-khaki-600: #756440;
  --color-khaki-700: #5f4f2f;
  --color-khaki-800: #4c3f22;
  --color-khaki-900: #3d3118;
  --color-khaki-950: #261e0c;
  --color-lavendless: #aa71bb;
  --color-lavendless-50: #fcf2ff;
  --color-lavendless-100: #f9e5ff;
  --color-lavendless-200: #f2c9ff;
  --color-lavendless-300: #e1aff0;
  --color-lavendless-400: #c48dd5;
  --color-lavendless-500: #aa71bb;
  --color-lavendless-600: #8d569d;
  --color-lavendless-700: #734081;
  --color-lavendless-800: #5b2f68;
  --color-lavendless-900: #472252;
  --color-lavendless-950: #2e1235;
  --color-plum-highness: #81507f;
  --color-plum-highness-50: #fff0fe;
  --color-plum-highness-100: #ffddfd;
  --color-plum-highness-200: #efc5ec;
  --color-plum-highness-300: #daaad7;
  --color-plum-highness-400: #bb88b9;
  --color-plum-highness-500: #9e6b9c;
  --color-plum-highness-600: #81507f;
  --color-plum-highness-700: #683d66;
  --color-plum-highness-800: #532e52;
  --color-plum-highness-900: #412240;
  --color-plum-highness-950: #2a1429;
  --color-very-coffee: #644500;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #ffe8c4;
  --color-very-coffee-200: #eed3a9;
  --color-very-coffee-300: #dcbe8d;
  --color-very-coffee-400: #c19f69;
  --color-very-coffee-500: #a7854c;
  --color-very-coffee-600: #8d6c33;
  --color-very-coffee-700: #765720;
  --color-very-coffee-800: #644500;
  --color-very-coffee-900: #4d3506;
  --color-very-coffee-950: #322101;
  --color-elite-teal: #00363c;
  --color-elite-teal-50: #e0fbff;
  --color-elite-teal-100: #d3f2f6;
  --color-elite-teal-200: #bbdfe4;
  --color-elite-teal-300: #a0cacf;
  --color-elite-teal-400: #7caab0;
  --color-elite-teal-500: #5e8e94;
  --color-elite-teal-600: #447278;
  --color-elite-teal-700: #305a60;
  --color-elite-teal-800: #21454a;
  --color-elite-teal-900: #00363c;
  --color-elite-teal-950: #0a2023;
}