Avocado Stone to Prismarine Color Palette

About this palette

Avocado Stone to Prismarine is a 5-color warm, vintage palette: #4D442C (Avocado Stone), #DAD1A8 (Gratin Dauphinois), #97A3D4 (Azureno), #A7717F (Never Forget), #0E7570 (Prismarine). It mixes brown, yellow, blue, pink, turquoise tones and feels warm overall. The strongest text pairing is #4D442C on #DAD1A8 with a contrast ratio of 6.27:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Avocado Stone	rgb(77, 68, 44)	hsl(44, 27%, 24%)
Gratin Dauphinois	rgb(218, 209, 168)	hsl(49, 40%, 76%)
Azureno	rgb(151, 163, 212)	hsl(228, 41%, 71%)
Never Forget	rgb(167, 113, 127)	hsl(344, 23%, 55%)
Prismarine	rgb(14, 117, 112)	hsl(177, 79%, 26%)

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.

Aa6.27:1 Good#4D442C on #DAD1A8
Aa6.27:1 Good#DAD1A8 on #4D442C
Aa3.90:1 Poor#4D442C on #97A3D4
Aa3.90:1 Poor#97A3D4 on #4D442C
Aa3.60:1 Poor#DAD1A8 on #0E7570
Aa3.60:1 Poor#0E7570 on #DAD1A8

Color blindness preview

CSS variables

/* Avocado Stone to Prismarine — https://swatchly.xyz/palette/4d442c-dad1a8-97a3d4-a7717f-0e7570 */
:root {
  --avocado-stone: #4d442c;
  --gratin-dauphinois: #dad1a8;
  --azureno: #97a3d4;
  --never-forget: #a7717f;
  --prismarine: #0e7570;
}

Tailwind CSS v4

/* Avocado Stone to Prismarine — https://swatchly.xyz/palette/4d442c-dad1a8-97a3d4-a7717f-0e7570 */
@theme {
  --color-avocado-stone: #4d442c;
  --color-avocado-stone-50: #fbf5e5;
  --color-avocado-stone-100: #f1ebd9;
  --color-avocado-stone-200: #dfd7c2;
  --color-avocado-stone-300: #cac1a9;
  --color-avocado-stone-400: #aca288;
  --color-avocado-stone-500: #91876d;
  --color-avocado-stone-600: #766d54;
  --color-avocado-stone-700: #5f5740;
  --color-avocado-stone-800: #4d442c;
  --color-avocado-stone-900: #3b3423;
  --color-avocado-stone-950: #252014;
  --color-gratin-dauphinois: #dad1a8;
  --color-gratin-dauphinois-50: #f6f1d9;
  --color-gratin-dauphinois-100: #ebe6cb;
  --color-gratin-dauphinois-200: #dad1a8;
  --color-gratin-dauphinois-300: #c3bc98;
  --color-gratin-dauphinois-400: #a69e77;
  --color-gratin-dauphinois-500: #8c835d;
  --color-gratin-dauphinois-600: #726a45;
  --color-gratin-dauphinois-700: #5c5533;
  --color-gratin-dauphinois-800: #494325;
  --color-gratin-dauphinois-900: #39331a;
  --color-gratin-dauphinois-950: #231f0d;
  --color-azureno: #97a3d4;
  --color-azureno-50: #f4f6ff;
  --color-azureno-100: #e8edff;
  --color-azureno-200: #cfd9fe;
  --color-azureno-300: #b8c2ed;
  --color-azureno-400: #97a3d4;
  --color-azureno-500: #7b87b6;
  --color-azureno-600: #616b98;
  --color-azureno-700: #4b547d;
  --color-azureno-800: #394164;
  --color-azureno-900: #2b314f;
  --color-azureno-950: #191e33;
  --color-never-forget: #a7717f;
  --color-never-forget-50: #fff0f3;
  --color-never-forget-100: #ffe1e8;
  --color-never-forget-200: #f5c8d2;
  --color-never-forget-300: #e1afbb;
  --color-never-forget-400: #c38d9b;
  --color-never-forget-500: #a7717f;
  --color-never-forget-600: #8b5866;
  --color-never-forget-700: #714450;
  --color-never-forget-800: #5b333e;
  --color-never-forget-900: #482630;
  --color-never-forget-950: #2e161d;
  --color-prismarine: #0e7570;
  --color-prismarine-50: #d6fffb;
  --color-prismarine-100: #c2f6f1;
  --color-prismarine-200: #a4e3de;
  --color-prismarine-300: #84cdc7;
  --color-prismarine-400: #5aaea8;
  --color-prismarine-500: #37918c;
  --color-prismarine-600: #0e7570;
  --color-prismarine-700: #005d59;
  --color-prismarine-800: #004946;
  --color-prismarine-900: #003936;
  --color-prismarine-950: #002422;
}