Oxford by Night to Cool as a Cucumber color palette

About this palette

Oxford by Night to Cool as a Cucumber is a 5-color cool palette: #001E33 (Oxford by Night), #007EC2 (Honolulu Blue), #6A2645 (Siren), #94AF4D (Lime It or Leave It), #C3D776 (Cool as a Cucumber). It mixes blue, red, green tones and feels cool overall. The strongest text pairing is #001E33 on #C3D776 with a contrast ratio of 10.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Oxford by Nightrgb(0, 30, 51)hsl(205, 100%, 10%)
Honolulu Bluergb(0, 126, 194)hsl(201, 100%, 38%)
Sirenrgb(106, 38, 69)hsl(333, 47%, 28%)
Lime It or Leave Itrgb(148, 175, 77)hsl(77, 39%, 49%)
Cool as a Cucumberrgb(195, 215, 118)hsl(72, 55%, 65%)

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.78:1 Very good#001E33 on #C3D776
  • Aa10.78:1 Very good#C3D776 on #001E33
  • Aa6.89:1 Good#001E33 on #94AF4D
  • Aa6.89:1 Good#94AF4D on #001E33
  • Aa6.73:1 Good#6A2645 on #C3D776
  • Aa6.73:1 Good#C3D776 on #6A2645
  • Aa4.30:1 Poor#6A2645 on #94AF4D
  • Aa4.30:1 Poor#94AF4D on #6A2645

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Oxford by Night to Cool as a Cucumber — https://swatchly.xyz/palette/001e33-007ec2-6a2645-94af4d-c3d776 */
:root {
  --oxford-by-night: #001e33;
  --honolulu-blue: #007ec2;
  --siren: #6a2645;
  --lime-it-or-leave-it: #94af4d;
  --cool-as-a-cucumber: #c3d776;
}

Tailwind CSS v4

/* Oxford by Night to Cool as a Cucumber — https://swatchly.xyz/palette/001e33-007ec2-6a2645-94af4d-c3d776 */
@theme {
  --color-oxford-by-night: #001e33;
  --color-oxford-by-night-50: #edf7ff;
  --color-oxford-by-night-100: #daeeff;
  --color-oxford-by-night-200: #c1dbf1;
  --color-oxford-by-night-300: #a8c5dd;
  --color-oxford-by-night-400: #86a6c0;
  --color-oxford-by-night-500: #698aa4;
  --color-oxford-by-night-600: #4f6e87;
  --color-oxford-by-night-700: #3a576d;
  --color-oxford-by-night-800: #2a4356;
  --color-oxford-by-night-900: #1e3242;
  --color-oxford-by-night-950: #001e33;
  --color-honolulu-blue: #007ec2;
  --color-honolulu-blue-50: #edf7ff;
  --color-honolulu-blue-100: #def0ff;
  --color-honolulu-blue-200: #bde1ff;
  --color-honolulu-blue-300: #92cfff;
  --color-honolulu-blue-400: #58b2f5;
  --color-honolulu-blue-500: #3398dd;
  --color-honolulu-blue-600: #007ec2;
  --color-honolulu-blue-700: #00649b;
  --color-honolulu-blue-800: #004e7a;
  --color-honolulu-blue-900: #003b5f;
  --color-honolulu-blue-950: #00253e;
  --color-siren: #6a2645;
  --color-siren-50: #fff1f6;
  --color-siren-100: #ffe2ec;
  --color-siren-200: #ffc4da;
  --color-siren-300: #efa9c4;
  --color-siren-400: #d387a5;
  --color-siren-500: #b66b89;
  --color-siren-600: #99516f;
  --color-siren-700: #7d3c58;
  --color-siren-800: #6a2645;
  --color-siren-900: #4f2035;
  --color-siren-950: #341121;
  --color-lime-it-or-leave-it: #94af4d;
  --color-lime-it-or-leave-it-50: #edfeca;
  --color-lime-it-or-leave-it-100: #e2f5ba;
  --color-lime-it-or-leave-it-200: #cde39c;
  --color-lime-it-or-leave-it-300: #b5cd7c;
  --color-lime-it-or-leave-it-400: #94af4d;
  --color-lime-it-or-leave-it-500: #79932f;
  --color-lime-it-or-leave-it-600: #5f7708;
  --color-lime-it-or-leave-it-700: #4b5f00;
  --color-lime-it-or-leave-it-800: #3a4a00;
  --color-lime-it-or-leave-it-900: #2c3900;
  --color-lime-it-or-leave-it-950: #1a2300;
  --color-cool-as-a-cucumber: #c3d776;
  --color-cool-as-a-cucumber-50: #f7ffe1;
  --color-cool-as-a-cucumber-100: #edfac4;
  --color-cool-as-a-cucumber-200: #dae9a8;
  --color-cool-as-a-cucumber-300: #c3d776;
  --color-cool-as-a-cucumber-400: #a2b45b;
  --color-cool-as-a-cucumber-500: #859735;
  --color-cool-as-a-cucumber-600: #6a7a0e;
  --color-cool-as-a-cucumber-700: #536000;
  --color-cool-as-a-cucumber-800: #3f4a00;
  --color-cool-as-a-cucumber-900: #2f3800;
  --color-cool-as-a-cucumber-950: #1d2300;
}

Similar palettes