Oceanic Noir to Polar Wind Color Palette

About this palette

Oceanic Noir to Polar Wind is a 4-color muted, cool, gradient palette: #1A2B2F (Oceanic Noir), #3D5B61 (Arctic Nights), #77B4C6 (Glacier), #B7DEEC (Polar Wind). It mixes gray, turquoise, blue tones and feels cool overall. The strongest text pairing is #1A2B2F on #B7DEEC with a contrast ratio of 10.26:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oceanic Noir	rgb(26, 43, 47)	hsl(191, 29%, 14%)
Arctic Nights	rgb(61, 91, 97)	hsl(190, 23%, 31%)
Glacier	rgb(119, 180, 198)	hsl(194, 41%, 62%)
Polar Wind	rgb(183, 222, 236)	hsl(196, 58%, 82%)

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.26:1 Very good#1A2B2F on #B7DEEC
Aa10.26:1 Very good#B7DEEC on #1A2B2F
Aa6.38:1 Good#1A2B2F on #77B4C6
Aa6.38:1 Good#77B4C6 on #1A2B2F
Aa5.12:1 Good#3D5B61 on #B7DEEC
Aa5.12:1 Good#B7DEEC on #3D5B61
Aa3.18:1 Poor#3D5B61 on #77B4C6
Aa3.18:1 Poor#77B4C6 on #3D5B61

Color blindness preview

CSS variables

/* Oceanic Noir to Polar Wind — https://swatchly.xyz/palette/1a2b2f-3d5b61-77b4c6-b7deec */
:root {
  --oceanic-noir: #1a2b2f;
  --arctic-nights: #3d5b61;
  --glacier: #77b4c6;
  --polar-wind: #b7deec;
}

Tailwind CSS v4

/* Oceanic Noir to Polar Wind — https://swatchly.xyz/palette/1a2b2f-3d5b61-77b4c6-b7deec */
@theme {
  --color-oceanic-noir: #1a2b2f;
  --color-oceanic-noir-50: #ecf8fa;
  --color-oceanic-noir-100: #e1eef1;
  --color-oceanic-noir-200: #cbdbdf;
  --color-oceanic-noir-300: #b3c5c9;
  --color-oceanic-noir-400: #92a5aa;
  --color-oceanic-noir-500: #788c91;
  --color-oceanic-noir-600: #607378;
  --color-oceanic-noir-700: #4c5e62;
  --color-oceanic-noir-800: #3c4c50;
  --color-oceanic-noir-900: #303d41;
  --color-oceanic-noir-950: #1a2b2f;
  --color-arctic-nights: #3d5b61;
  --color-arctic-nights-50: #e7f9fd;
  --color-arctic-nights-100: #dbf0f4;
  --color-arctic-nights-200: #c4dde2;
  --color-arctic-nights-300: #abc7cd;
  --color-arctic-nights-400: #89a8ae;
  --color-arctic-nights-500: #6d8c93;
  --color-arctic-nights-600: #547278;
  --color-arctic-nights-700: #3d5b61;
  --color-arctic-nights-800: #2f474c;
  --color-arctic-nights-900: #22373b;
  --color-arctic-nights-950: #132225;
  --color-glacier: #77b4c6;
  --color-glacier-50: #edfbff;
  --color-glacier-100: #d7f5ff;
  --color-glacier-200: #bae5f2;
  --color-glacier-300: #9fd1e0;
  --color-glacier-400: #77b4c6;
  --color-glacier-500: #5b97a8;
  --color-glacier-600: #3e7a8b;
  --color-glacier-700: #296171;
  --color-glacier-800: #184c59;
  --color-glacier-900: #0d3a45;
  --color-glacier-950: #04242c;
  --color-polar-wind: #b7deec;
  --color-polar-wind-50: #e6f8ff;
  --color-polar-wind-100: #d7eff8;
  --color-polar-wind-200: #b7deec;
  --color-polar-wind-300: #a6c6d2;
  --color-polar-wind-400: #84a8b4;
  --color-polar-wind-500: #688c99;
  --color-polar-wind-600: #4e727e;
  --color-polar-wind-700: #3a5b66;
  --color-polar-wind-800: #2b4751;
  --color-polar-wind-900: #1f373f;
  --color-polar-wind-950: #112228;
}