Crystal to Holographic Lavender Color Palette

About this palette

Crystal to Holographic Lavender is a 4-color pastel, light palette: #A4DAE3 (Crystal), #A2CAA6 (Limestoned), #FFF7C0 (Jasmine), #EAE6FF (Holographic Lavender). It mixes turquoise, green, yellow, white tones and feels cool overall. The strongest text pairing is #A2CAA6 on #FFF7C0 with a contrast ratio of 1.67:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crystal	rgb(164, 218, 227)	hsl(189, 53%, 77%)
Limestoned	rgb(162, 202, 166)	hsl(126, 27%, 71%)
Jasmine	rgb(255, 247, 192)	hsl(52, 100%, 88%)
Holographic Lavender	rgb(234, 230, 255)	hsl(250, 100%, 95%)

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

/* Crystal to Holographic Lavender — https://swatchly.xyz/palette/a4dae3-a2caa6-fff7c0-eae6ff */
:root {
  --crystal: #a4dae3;
  --limestoned: #a2caa6;
  --jasmine: #fff7c0;
  --holographic-lavender: #eae6ff;
}

Tailwind CSS v4

/* Crystal to Holographic Lavender — https://swatchly.xyz/palette/a4dae3-a2caa6-fff7c0-eae6ff */
@theme {
  --color-crystal: #a4dae3;
  --color-crystal-50: #d7f6fb;
  --color-crystal-100: #c8ecf2;
  --color-crystal-200: #a4dae3;
  --color-crystal-300: #95c4cb;
  --color-crystal-400: #73a6af;
  --color-crystal-500: #588c95;
  --color-crystal-600: #40727a;
  --color-crystal-700: #2d5c64;
  --color-crystal-800: #204950;
  --color-crystal-900: #15393e;
  --color-crystal-950: #092327;
  --color-limestoned: #a2caa6;
  --color-limestoned-50: #e4fbe6;
  --color-limestoned-100: #d7f1da;
  --color-limestoned-200: #c0dec3;
  --color-limestoned-300: #a2caa6;
  --color-limestoned-400: #85aa89;
  --color-limestoned-500: #698f6e;
  --color-limestoned-600: #517555;
  --color-limestoned-700: #3d5e41;
  --color-limestoned-800: #2d4a31;
  --color-limestoned-900: #213a24;
  --color-limestoned-950: #122415;
  --color-jasmine: #fff7c0;
  --color-jasmine-50: #fff7c0;
  --color-jasmine-100: #f1eccb;
  --color-jasmine-200: #dfd9b1;
  --color-jasmine-300: #c9c295;
  --color-jasmine-400: #aba371;
  --color-jasmine-500: #8f8855;
  --color-jasmine-600: #756d3c;
  --color-jasmine-700: #5d5629;
  --color-jasmine-800: #49431a;
  --color-jasmine-900: #393310;
  --color-jasmine-950: #242007;
  --color-holographic-lavender: #eae6ff;
  --color-holographic-lavender-50: #f4f2ff;
  --color-holographic-lavender-100: #eae6ff;
  --color-holographic-lavender-200: #d6d4e6;
  --color-holographic-lavender-300: #c0bdd2;
  --color-holographic-lavender-400: #a19db4;
  --color-holographic-lavender-500: #868299;
  --color-holographic-lavender-600: #6c687e;
  --color-holographic-lavender-700: #565265;
  --color-holographic-lavender-800: #434050;
  --color-holographic-lavender-900: #33313f;
  --color-holographic-lavender-950: #1f1e28;
}