Cashmere Clay to Dainty Peach Color Palette

About this palette

Cashmere Clay to Dainty Peach is a 4-color vintage palette: #C99D8B (Cashmere Clay), #0D2F39 (Oceanic Noir), #00637A (Blue-Collar), #FFD2BA (Dainty Peach). It mixes orange, blue tones and feels balanced overall. The strongest text pairing is #0D2F39 on #FFD2BA with a contrast ratio of 10.24:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cashmere Clay	rgb(201, 157, 139)	hsl(17, 36%, 67%)
Oceanic Noir	rgb(13, 47, 57)	hsl(194, 63%, 14%)
Blue-Collar	rgb(0, 99, 122)	hsl(191, 100%, 24%)
Dainty Peach	rgb(255, 210, 186)	hsl(21, 100%, 86%)

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.24:1 Very good#0D2F39 on #FFD2BA
Aa10.24:1 Very good#FFD2BA on #0D2F39
Aa5.85:1 Good#C99D8B on #0D2F39
Aa5.85:1 Good#0D2F39 on #C99D8B
Aa4.95:1 Good#00637A on #FFD2BA
Aa4.95:1 Good#FFD2BA on #00637A

Color blindness preview

CSS variables

/* Cashmere Clay to Dainty Peach — https://swatchly.xyz/palette/c99d8b-0d2f39-00637a-ffd2ba */
:root {
  --cashmere-clay: #c99d8b;
  --oceanic-noir: #0d2f39;
  --blue-collar: #00637a;
  --dainty-peach: #ffd2ba;
}

Tailwind CSS v4

/* Cashmere Clay to Dainty Peach — https://swatchly.xyz/palette/c99d8b-0d2f39-00637a-ffd2ba */
@theme {
  --color-cashmere-clay: #c99d8b;
  --color-cashmere-clay-50: #fff5f1;
  --color-cashmere-clay-100: #ffeae1;
  --color-cashmere-clay-200: #f5d4c7;
  --color-cashmere-clay-300: #e3bdae;
  --color-cashmere-clay-400: #c99d8b;
  --color-cashmere-clay-500: #ab816f;
  --color-cashmere-clay-600: #8d6555;
  --color-cashmere-clay-700: #734e3f;
  --color-cashmere-clay-800: #5b3b2e;
  --color-cashmere-clay-900: #472c21;
  --color-cashmere-clay-950: #2d1a12;
  --color-oceanic-noir: #0d2f39;
  --color-oceanic-noir-50: #e7f9ff;
  --color-oceanic-noir-100: #d9f0f8;
  --color-oceanic-noir-200: #c2dde6;
  --color-oceanic-noir-300: #a8c7d2;
  --color-oceanic-noir-400: #84a6b2;
  --color-oceanic-noir-500: #678995;
  --color-oceanic-noir-600: #4c6d78;
  --color-oceanic-noir-700: #37545e;
  --color-oceanic-noir-800: #263f47;
  --color-oceanic-noir-900: #0d2f39;
  --color-oceanic-noir-950: #0d1b1f;
  --color-blue-collar: #00637a;
  --color-blue-collar-50: #e7f9ff;
  --color-blue-collar-100: #cef2ff;
  --color-blue-collar-200: #abe2f5;
  --color-blue-collar-300: #8dcee3;
  --color-blue-collar-400: #66afc7;
  --color-blue-collar-500: #4694ad;
  --color-blue-collar-600: #297a91;
  --color-blue-collar-700: #00637a;
  --color-blue-collar-800: #004d60;
  --color-blue-collar-900: #003c4b;
  --color-blue-collar-950: #002530;
  --color-dainty-peach: #ffd2ba;
  --color-dainty-peach-50: #fff7f3;
  --color-dainty-peach-100: #ffebe1;
  --color-dainty-peach-200: #ffd2ba;
  --color-dainty-peach-300: #e1bca9;
  --color-dainty-peach-400: #c39b85;
  --color-dainty-peach-500: #a77e68;
  --color-dainty-peach-600: #8a634e;
  --color-dainty-peach-700: #704d3a;
  --color-dainty-peach-800: #583a2a;
  --color-dainty-peach-900: #452c1e;
  --color-dainty-peach-950: #2d1a10;
}