Oceanic Noir to Dune Color Palette

About this palette

Oceanic Noir to Dune is a 5-color muted palette: #1F2E38 (Oceanic Noir), #274C5F (Shadow of Night), #447185 (Calypso), #A59384 (Smoking Mirror), #D8BBA5 (Dune). It mixes gray, blue, orange tones and feels cool overall. The strongest text pairing is #1F2E38 on #D8BBA5 with a contrast ratio of 7.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oceanic Noir	rgb(31, 46, 56)	hsl(204, 29%, 17%)
Shadow of Night	rgb(39, 76, 95)	hsl(200, 42%, 26%)
Calypso	rgb(68, 113, 133)	hsl(198, 32%, 39%)
Smoking Mirror	rgb(165, 147, 132)	hsl(27, 15%, 58%)
Dune	rgb(216, 187, 165)	hsl(26, 40%, 75%)

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.68:1 Very good#1F2E38 on #D8BBA5
Aa7.68:1 Very good#D8BBA5 on #1F2E38
Aa5.06:1 Good#274C5F on #D8BBA5
Aa5.06:1 Good#D8BBA5 on #274C5F
Aa4.72:1 Good#1F2E38 on #A59384
Aa4.72:1 Good#A59384 on #1F2E38
Aa3.11:1 Poor#274C5F on #A59384
Aa3.11:1 Poor#A59384 on #274C5F

Color blindness preview

CSS variables

/* Oceanic Noir to Dune — https://swatchly.xyz/palette/1f2e38-274c5f-447185-a59384-d8bba5 */
:root {
  --oceanic-noir: #1f2e38;
  --shadow-of-night: #274c5f;
  --calypso: #447185;
  --smoking-mirror: #a59384;
  --dune: #d8bba5;
}

Tailwind CSS v4

/* Oceanic Noir to Dune — https://swatchly.xyz/palette/1f2e38-274c5f-447185-a59384-d8bba5 */
@theme {
  --color-oceanic-noir: #1f2e38;
  --color-oceanic-noir-50: #ecf7fe;
  --color-oceanic-noir-100: #e1edf5;
  --color-oceanic-noir-200: #ccdae3;
  --color-oceanic-noir-300: #b4c3ce;
  --color-oceanic-noir-400: #92a3af;
  --color-oceanic-noir-500: #758692;
  --color-oceanic-noir-600: #5a6a76;
  --color-oceanic-noir-700: #44525c;
  --color-oceanic-noir-800: #323e47;
  --color-oceanic-noir-900: #1f2e38;
  --color-oceanic-noir-950: #141b20;
  --color-shadow-of-night: #274c5f;
  --color-shadow-of-night-50: #eaf7ff;
  --color-shadow-of-night-100: #d6f0fe;
  --color-shadow-of-night-200: #bfddee;
  --color-shadow-of-night-300: #a6c8db;
  --color-shadow-of-night-400: #84a9be;
  --color-shadow-of-night-500: #688fa4;
  --color-shadow-of-night-600: #507589;
  --color-shadow-of-night-700: #3c5e71;
  --color-shadow-of-night-800: #274c5f;
  --color-shadow-of-night-900: #203a48;
  --color-shadow-of-night-950: #11252f;
  --color-calypso: #447185;
  --color-calypso-50: #e9f8ff;
  --color-calypso-100: #d3f0fe;
  --color-calypso-200: #baddee;
  --color-calypso-300: #9fc7da;
  --color-calypso-400: #7ba8bc;
  --color-calypso-500: #5e8ca1;
  --color-calypso-600: #447185;
  --color-calypso-700: #315a6c;
  --color-calypso-800: #234656;
  --color-calypso-900: #183643;
  --color-calypso-950: #0c222b;
  --color-smoking-mirror: #a59384;
  --color-smoking-mirror-50: #faefe6;
  --color-smoking-mirror-100: #f0e3d8;
  --color-smoking-mirror-200: #dccdc0;
  --color-smoking-mirror-300: #c5b4a6;
  --color-smoking-mirror-400: #a59384;
  --color-smoking-mirror-500: #8b7a6b;
  --color-smoking-mirror-600: #726254;
  --color-smoking-mirror-700: #5c4d41;
  --color-smoking-mirror-800: #493d32;
  --color-smoking-mirror-900: #3a2f26;
  --color-smoking-mirror-950: #251e17;
  --color-dune: #d8bba5;
  --color-dune-50: #fff3ea;
  --color-dune-100: #fae8da;
  --color-dune-200: #e9d3c3;
  --color-dune-300: #d8bba5;
  --color-dune-400: #b79c87;
  --color-dune-500: #9b806c;
  --color-dune-600: #806652;
  --color-dune-700: #67503e;
  --color-dune-800: #523e2e;
  --color-dune-900: #402f22;
  --color-dune-950: #281c13;
}