Oxford by Night to Hazelnut Chocolate color palette

00172DOxford by Night DC9546Salt Caramel B26900Ginger DFF1FFCotton Boll 823900Hazelnut Chocolate

About this palette

Oxford by Night to Hazelnut Chocolate is a 5-color warm, earthy, vintage palette: #00172D (Oxford by Night), #DC9546 (Salt Caramel), #B26900 (Ginger), #DFF1FF (Cotton Boll), #823900 (Hazelnut Chocolate). It mixes black, orange, white, brown tones and feels warm overall. The strongest text pairing is #00172D on #DFF1FF with a contrast ratio of 15.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oxford by Night	rgb(0, 23, 45)	hsl(209, 100%, 9%)
Salt Caramel	rgb(220, 149, 70)	hsl(32, 68%, 57%)
Ginger	rgb(178, 105, 0)	hsl(35, 100%, 35%)
Cotton Boll	rgb(223, 241, 255)	hsl(206, 100%, 94%)
Hazelnut Chocolate	rgb(130, 57, 0)	hsl(26, 100%, 25%)

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.

Aa15.65:1 Super#00172D on #DFF1FF
Aa15.65:1 Super#DFF1FF on #00172D
Aa7.26:1 Very good#00172D on #DC9546
Aa7.26:1 Very good#DC9546 on #00172D
Aa7.17:1 Very good#DFF1FF on #823900
Aa7.17:1 Very good#823900 on #DFF1FF
Aa4.23:1 Poor#00172D on #B26900
Aa4.23:1 Poor#B26900 on #00172D

Color blindness preview

CSS variables

/* Oxford by Night to Hazelnut Chocolate — https://swatchly.xyz/palette/00172d-dc9546-b26900-dff1ff-823900 */
:root {
  --oxford-by-night: #00172d;
  --salt-caramel: #dc9546;
  --ginger: #b26900;
  --cotton-boll: #dff1ff;
  --hazelnut-chocolate: #823900;
}

Tailwind CSS v4

/* Oxford by Night to Hazelnut Chocolate — https://swatchly.xyz/palette/00172d-dc9546-b26900-dff1ff-823900 */
@theme {
  --color-oxford-by-night: #00172d;
  --color-oxford-by-night-50: #eef6ff;
  --color-oxford-by-night-100: #dceeff;
  --color-oxford-by-night-200: #c4daf1;
  --color-oxford-by-night-300: #aac4de;
  --color-oxford-by-night-400: #88a5c1;
  --color-oxford-by-night-500: #6b87a4;
  --color-oxford-by-night-600: #506b85;
  --color-oxford-by-night-700: #3a526a;
  --color-oxford-by-night-800: #293d51;
  --color-oxford-by-night-900: #1c2c3c;
  --color-oxford-by-night-950: #00172d;
  --color-salt-caramel: #dc9546;
  --color-salt-caramel-50: #fff5ec;
  --color-salt-caramel-100: #ffead5;
  --color-salt-caramel-200: #ffd1a5;
  --color-salt-caramel-300: #f4b779;
  --color-salt-caramel-400: #dc9546;
  --color-salt-caramel-500: #bd7925;
  --color-salt-caramel-600: #9d5e00;
  --color-salt-caramel-700: #7d4a00;
  --color-salt-caramel-800: #623900;
  --color-salt-caramel-900: #4c2b00;
  --color-salt-caramel-950: #301900;
  --color-ginger: #b26900;
  --color-ginger-50: #fff1e4;
  --color-ginger-100: #ffe2c8;
  --color-ginger-200: #ffc68f;
  --color-ginger-300: #efaa66;
  --color-ginger-400: #d08737;
  --color-ginger-500: #b26900;
  --color-ginger-600: #905400;
  --color-ginger-700: #734200;
  --color-ginger-800: #5b3300;
  --color-ginger-900: #482700;
  --color-ginger-950: #2f1800;
  --color-cotton-boll: #dff1ff;
  --color-cotton-boll-50: #f1f9ff;
  --color-cotton-boll-100: #dff1ff;
  --color-cotton-boll-200: #cfdce6;
  --color-cotton-boll-300: #b6c5d0;
  --color-cotton-boll-400: #95a5b2;
  --color-cotton-boll-500: #798a96;
  --color-cotton-boll-600: #5f6f7a;
  --color-cotton-boll-700: #495762;
  --color-cotton-boll-800: #38444d;
  --color-cotton-boll-900: #2a343c;
  --color-cotton-boll-950: #192026;
  --color-hazelnut-chocolate: #823900;
  --color-hazelnut-chocolate-50: #fff2ec;
  --color-hazelnut-chocolate-100: #ffe5d8;
  --color-hazelnut-chocolate-200: #ffc9ad;
  --color-hazelnut-chocolate-300: #f5ac85;
  --color-hazelnut-chocolate-400: #d8895e;
  --color-hazelnut-chocolate-500: #ba6c3f;
  --color-hazelnut-chocolate-600: #9b5225;
  --color-hazelnut-chocolate-700: #823900;
  --color-hazelnut-chocolate-800: #662c03;
  --color-hazelnut-chocolate-900: #502000;
  --color-hazelnut-chocolate-950: #341200;
}