Cosy Wool to Herbal Vapours Color Palette

About this palette

Cosy Wool to Herbal Vapours is a 5-color pastel, light, cool palette: #D9B898 (Cosy Wool), #D9D2FF (Icy Plains), #B3E4E4 (Opal), #FFE4D4 (Slightly in Love), #CFFFDA (Herbal Vapours). It mixes orange, purple, turquoise, green tones and feels cool overall. The strongest text pairing is #D9B898 on #CFFFDA with a contrast ratio of 1.68:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cosy Wool	rgb(217, 184, 152)	hsl(30, 46%, 72%)
Icy Plains	rgb(217, 210, 255)	hsl(249, 100%, 91%)
Opal	rgb(179, 228, 228)	hsl(180, 48%, 80%)
Slightly in Love	rgb(255, 228, 212)	hsl(22, 100%, 92%)
Herbal Vapours	rgb(207, 255, 218)	hsl(134, 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.

Color blindness preview

CSS variables

/* Cosy Wool to Herbal Vapours — https://swatchly.xyz/palette/d9b898-d9d2ff-b3e4e4-ffe4d4-cfffda */
:root {
  --cosy-wool: #d9b898;
  --icy-plains: #d9d2ff;
  --opal: #b3e4e4;
  --slightly-in-love: #ffe4d4;
  --herbal-vapours: #cfffda;
}

Tailwind CSS v4

/* Cosy Wool to Herbal Vapours — https://swatchly.xyz/palette/d9b898-d9d2ff-b3e4e4-ffe4d4-cfffda */
@theme {
  --color-cosy-wool: #d9b898;
  --color-cosy-wool-50: #fff1e5;
  --color-cosy-wool-100: #fbe6d1;
  --color-cosy-wool-200: #ead1b8;
  --color-cosy-wool-300: #d9b898;
  --color-cosy-wool-400: #b8997b;
  --color-cosy-wool-500: #9d7e60;
  --color-cosy-wool-600: #826447;
  --color-cosy-wool-700: #694f34;
  --color-cosy-wool-800: #543d26;
  --color-cosy-wool-900: #422e1a;
  --color-cosy-wool-950: #2a1c0e;
  --color-icy-plains: #d9d2ff;
  --color-icy-plains-50: #f6f4ff;
  --color-icy-plains-100: #ece9ff;
  --color-icy-plains-200: #d9d2ff;
  --color-icy-plains-300: #c2bce2;
  --color-icy-plains-400: #a39cc5;
  --color-icy-plains-500: #8780a9;
  --color-icy-plains-600: #6d668d;
  --color-icy-plains-700: #565073;
  --color-icy-plains-800: #433d5c;
  --color-icy-plains-900: #332e48;
  --color-icy-plains-950: #201c2f;
  --color-opal: #b3e4e4;
  --color-opal-50: #e2fcfc;
  --color-opal-100: #d6f3f3;
  --color-opal-200: #b3e4e4;
  --color-opal-300: #a3cbcb;
  --color-opal-400: #7facac;
  --color-opal-500: #629191;
  --color-opal-600: #487576;
  --color-opal-700: #345e5e;
  --color-opal-800: #25494a;
  --color-opal-900: #193939;
  --color-opal-950: #0d2424;
  --color-slightly-in-love: #ffe4d4;
  --color-slightly-in-love-50: #fff1e9;
  --color-slightly-in-love-100: #ffe4d4;
  --color-slightly-in-love-200: #e6d2c6;
  --color-slightly-in-love-300: #d1bbae;
  --color-slightly-in-love-400: #b49b8d;
  --color-slightly-in-love-500: #988072;
  --color-slightly-in-love-600: #7d6659;
  --color-slightly-in-love-700: #655044;
  --color-slightly-in-love-800: #503e33;
  --color-slightly-in-love-900: #3e2f26;
  --color-slightly-in-love-950: #271d16;
  --color-herbal-vapours: #cfffda;
  --color-herbal-vapours-50: #cfffda;
  --color-herbal-vapours-100: #d3f1d9;
  --color-herbal-vapours-200: #bcdfc4;
  --color-herbal-vapours-300: #a3cbac;
  --color-herbal-vapours-400: #81ad8c;
  --color-herbal-vapours-500: #669271;
  --color-herbal-vapours-600: #4d7758;
  --color-herbal-vapours-700: #396043;
  --color-herbal-vapours-800: #294b33;
  --color-herbal-vapours-900: #1d3a25;
  --color-herbal-vapours-950: #0f2516;
}