Taupe to Water Color Palette

About this palette

Taupe to Water is a 4-color muted, vintage palette: #BBA480 (Taupe), #946760 (Chocolate Temptation), #003852 (Sea of Stars), #D3F2FF (Water). It mixes yellow, red, blue, white tones and feels balanced overall. The strongest text pairing is #003852 on #D3F2FF with a contrast ratio of 10.62:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Taupe	rgb(187, 164, 128)	hsl(37, 30%, 62%)
Chocolate Temptation	rgb(148, 103, 96)	hsl(8, 21%, 48%)
Sea of Stars	rgb(0, 56, 82)	hsl(199, 100%, 16%)
Water	rgb(211, 242, 255)	hsl(198, 100%, 91%)

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.62:1 Very good#003852 on #D3F2FF
Aa10.62:1 Very good#D3F2FF on #003852
Aa5.18:1 Good#BBA480 on #003852
Aa5.18:1 Good#003852 on #BBA480
Aa4.10:1 Poor#946760 on #D3F2FF
Aa4.10:1 Poor#D3F2FF on #946760

Color blindness preview

CSS variables

/* Taupe to Water — https://swatchly.xyz/palette/bba480-946760-003852-d3f2ff */
:root {
  --taupe: #bba480;
  --chocolate-temptation: #946760;
  --sea-of-stars: #003852;
  --water: #d3f2ff;
}

Tailwind CSS v4

/* Taupe to Water — https://swatchly.xyz/palette/bba480-946760-003852-d3f2ff */
@theme {
  --color-taupe: #bba480;
  --color-taupe-50: #fff6e8;
  --color-taupe-100: #fbecd6;
  --color-taupe-200: #ead9bf;
  --color-taupe-300: #d7c3a5;
  --color-taupe-400: #bba480;
  --color-taupe-500: #9e8765;
  --color-taupe-600: #816c4a;
  --color-taupe-700: #685536;
  --color-taupe-800: #524126;
  --color-taupe-900: #3f311a;
  --color-taupe-950: #271d0d;
  --color-chocolate-temptation: #946760;
  --color-chocolate-temptation-50: #fff2ef;
  --color-chocolate-temptation-100: #ffe6e2;
  --color-chocolate-temptation-200: #f6d1cb;
  --color-chocolate-temptation-300: #e4bab3;
  --color-chocolate-temptation-400: #c99b93;
  --color-chocolate-temptation-500: #af8079;
  --color-chocolate-temptation-600: #946760;
  --color-chocolate-temptation-700: #79504a;
  --color-chocolate-temptation-800: #603d37;
  --color-chocolate-temptation-900: #4b2d29;
  --color-chocolate-temptation-950: #311b18;
  --color-sea-of-stars: #003852;
  --color-sea-of-stars-50: #ebf7ff;
  --color-sea-of-stars-100: #d7efff;
  --color-sea-of-stars-200: #b8def6;
  --color-sea-of-stars-300: #9dc8e3;
  --color-sea-of-stars-400: #79a9c6;
  --color-sea-of-stars-500: #5c8dab;
  --color-sea-of-stars-600: #43728f;
  --color-sea-of-stars-700: #2f5b75;
  --color-sea-of-stars-800: #20485e;
  --color-sea-of-stars-900: #003852;
  --color-sea-of-stars-950: #0a2230;
  --color-water: #d3f2ff;
  --color-water-50: #eaf9ff;
  --color-water-100: #d3f2ff;
  --color-water-200: #c6dde6;
  --color-water-300: #adc6d1;
  --color-water-400: #8ba7b3;
  --color-water-500: #6f8c97;
  --color-water-600: #56717c;
  --color-water-700: #415a64;
  --color-water-800: #30464f;
  --color-water-900: #23363d;
  --color-water-950: #142127;
}