Skydive to Ice Citadel color palette

67C2CESkydive 9C643AFrappé au Chocolat 0F2D4EMidnight Ocean 713000Cold Press Coffee B7F9F9Ice Citadel

Open in generator Export PNG, PDF, ASE…

About this palette

Skydive to Ice Citadel is a 5-color cool, vintage palette: #67C2CE (Skydive), #9C643A (Frappé au Chocolat), #0F2D4E (Midnight Ocean), #713000 (Cold Press Coffee), #B7F9F9 (Ice Citadel). It mixes turquoise, brown, blue tones and feels cool overall. The strongest text pairing is #0F2D4E on #B7F9F9 with a contrast ratio of 11.91:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Skydive	rgb(103, 194, 206)	hsl(187, 51%, 61%)
Frappé au Chocolat	rgb(156, 100, 58)	hsl(26, 46%, 42%)
Midnight Ocean	rgb(15, 45, 78)	hsl(211, 68%, 18%)
Cold Press Coffee	rgb(113, 48, 0)	hsl(25, 100%, 22%)
Ice Citadel	rgb(183, 249, 249)	hsl(180, 85%, 85%)

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.

Aa11.91:1 Very good#0F2D4E on #B7F9F9
Aa11.91:1 Very good#B7F9F9 on #0F2D4E
Aa8.44:1 Very good#713000 on #B7F9F9
Aa8.44:1 Very good#B7F9F9 on #713000
Aa6.76:1 Good#67C2CE on #0F2D4E
Aa6.76:1 Good#0F2D4E on #67C2CE
Aa4.79:1 Good#67C2CE on #713000
Aa4.79:1 Good#713000 on #67C2CE

Color blindness preview

CSS variables

/* Skydive to Ice Citadel — https://swatchly.xyz/palette/67c2ce-9c643a-0f2d4e-713000-b7f9f9 */
:root {
  --skydive: #67c2ce;
  --frapp-au-chocolat: #9c643a;
  --midnight-ocean: #0f2d4e;
  --cold-press-coffee: #713000;
  --ice-citadel: #b7f9f9;
}

Tailwind CSS v4

/* Skydive to Ice Citadel — https://swatchly.xyz/palette/67c2ce-9c643a-0f2d4e-713000-b7f9f9 */
@theme {
  --color-skydive: #67c2ce;
  --color-skydive-50: #c5f8ff;
  --color-skydive-100: #b2edf5;
  --color-skydive-200: #92d8e2;
  --color-skydive-300: #67c2ce;
  --color-skydive-400: #4aa5b0;
  --color-skydive-500: #2a8b97;
  --color-skydive-600: #04727e;
  --color-skydive-700: #005c65;
  --color-skydive-800: #004a51;
  --color-skydive-900: #003a41;
  --color-skydive-950: #002529;
  --color-frapp-au-chocolat: #9c643a;
  --color-frapp-au-chocolat-50: #fff2ea;
  --color-frapp-au-chocolat-100: #ffe7d8;
  --color-frapp-au-chocolat-200: #fed0b0;
  --color-frapp-au-chocolat-300: #ecb994;
  --color-frapp-au-chocolat-400: #d19970;
  --color-frapp-au-chocolat-500: #b77e54;
  --color-frapp-au-chocolat-600: #9c643a;
  --color-frapp-au-chocolat-700: #804d25;
  --color-frapp-au-chocolat-800: #673a16;
  --color-frapp-au-chocolat-900: #512b0b;
  --color-frapp-au-chocolat-950: #341904;
  --color-midnight-ocean: #0f2d4e;
  --color-midnight-ocean-50: #eef6ff;
  --color-midnight-ocean-100: #deedff;
  --color-midnight-ocean-200: #c0dafa;
  --color-midnight-ocean-300: #a6c4e7;
  --color-midnight-ocean-400: #83a3ca;
  --color-midnight-ocean-500: #6686ad;
  --color-midnight-ocean-600: #4b6a8f;
  --color-midnight-ocean-700: #375273;
  --color-midnight-ocean-800: #273e5a;
  --color-midnight-ocean-900: #0f2d4e;
  --color-midnight-ocean-950: #0d1b2b;
  --color-cold-press-coffee: #713000;
  --color-cold-press-coffee-50: #fff2ec;
  --color-cold-press-coffee-100: #ffe5d8;
  --color-cold-press-coffee-200: #ffcbaf;
  --color-cold-press-coffee-300: #f2b18e;
  --color-cold-press-coffee-400: #d78f69;
  --color-cold-press-coffee-500: #bb744c;
  --color-cold-press-coffee-600: #9e5a33;
  --color-cold-press-coffee-700: #844520;
  --color-cold-press-coffee-800: #713000;
  --color-cold-press-coffee-900: #552608;
  --color-cold-press-coffee-950: #381602;
  --color-ice-citadel: #b7f9f9;
  --color-ice-citadel-50: #dafdfd;
  --color-ice-citadel-100: #b7f9f9;
  --color-ice-citadel-200: #b2e2e1;
  --color-ice-citadel-300: #96cccc;
  --color-ice-citadel-400: #71aeae;
  --color-ice-citadel-500: #539393;
  --color-ice-citadel-600: #397778;
  --color-ice-citadel-700: #246060;
  --color-ice-citadel-800: #154b4c;
  --color-ice-citadel-900: #0b3a3b;
  --color-ice-citadel-950: #042525;
}