LA Vibes to Sablé Color Palette

About this palette

LA Vibes to Sablé is a 5-color pastel, light, cool palette: #E9C9DE (LA Vibes), #92D9E8 (Infinity Pool), #D3F4C3 (Maroccan Tea), #B6D7C1 (Frosted Fir), #F5D7C2 (Sablé). It mixes pink, turquoise, green, orange tones and feels cool overall. The strongest text pairing is #92D9E8 on #D3F4C3 with a contrast ratio of 1.31:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
LA Vibes	rgb(233, 201, 222)	hsl(321, 42%, 85%)
Infinity Pool	rgb(146, 217, 232)	hsl(190, 65%, 74%)
Maroccan Tea	rgb(211, 244, 195)	hsl(100, 69%, 86%)
Frosted Fir	rgb(182, 215, 193)	hsl(140, 29%, 78%)
Sablé	rgb(245, 215, 194)	hsl(25, 72%, 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.

Color blindness preview

CSS variables

/* LA Vibes to Sablé — https://swatchly.xyz/palette/e9c9de-92d9e8-d3f4c3-b6d7c1-f5d7c2 */
:root {
  --la-vibes: #e9c9de;
  --infinity-pool: #92d9e8;
  --maroccan-tea: #d3f4c3;
  --frosted-fir: #b6d7c1;
  --sabl: #f5d7c2;
}

Tailwind CSS v4

/* LA Vibes to Sablé — https://swatchly.xyz/palette/e9c9de-92d9e8-d3f4c3-b6d7c1-f5d7c2 */
@theme {
  --color-la-vibes: #e9c9de;
  --color-la-vibes-50: #ffedf8;
  --color-la-vibes-100: #f6e1ef;
  --color-la-vibes-200: #e9c9de;
  --color-la-vibes-300: #d0b5c7;
  --color-la-vibes-400: #b295a8;
  --color-la-vibes-500: #977a8e;
  --color-la-vibes-600: #7d6173;
  --color-la-vibes-700: #654c5d;
  --color-la-vibes-800: #503b49;
  --color-la-vibes-900: #3e2c39;
  --color-la-vibes-950: #281a23;
  --color-infinity-pool: #92d9e8;
  --color-infinity-pool-50: #f3fdff;
  --color-infinity-pool-100: #dcf9ff;
  --color-infinity-pool-200: #bbeaf4;
  --color-infinity-pool-300: #92d9e8;
  --color-infinity-pool-400: #75b6c4;
  --color-infinity-pool-500: #5399a7;
  --color-infinity-pool-600: #357c8a;
  --color-infinity-pool-700: #1e626f;
  --color-infinity-pool-800: #0c4c57;
  --color-infinity-pool-900: #023a43;
  --color-infinity-pool-950: #00242b;
  --color-maroccan-tea: #d3f4c3;
  --color-maroccan-tea-50: #e7fade;
  --color-maroccan-tea-100: #d3f4c3;
  --color-maroccan-tea-200: #c5deba;
  --color-maroccan-tea-300: #adc9a0;
  --color-maroccan-tea-400: #8dab7e;
  --color-maroccan-tea-500: #729063;
  --color-maroccan-tea-600: #59754a;
  --color-maroccan-tea-700: #445e37;
  --color-maroccan-tea-800: #334a28;
  --color-maroccan-tea-900: #26391c;
  --color-maroccan-tea-950: #16240f;
  --color-frosted-fir: #b6d7c1;
  --color-frosted-fir-50: #e0f4e7;
  --color-frosted-fir-100: #d3e9da;
  --color-frosted-fir-200: #b6d7c1;
  --color-frosted-fir-300: #a4c1ae;
  --color-frosted-fir-400: #85a490;
  --color-frosted-fir-500: #6b8a76;
  --color-frosted-fir-600: #54715e;
  --color-frosted-fir-700: #405b4a;
  --color-frosted-fir-800: #31493a;
  --color-frosted-fir-900: #24382c;
  --color-frosted-fir-950: #15231a;
  --color-sabl: #f5d7c2;
  --color-sabl-50: #fff8f3;
  --color-sabl-100: #feede0;
  --color-sabl-200: #f5d7c2;
  --color-sabl-300: #d9c1af;
  --color-sabl-400: #ba9f8c;
  --color-sabl-500: #9e836f;
  --color-sabl-600: #816855;
  --color-sabl-700: #685140;
  --color-sabl-800: #523e2f;
  --color-sabl-900: #402f22;
  --color-sabl-950: #281c13;
}