Woven to Plunge color palette

D3D79FWoven 8483B4Aster 5A5C3ECypress CFA28BCashmere Clay 311F12Close but No Cigar 005266Plunge

About this palette

Woven to Plunge is a 6-color warm, earthy, vintage palette: #D3D79F (Woven), #8483B4 (Aster), #5A5C3E (Cypress), #CFA28B (Cashmere Clay), #311F12 (Close but No Cigar), #005266 (Plunge). It mixes yellow, purple, brown, orange, blue tones and feels warm overall. The strongest text pairing is #D3D79F on #311F12 with a contrast ratio of 10.48:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Woven	rgb(211, 215, 159)	hsl(64, 41%, 73%)
Aster	rgb(132, 131, 180)	hsl(241, 25%, 61%)
Cypress	rgb(90, 92, 62)	hsl(64, 19%, 30%)
Cashmere Clay	rgb(207, 162, 139)	hsl(20, 41%, 68%)
Close but No Cigar	rgb(49, 31, 18)	hsl(25, 46%, 13%)
Plunge	rgb(0, 82, 102)	hsl(192, 100%, 20%)

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.48:1 Very good#D3D79F on #311F12
Aa10.48:1 Very good#311F12 on #D3D79F
Aa6.89:1 Good#CFA28B on #311F12
Aa6.89:1 Good#311F12 on #CFA28B
Aa5.83:1 Good#D3D79F on #005266
Aa5.83:1 Good#005266 on #D3D79F
Aa4.61:1 Good#D3D79F on #5A5C3E
Aa4.61:1 Good#5A5C3E on #D3D79F

Color blindness preview

CSS variables

/* Woven to Plunge — https://swatchly.xyz/palette/d3d79f-8483b4-5a5c3e-cfa28b-311f12-005266 */
:root {
  --woven: #d3d79f;
  --aster: #8483b4;
  --cypress: #5a5c3e;
  --cashmere-clay: #cfa28b;
  --close-but-no-cigar: #311f12;
  --plunge: #005266;
}

Tailwind CSS v4

/* Woven to Plunge — https://swatchly.xyz/palette/d3d79f-8483b4-5a5c3e-cfa28b-311f12-005266 */
@theme {
  --color-woven: #d3d79f;
  --color-woven-50: #f2f5d4;
  --color-woven-100: #e7eac6;
  --color-woven-200: #d3d79f;
  --color-woven-300: #bdc191;
  --color-woven-400: #9fa36e;
  --color-woven-500: #858853;
  --color-woven-600: #6c6e3b;
  --color-woven-700: #565829;
  --color-woven-800: #44451b;
  --color-woven-900: #343511;
  --color-woven-950: #202107;
  --color-aster: #8483b4;
  --color-aster-50: #f4f5ff;
  --color-aster-100: #eaeaff;
  --color-aster-200: #d5d5fc;
  --color-aster-300: #bebeea;
  --color-aster-400: #9f9ecf;
  --color-aster-500: #8483b4;
  --color-aster-600: #696897;
  --color-aster-700: #53517c;
  --color-aster-800: #403f63;
  --color-aster-900: #312f4e;
  --color-aster-950: #1e1d33;
  --color-cypress: #5a5c3e;
  --color-cypress-50: #f5f7e4;
  --color-cypress-100: #ebedd8;
  --color-cypress-200: #d9dbc2;
  --color-cypress-300: #c3c5a9;
  --color-cypress-400: #a4a788;
  --color-cypress-500: #8a8c6c;
  --color-cypress-600: #707254;
  --color-cypress-700: #5a5c3e;
  --color-cypress-800: #46482f;
  --color-cypress-900: #363722;
  --color-cypress-950: #212213;
  --color-cashmere-clay: #cfa28b;
  --color-cashmere-clay-50: #fff8f4;
  --color-cashmere-clay-100: #ffede5;
  --color-cashmere-clay-200: #f9d8c7;
  --color-cashmere-clay-300: #e8c2af;
  --color-cashmere-clay-400: #cfa28b;
  --color-cashmere-clay-500: #b0856f;
  --color-cashmere-clay-600: #926853;
  --color-cashmere-clay-700: #76503d;
  --color-cashmere-clay-800: #5d3d2c;
  --color-cashmere-clay-900: #482d1e;
  --color-cashmere-clay-950: #2d1a10;
  --color-close-but-no-cigar: #311f12;
  --color-close-but-no-cigar-50: #fff2ea;
  --color-close-but-no-cigar-100: #f7e8dd;
  --color-close-but-no-cigar-200: #e6d3c7;
  --color-close-but-no-cigar-300: #d1bcae;
  --color-close-but-no-cigar-400: #b39c8d;
  --color-close-but-no-cigar-500: #998273;
  --color-close-but-no-cigar-600: #7e695a;
  --color-close-but-no-cigar-700: #675346;
  --color-close-but-no-cigar-800: #534236;
  --color-close-but-no-cigar-900: #423329;
  --color-close-but-no-cigar-950: #311f12;
  --color-plunge: #005266;
  --color-plunge-50: #e7f9ff;
  --color-plunge-100: #cef2ff;
  --color-plunge-200: #b0e1f2;
  --color-plunge-300: #95cce0;
  --color-plunge-400: #70afc4;
  --color-plunge-500: #5395aa;
  --color-plunge-600: #397b90;
  --color-plunge-700: #246478;
  --color-plunge-800: #005266;
  --color-plunge-900: #093f4e;
  --color-plunge-950: #022833;
}