Grape to Underwater Moonlight Color Palette

About this palette

Grape to Underwater Moonlight is a 5-color cool, vintage palette: #673658 (Grape), #B08757 (Iced Coffee), #162C3E (Oceanic Noir), #9FD7AD (Big Spender), #3B86AE (Underwater Moonlight). It mixes purple, orange, blue, green tones and feels cool overall. The strongest text pairing is #162C3E on #9FD7AD with a contrast ratio of 8.74:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape	rgb(103, 54, 88)	hsl(318, 31%, 31%)
Iced Coffee	rgb(176, 135, 87)	hsl(32, 36%, 52%)
Oceanic Noir	rgb(22, 44, 62)	hsl(207, 48%, 16%)
Big Spender	rgb(159, 215, 173)	hsl(135, 41%, 73%)
Underwater Moonlight	rgb(59, 134, 174)	hsl(201, 49%, 46%)

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.74:1 Very good#162C3E on #9FD7AD
Aa8.74:1 Very good#9FD7AD on #162C3E
Aa5.70:1 Good#673658 on #9FD7AD
Aa5.70:1 Good#9FD7AD on #673658
Aa4.41:1 Poor#B08757 on #162C3E
Aa4.41:1 Poor#162C3E on #B08757
Aa3.56:1 Poor#162C3E on #3B86AE
Aa3.56:1 Poor#3B86AE on #162C3E

Color blindness preview

CSS variables

/* Grape to Underwater Moonlight — https://swatchly.xyz/palette/673658-b08757-162c3e-9fd7ad-3b86ae */
:root {
  --grape: #673658;
  --iced-coffee: #b08757;
  --oceanic-noir: #162c3e;
  --big-spender: #9fd7ad;
  --underwater-moonlight: #3b86ae;
}

Tailwind CSS v4

/* Grape to Underwater Moonlight — https://swatchly.xyz/palette/673658-b08757-162c3e-9fd7ad-3b86ae */
@theme {
  --color-grape: #673658;
  --color-grape-50: #fff0f9;
  --color-grape-100: #ffe1f4;
  --color-grape-200: #f5c8e5;
  --color-grape-300: #e3b1d1;
  --color-grape-400: #c791b4;
  --color-grape-500: #ad769a;
  --color-grape-600: #925d81;
  --color-grape-700: #79496a;
  --color-grape-800: #673658;
  --color-grape-900: #4f2a43;
  --color-grape-950: #34192b;
  --color-iced-coffee: #b08757;
  --color-iced-coffee-50: #fff5ea;
  --color-iced-coffee-100: #ffebd5;
  --color-iced-coffee-200: #f6d7b4;
  --color-iced-coffee-300: #e5c198;
  --color-iced-coffee-400: #c9a274;
  --color-iced-coffee-500: #b08757;
  --color-iced-coffee-600: #926b3b;
  --color-iced-coffee-700: #775326;
  --color-iced-coffee-800: #5f3f16;
  --color-iced-coffee-900: #4a2f0c;
  --color-iced-coffee-950: #2f1c04;
  --color-oceanic-noir: #162c3e;
  --color-oceanic-noir-50: #edf7ff;
  --color-oceanic-noir-100: #ddeefc;
  --color-oceanic-noir-200: #c7daec;
  --color-oceanic-noir-300: #aec4d8;
  --color-oceanic-noir-400: #8aa3b9;
  --color-oceanic-noir-500: #6d869b;
  --color-oceanic-noir-600: #526a7e;
  --color-oceanic-noir-700: #3d5163;
  --color-oceanic-noir-800: #2b3d4c;
  --color-oceanic-noir-900: #162c3e;
  --color-oceanic-noir-950: #101922;
  --color-big-spender: #9fd7ad;
  --color-big-spender-50: #e9ffee;
  --color-big-spender-100: #d8f9e0;
  --color-big-spender-200: #c1e8ca;
  --color-big-spender-300: #9fd7ad;
  --color-big-spender-400: #81b58e;
  --color-big-spender-500: #639971;
  --color-big-spender-600: #487c57;
  --color-big-spender-700: #336341;
  --color-big-spender-800: #234e30;
  --color-big-spender-900: #173c23;
  --color-big-spender-950: #0b2614;
  --color-underwater-moonlight: #3b86ae;
  --color-underwater-moonlight-50: #e8f6ff;
  --color-underwater-moonlight-100: #d0edff;
  --color-underwater-moonlight-200: #a4dbfc;
  --color-underwater-moonlight-300: #84c4e9;
  --color-underwater-moonlight-400: #5ba3cb;
  --color-underwater-moonlight-500: #3b86ae;
  --color-underwater-moonlight-600: #216c92;
  --color-underwater-moonlight-700: #0c5678;
  --color-underwater-moonlight-800: #004461;
  --color-underwater-moonlight-900: #00354d;
  --color-underwater-moonlight-950: #002132;
}