Oasis to English Walnut Color Palette

About this palette

Oasis to English Walnut is a 5-color cool, vintage palette: #009196 (Oasis), #929DCE (Azureno), #115A67 (Abyssal Waters), #FEC2A0 (Blushing Cinnamon), #422A17 (English Walnut). It mixes turquoise, blue, orange, brown tones and feels cool overall. The strongest text pairing is #FEC2A0 on #422A17 with a contrast ratio of 8.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oasis	rgb(0, 145, 150)	hsl(182, 100%, 29%)
Azureno	rgb(146, 157, 206)	hsl(229, 38%, 69%)
Abyssal Waters	rgb(17, 90, 103)	hsl(189, 72%, 24%)
Blushing Cinnamon	rgb(254, 194, 160)	hsl(22, 98%, 81%)
English Walnut	rgb(66, 42, 23)	hsl(27, 48%, 17%)

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.

Aa8.53:1 Very good#FEC2A0 on #422A17
Aa8.53:1 Very good#422A17 on #FEC2A0
Aa5.04:1 Good#929DCE on #422A17
Aa5.04:1 Good#422A17 on #929DCE
Aa5.01:1 Good#115A67 on #FEC2A0
Aa5.01:1 Good#FEC2A0 on #115A67
Aa3.49:1 Poor#009196 on #422A17
Aa3.49:1 Poor#422A17 on #009196

Color blindness preview

CSS variables

/* Oasis to English Walnut — https://swatchly.xyz/palette/009196-929dce-115a67-fec2a0-422a17 */
:root {
  --oasis: #009196;
  --azureno: #929dce;
  --abyssal-waters: #115a67;
  --blushing-cinnamon: #fec2a0;
  --english-walnut: #422a17;
}

Tailwind CSS v4

/* Oasis to English Walnut — https://swatchly.xyz/palette/009196-929dce-115a67-fec2a0-422a17 */
@theme {
  --color-oasis: #009196;
  --color-oasis-50: #d3fdff;
  --color-oasis-100: #b6f6f9;
  --color-oasis-200: #95e4e7;
  --color-oasis-300: #71ced1;
  --color-oasis-400: #3faeb3;
  --color-oasis-500: #009196;
  --color-oasis-600: #007579;
  --color-oasis-700: #005d60;
  --color-oasis-800: #00494c;
  --color-oasis-900: #00393b;
  --color-oasis-950: #002426;
  --color-azureno: #929dce;
  --color-azureno-50: #f1f4ff;
  --color-azureno-100: #e4e9ff;
  --color-azureno-200: #cbd4fb;
  --color-azureno-300: #b3bde9;
  --color-azureno-400: #929dce;
  --color-azureno-500: #7882b1;
  --color-azureno-600: #5e6894;
  --color-azureno-700: #49527a;
  --color-azureno-800: #383f62;
  --color-azureno-900: #2a304e;
  --color-azureno-950: #191d33;
  --color-abyssal-waters: #115a67;
  --color-abyssal-waters-50: #e4faff;
  --color-abyssal-waters-100: #cbf3fd;
  --color-abyssal-waters-200: #b0e0eb;
  --color-abyssal-waters-300: #92cad6;
  --color-abyssal-waters-400: #6baab8;
  --color-abyssal-waters-500: #4c8e9b;
  --color-abyssal-waters-600: #31727f;
  --color-abyssal-waters-700: #115a67;
  --color-abyssal-waters-800: #0f4650;
  --color-abyssal-waters-900: #06363f;
  --color-abyssal-waters-950: #022228;
  --color-blushing-cinnamon: #fec2a0;
  --color-blushing-cinnamon-50: #ffede2;
  --color-blushing-cinnamon-100: #ffdecc;
  --color-blushing-cinnamon-200: #fec2a0;
  --color-blushing-cinnamon-300: #e2af92;
  --color-blushing-cinnamon-400: #c68f70;
  --color-blushing-cinnamon-500: #ab7555;
  --color-blushing-cinnamon-600: #8f5c3d;
  --color-blushing-cinnamon-700: #76472b;
  --color-blushing-cinnamon-800: #5f371e;
  --color-blushing-cinnamon-900: #4b2913;
  --color-blushing-cinnamon-950: #311808;
  --color-english-walnut: #422a17;
  --color-english-walnut-50: #fff2ea;
  --color-english-walnut-100: #fbe7d9;
  --color-english-walnut-200: #ead2c1;
  --color-english-walnut-300: #d6bba8;
  --color-english-walnut-400: #b79b86;
  --color-english-walnut-500: #9b7f69;
  --color-english-walnut-600: #7f6450;
  --color-english-walnut-700: #664e3c;
  --color-english-walnut-800: #503b2b;
  --color-english-walnut-900: #422a17;
  --color-english-walnut-950: #271a11;
}