Powder Puff to Sea Glass Teal Color Palette

About this palette

Powder Puff to Sea Glass Teal is a 4-color pastel, light palette: #FFF0F4 (Powder Puff), #FED098 (Peach Beach), #A6D0D2 (Wave), #A8E7E3 (Sea Glass Teal). It mixes white, orange, turquoise tones and feels cool overall. The strongest text pairing is #FFF0F4 on #A6D0D2 with a contrast ratio of 1.51:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Powder Puff	rgb(255, 240, 244)	hsl(344, 100%, 97%)
Peach Beach	rgb(254, 208, 152)	hsl(33, 98%, 80%)
Wave	rgb(166, 208, 210)	hsl(183, 33%, 74%)
Sea Glass Teal	rgb(168, 231, 227)	hsl(176, 57%, 78%)

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

/* Powder Puff to Sea Glass Teal — https://swatchly.xyz/palette/fff0f4-fed098-a6d0d2-a8e7e3 */
:root {
  --powder-puff: #fff0f4;
  --peach-beach: #fed098;
  --wave: #a6d0d2;
  --sea-glass-teal: #a8e7e3;
}

Tailwind CSS v4

/* Powder Puff to Sea Glass Teal — https://swatchly.xyz/palette/fff0f4-fed098-a6d0d2-a8e7e3 */
@theme {
  --color-powder-puff: #fff0f4;
  --color-powder-puff-50: #fff0f4;
  --color-powder-puff-100: #f1e8ea;
  --color-powder-puff-200: #dfd4d7;
  --color-powder-puff-300: #c9bdc0;
  --color-powder-puff-400: #ab9da1;
  --color-powder-puff-500: #8f8286;
  --color-powder-puff-600: #75686b;
  --color-powder-puff-700: #5d5255;
  --color-powder-puff-800: #493f42;
  --color-powder-puff-900: #393033;
  --color-powder-puff-950: #231d1f;
  --color-peach-beach: #fed098;
  --color-peach-beach-50: #fff4e8;
  --color-peach-beach-100: #ffe9ce;
  --color-peach-beach-200: #fed098;
  --color-peach-beach-300: #e1bb8d;
  --color-peach-beach-400: #c49a66;
  --color-peach-beach-500: #a87e48;
  --color-peach-beach-600: #8b632e;
  --color-peach-beach-700: #714d1a;
  --color-peach-beach-800: #5b3b0b;
  --color-peach-beach-900: #472c03;
  --color-peach-beach-950: #2e1b01;
  --color-wave: #a6d0d2;
  --color-wave-50: #e7fdfe;
  --color-wave-100: #dcf5f6;
  --color-wave-200: #c5e3e5;
  --color-wave-300: #a6d0d2;
  --color-wave-400: #88afb1;
  --color-wave-500: #6a9294;
  --color-wave-600: #507678;
  --color-wave-700: #3a5e60;
  --color-wave-800: #2a494b;
  --color-wave-900: #1d3839;
  --color-wave-950: #102324;
  --color-sea-glass-teal: #a8e7e3;
  --color-sea-glass-teal-50: #ddfefc;
  --color-sea-glass-teal-100: #d0f5f3;
  --color-sea-glass-teal-200: #a8e7e3;
  --color-sea-glass-teal-300: #9aceca;
  --color-sea-glass-teal-400: #75afac;
  --color-sea-glass-teal-500: #569390;
  --color-sea-glass-teal-600: #3c7875;
  --color-sea-glass-teal-700: #28605d;
  --color-sea-glass-teal-800: #194b49;
  --color-sea-glass-teal-900: #0e3a39;
  --color-sea-glass-teal-950: #052523;
}