Rosewood Dreams to Sugar Coated color palette

F1BEB3Rosewood Dreams AADBD7Catch the Wave C1D1F6Frost Fairy C8FACDToxic Steam FFEBF3Sugar Coated

About this palette

Rosewood Dreams to Sugar Coated is a 5-color pastel, light, cool palette: #F1BEB3 (Rosewood Dreams), #AADBD7 (Catch the Wave), #C1D1F6 (Frost Fairy), #C8FACD (Toxic Steam), #FFEBF3 (Sugar Coated). It mixes pink, turquoise, blue, green, white tones and feels cool overall. The strongest text pairing is #F1BEB3 on #FFEBF3 with a contrast ratio of 1.44:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rosewood Dreams	rgb(241, 190, 179)	hsl(11, 69%, 82%)
Catch the Wave	rgb(170, 219, 215)	hsl(175, 40%, 76%)
Frost Fairy	rgb(193, 209, 246)	hsl(222, 75%, 86%)
Toxic Steam	rgb(200, 250, 205)	hsl(126, 83%, 88%)
Sugar Coated	rgb(255, 235, 243)	hsl(336, 100%, 96%)

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

/* Rosewood Dreams to Sugar Coated — https://swatchly.xyz/palette/f1beb3-aadbd7-c1d1f6-c8facd-ffebf3 */
:root {
  --rosewood-dreams: #f1beb3;
  --catch-the-wave: #aadbd7;
  --frost-fairy: #c1d1f6;
  --toxic-steam: #c8facd;
  --sugar-coated: #ffebf3;
}

Tailwind CSS v4

/* Rosewood Dreams to Sugar Coated — https://swatchly.xyz/palette/f1beb3-aadbd7-c1d1f6-c8facd-ffebf3 */
@theme {
  --color-rosewood-dreams: #f1beb3;
  --color-rosewood-dreams-50: #fff9f8;
  --color-rosewood-dreams-100: #ffeeeb;
  --color-rosewood-dreams-200: #fbd7d0;
  --color-rosewood-dreams-300: #f1beb3;
  --color-rosewood-dreams-400: #cc9e94;
  --color-rosewood-dreams-500: #af8076;
  --color-rosewood-dreams-600: #91645a;
  --color-rosewood-dreams-700: #754d44;
  --color-rosewood-dreams-800: #5c3932;
  --color-rosewood-dreams-900: #472a24;
  --color-rosewood-dreams-950: #2e1915;
  --color-catch-the-wave: #aadbd7;
  --color-catch-the-wave-50: #daf7f4;
  --color-catch-the-wave-100: #ccece9;
  --color-catch-the-wave-200: #aadbd7;
  --color-catch-the-wave-300: #9ac4c1;
  --color-catch-the-wave-400: #79a7a3;
  --color-catch-the-wave-500: #5e8d89;
  --color-catch-the-wave-600: #467370;
  --color-catch-the-wave-700: #335d5a;
  --color-catch-the-wave-800: #254a47;
  --color-catch-the-wave-900: #193937;
  --color-catch-the-wave-950: #0d2422;
  --color-frost-fairy: #c1d1f6;
  --color-frost-fairy-50: #ebf1ff;
  --color-frost-fairy-100: #dbe6ff;
  --color-frost-fairy-200: #c1d1f6;
  --color-frost-fairy-300: #aebcdb;
  --color-frost-fairy-400: #8f9dbf;
  --color-frost-fairy-500: #7483a5;
  --color-frost-fairy-600: #5c6989;
  --color-frost-fairy-700: #485471;
  --color-frost-fairy-800: #37425b;
  --color-frost-fairy-900: #293248;
  --color-frost-fairy-950: #181f2e;
  --color-toxic-steam: #c8facd;
  --color-toxic-steam-50: #e2fde4;
  --color-toxic-steam-100: #c8facd;
  --color-toxic-steam-200: #bee2c2;
  --color-toxic-steam-300: #a4cda8;
  --color-toxic-steam-400: #81af86;
  --color-toxic-steam-500: #65936b;
  --color-toxic-steam-600: #4c7852;
  --color-toxic-steam-700: #38603d;
  --color-toxic-steam-800: #284c2d;
  --color-toxic-steam-900: #1c3b21;
  --color-toxic-steam-950: #0f2512;
  --color-sugar-coated: #ffebf3;
  --color-sugar-coated-50: #ffebf3;
  --color-sugar-coated-100: #f1e4e9;
  --color-sugar-coated-200: #dfd0d6;
  --color-sugar-coated-300: #cabac0;
  --color-sugar-coated-400: #ac9ba2;
  --color-sugar-coated-500: #928087;
  --color-sugar-coated-600: #77666d;
  --color-sugar-coated-700: #605057;
  --color-sugar-coated-800: #4b3e44;
  --color-sugar-coated-900: #3a2f34;
  --color-sugar-coated-950: #251d20;
}