Icy Plains to Nocturnal Expedition color palette

D5E0FFIcy Plains BD7D43Molten Caramel FF940FCheese Please 006277Blue-Collar 004A52Nocturnal Expedition

Open in generator Export PNG, PDF, ASE…

About this palette

Icy Plains to Nocturnal Expedition is a 5-color cool, vintage palette: #D5E0FF (Icy Plains), #BD7D43 (Molten Caramel), #FF940F (Cheese Please), #006277 (Blue-Collar), #004A52 (Nocturnal Expedition). It mixes blue, orange, turquoise tones and feels cool overall. The strongest text pairing is #D5E0FF on #004A52 with a contrast ratio of 7.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(213, 224, 255)	hsl(224, 100%, 92%)
Molten Caramel	rgb(189, 125, 67)	hsl(29, 48%, 50%)
Cheese Please	rgb(255, 148, 15)	hsl(33, 100%, 53%)
Blue-Collar	rgb(0, 98, 119)	hsl(191, 100%, 23%)
Nocturnal Expedition	rgb(0, 74, 82)	hsl(186, 100%, 16%)

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.

Aa7.58:1 Very good#D5E0FF on #004A52
Aa7.58:1 Very good#004A52 on #D5E0FF
Aa5.29:1 Good#D5E0FF on #006277
Aa5.29:1 Good#006277 on #D5E0FF
Aa4.52:1 Good#FF940F on #004A52
Aa4.52:1 Good#004A52 on #FF940F
Aa3.15:1 Poor#FF940F on #006277
Aa3.15:1 Poor#006277 on #FF940F

Color blindness preview

CSS variables

/* Icy Plains to Nocturnal Expedition — https://swatchly.xyz/palette/d5e0ff-bd7d43-ff940f-006277-004a52 */
:root {
  --icy-plains: #d5e0ff;
  --molten-caramel: #bd7d43;
  --cheese-please: #ff940f;
  --blue-collar: #006277;
  --nocturnal-expedition: #004a52;
}

Tailwind CSS v4

/* Icy Plains to Nocturnal Expedition — https://swatchly.xyz/palette/d5e0ff-bd7d43-ff940f-006277-004a52 */
@theme {
  --color-icy-plains: #d5e0ff;
  --color-icy-plains-50: #fafbff;
  --color-icy-plains-100: #eef3ff;
  --color-icy-plains-200: #d5e0ff;
  --color-icy-plains-300: #bfc8e1;
  --color-icy-plains-400: #9da7c2;
  --color-icy-plains-500: #808aa6;
  --color-icy-plains-600: #646e88;
  --color-icy-plains-700: #4d566e;
  --color-icy-plains-800: #3b4257;
  --color-icy-plains-900: #2c3244;
  --color-icy-plains-950: #1a1f2b;
  --color-molten-caramel: #bd7d43;
  --color-molten-caramel-50: #fff4ec;
  --color-molten-caramel-100: #ffe9d8;
  --color-molten-caramel-200: #ffd1ac;
  --color-molten-caramel-300: #f2b98a;
  --color-molten-caramel-400: #d79963;
  --color-molten-caramel-500: #bd7d43;
  --color-molten-caramel-600: #9e6126;
  --color-molten-caramel-700: #824a0d;
  --color-molten-caramel-800: #683800;
  --color-molten-caramel-900: #502a00;
  --color-molten-caramel-950: #331900;
  --color-cheese-please: #ff940f;
  --color-cheese-please-50: #ffe9d7;
  --color-cheese-please-100: #ffd9b9;
  --color-cheese-please-200: #ffbb7f;
  --color-cheese-please-300: #ff940f;
  --color-cheese-please-400: #d87b00;
  --color-cheese-please-500: #b56700;
  --color-cheese-please-600: #945300;
  --color-cheese-please-700: #784200;
  --color-cheese-please-800: #603400;
  --color-cheese-please-900: #4d2800;
  --color-cheese-please-950: #321800;
  --color-blue-collar: #006277;
  --color-blue-collar-50: #e6f9ff;
  --color-blue-collar-100: #ccf3ff;
  --color-blue-collar-200: #abe2f4;
  --color-blue-collar-300: #8dcde1;
  --color-blue-collar-400: #66afc5;
  --color-blue-collar-500: #4694aa;
  --color-blue-collar-600: #29798e;
  --color-blue-collar-700: #006277;
  --color-blue-collar-800: #004d5e;
  --color-blue-collar-900: #003b49;
  --color-blue-collar-950: #00252f;
  --color-nocturnal-expedition: #004a52;
  --color-nocturnal-expedition-50: #e0fbff;
  --color-nocturnal-expedition-100: #cef3f9;
  --color-nocturnal-expedition-200: #b4e1e7;
  --color-nocturnal-expedition-300: #97cbd3;
  --color-nocturnal-expedition-400: #72acb4;
  --color-nocturnal-expedition-500: #549099;
  --color-nocturnal-expedition-600: #3a757d;
  --color-nocturnal-expedition-700: #255d65;
  --color-nocturnal-expedition-800: #004a52;
  --color-nocturnal-expedition-900: #0c383e;
  --color-nocturnal-expedition-950: #042327;
}