Oxford by Night to Shrimp Toast color palette

001E2EOxford by Night 5C3300Chocolate Fantasies 3C6B8FQueen Blue BF7C4BPheasant 70AEF7Fennel Flower F6C29AShrimp Toast

Open in generator Export PNG, PDF, ASE…

About this palette

Oxford by Night to Shrimp Toast is a 6-color vintage palette: #001E2E (Oxford by Night), #5C3300 (Chocolate Fantasies), #3C6B8F (Queen Blue), #BF7C4B (Pheasant), #70AEF7 (Fennel Flower), #F6C29A (Shrimp Toast). It mixes blue, brown, orange tones and feels balanced overall. The strongest text pairing is #001E2E on #F6C29A with a contrast ratio of 10.69:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oxford by Night	rgb(0, 30, 46)	hsl(201, 100%, 9%)
Chocolate Fantasies	rgb(92, 51, 0)	hsl(33, 100%, 18%)
Queen Blue	rgb(60, 107, 143)	hsl(206, 41%, 40%)
Pheasant	rgb(191, 124, 75)	hsl(25, 48%, 52%)
Fennel Flower	rgb(112, 174, 247)	hsl(212, 89%, 70%)
Shrimp Toast	rgb(246, 194, 154)	hsl(26, 84%, 78%)

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.69:1 Very good#001E2E on #F6C29A
Aa10.69:1 Very good#F6C29A on #001E2E
Aa7.42:1 Very good#001E2E on #70AEF7
Aa7.42:1 Very good#70AEF7 on #001E2E
Aa6.79:1 Good#5C3300 on #F6C29A
Aa6.79:1 Good#F6C29A on #5C3300
Aa5.06:1 Good#001E2E on #BF7C4B
Aa5.06:1 Good#BF7C4B on #001E2E

Color blindness preview

CSS variables

/* Oxford by Night to Shrimp Toast — https://swatchly.xyz/palette/001e2e-5c3300-3c6b8f-bf7c4b-70aef7-f6c29a */
:root {
  --oxford-by-night: #001e2e;
  --chocolate-fantasies: #5c3300;
  --queen-blue: #3c6b8f;
  --pheasant: #bf7c4b;
  --fennel-flower: #70aef7;
  --shrimp-toast: #f6c29a;
}

Tailwind CSS v4

/* Oxford by Night to Shrimp Toast — https://swatchly.xyz/palette/001e2e-5c3300-3c6b8f-bf7c4b-70aef7-f6c29a */
@theme {
  --color-oxford-by-night: #001e2e;
  --color-oxford-by-night-50: #ebf7ff;
  --color-oxford-by-night-100: #d9effd;
  --color-oxford-by-night-200: #c2dcec;
  --color-oxford-by-night-300: #a9c6d8;
  --color-oxford-by-night-400: #87a7bb;
  --color-oxford-by-night-500: #6a8a9e;
  --color-oxford-by-night-600: #506f82;
  --color-oxford-by-night-700: #3b5768;
  --color-oxford-by-night-800: #2a4351;
  --color-oxford-by-night-900: #1e323e;
  --color-oxford-by-night-950: #001e2e;
  --color-chocolate-fantasies: #5c3300;
  --color-chocolate-fantasies-50: #fff3e8;
  --color-chocolate-fantasies-100: #ffe6d0;
  --color-chocolate-fantasies-200: #f5d0ae;
  --color-chocolate-fantasies-300: #e1b791;
  --color-chocolate-fantasies-400: #c4956b;
  --color-chocolate-fantasies-500: #a7794d;
  --color-chocolate-fantasies-600: #8a5e34;
  --color-chocolate-fantasies-700: #6f4821;
  --color-chocolate-fantasies-800: #5c3300;
  --color-chocolate-fantasies-900: #44280a;
  --color-chocolate-fantasies-950: #2c1804;
  --color-queen-blue: #3c6b8f;
  --color-queen-blue-50: #edf7ff;
  --color-queen-blue-100: #d8edff;
  --color-queen-blue-200: #b5dbf9;
  --color-queen-blue-300: #99c3e6;
  --color-queen-blue-400: #74a3c9;
  --color-queen-blue-500: #5787ac;
  --color-queen-blue-600: #3c6b8f;
  --color-queen-blue-700: #2b5574;
  --color-queen-blue-800: #1e425e;
  --color-queen-blue-900: #14334a;
  --color-queen-blue-950: #092030;
  --color-pheasant: #bf7c4b;
  --color-pheasant-50: #fff4ed;
  --color-pheasant-100: #ffe9db;
  --color-pheasant-200: #ffd1b2;
  --color-pheasant-300: #f3b88f;
  --color-pheasant-400: #d99869;
  --color-pheasant-500: #bf7c4b;
  --color-pheasant-600: #a0602f;
  --color-pheasant-700: #844919;
  --color-pheasant-800: #6a3608;
  --color-pheasant-900: #532801;
  --color-pheasant-950: #351700;
  --color-fennel-flower: #70aef7;
  --color-fennel-flower-50: #f4f9ff;
  --color-fennel-flower-100: #e6f1ff;
  --color-fennel-flower-200: #c7e0ff;
  --color-fennel-flower-300: #a2ccff;
  --color-fennel-flower-400: #70aef7;
  --color-fennel-flower-500: #5490d7;
  --color-fennel-flower-600: #3773b7;
  --color-fennel-flower-700: #225a98;
  --color-fennel-flower-800: #12457c;
  --color-fennel-flower-900: #073462;
  --color-fennel-flower-950: #021f40;
  --color-shrimp-toast: #f6c29a;
  --color-shrimp-toast-50: #ffeadb;
  --color-shrimp-toast-100: #ffdbc1;
  --color-shrimp-toast-200: #f6c29a;
  --color-shrimp-toast-300: #dcaf8c;
  --color-shrimp-toast-400: #c0906b;
  --color-shrimp-toast-500: #a67650;
  --color-shrimp-toast-600: #8a5e39;
  --color-shrimp-toast-700: #724928;
  --color-shrimp-toast-800: #5c391b;
  --color-shrimp-toast-900: #492b11;
  --color-shrimp-toast-950: #2f1907;
}