Midnight Ocean to Salt Caramel color palette

092F4DMidnight Ocean 6A3D00Very Coffee FFC788Torchlight 4889D8Blue Jay D59558Salt Caramel

About this palette

Midnight Ocean to Salt Caramel is a 5-color warm, earthy palette: #092F4D (Midnight Ocean), #6A3D00 (Very Coffee), #FFC788 (Torchlight), #4889D8 (Blue Jay), #D59558 (Salt Caramel). It mixes blue, brown, orange tones and feels warm overall. The strongest text pairing is #092F4D on #FFC788 with a contrast ratio of 9.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Ocean	rgb(9, 47, 77)	hsl(206, 79%, 17%)
Very Coffee	rgb(106, 61, 0)	hsl(35, 100%, 21%)
Torchlight	rgb(255, 199, 136)	hsl(32, 100%, 77%)
Blue Jay	rgb(72, 137, 216)	hsl(213, 65%, 56%)
Salt Caramel	rgb(213, 149, 88)	hsl(29, 60%, 59%)

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.

Aa9.03:1 Very good#092F4D on #FFC788
Aa9.03:1 Very good#FFC788 on #092F4D
Aa6.04:1 Good#6A3D00 on #FFC788
Aa6.04:1 Good#FFC788 on #6A3D00
Aa5.42:1 Good#092F4D on #D59558
Aa5.42:1 Good#D59558 on #092F4D
Aa3.83:1 Poor#092F4D on #4889D8
Aa3.83:1 Poor#4889D8 on #092F4D

Color blindness preview

CSS variables

/* Midnight Ocean to Salt Caramel — https://swatchly.xyz/palette/092f4d-6a3d00-ffc788-4889d8-d59558 */
:root {
  --midnight-ocean: #092f4d;
  --very-coffee: #6a3d00;
  --torchlight: #ffc788;
  --blue-jay: #4889d8;
  --salt-caramel: #d59558;
}

Tailwind CSS v4

/* Midnight Ocean to Salt Caramel — https://swatchly.xyz/palette/092f4d-6a3d00-ffc788-4889d8-d59558 */
@theme {
  --color-midnight-ocean: #092f4d;
  --color-midnight-ocean-50: #edf6ff;
  --color-midnight-ocean-100: #dceeff;
  --color-midnight-ocean-200: #bedbf8;
  --color-midnight-ocean-300: #a3c5e5;
  --color-midnight-ocean-400: #7fa5c8;
  --color-midnight-ocean-500: #6288ab;
  --color-midnight-ocean-600: #486c8d;
  --color-midnight-ocean-700: #345472;
  --color-midnight-ocean-800: #244059;
  --color-midnight-ocean-900: #092f4d;
  --color-midnight-ocean-950: #0c1c2a;
  --color-very-coffee: #6a3d00;
  --color-very-coffee-50: #fff3e8;
  --color-very-coffee-100: #ffe6cf;
  --color-very-coffee-200: #f7cfa9;
  --color-very-coffee-300: #e6b98e;
  --color-very-coffee-400: #ca9969;
  --color-very-coffee-500: #b07e4c;
  --color-very-coffee-600: #956533;
  --color-very-coffee-700: #7c5020;
  --color-very-coffee-800: #6a3d00;
  --color-very-coffee-900: #512f07;
  --color-very-coffee-950: #351d01;
  --color-torchlight: #ffc788;
  --color-torchlight-50: #ffefde;
  --color-torchlight-100: #ffe2c2;
  --color-torchlight-200: #ffc788;
  --color-torchlight-300: #e3b37e;
  --color-torchlight-400: #c79358;
  --color-torchlight-500: #ac7839;
  --color-torchlight-600: #8f5f1e;
  --color-torchlight-700: #764907;
  --color-torchlight-800: #5e3900;
  --color-torchlight-900: #492b00;
  --color-torchlight-950: #2f1a00;
  --color-blue-jay: #4889d8;
  --color-blue-jay-50: #eff6ff;
  --color-blue-jay-100: #dfedff;
  --color-blue-jay-200: #bedbff;
  --color-blue-jay-300: #97c5ff;
  --color-blue-jay-400: #67a5f3;
  --color-blue-jay-500: #4889d8;
  --color-blue-jay-600: #2d6db9;
  --color-blue-jay-700: #19569b;
  --color-blue-jay-800: #09427e;
  --color-blue-jay-900: #023265;
  --color-blue-jay-950: #001f43;
  --color-salt-caramel: #d59558;
  --color-salt-caramel-50: #fff4eb;
  --color-salt-caramel-100: #ffe8d5;
  --color-salt-caramel-200: #ffcfa5;
  --color-salt-caramel-300: #efb784;
  --color-salt-caramel-400: #d59558;
  --color-salt-caramel-500: #b7793c;
  --color-salt-caramel-600: #995e1e;
  --color-salt-caramel-700: #7d4804;
  --color-salt-caramel-800: #633700;
  --color-salt-caramel-900: #4d2900;
  --color-salt-caramel-950: #311800;
}