Start generating

Pastel Pea to Crystal color palette

C6E6A7Pastel PeaA7CBA4LimestonedFFD9DAStrawberry BlondeF6F8FFGhost WhiteA7DAE3Crystal
Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Pea to Crystal is a 5-color pastel, light, cool palette: #C6E6A7 (Pastel Pea), #A7CBA4 (Limestoned), #FFD9DA (Strawberry Blonde), #F6F8FF (Ghost White), #A7DAE3 (Crystal). It mixes green, pink, white, turquoise tones and feels cool overall. The strongest text pairing is #A7CBA4 on #F6F8FF with a contrast ratio of 1.69:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pastel Peargb(198, 230, 167)hsl(90, 56%, 78%)
Limestonedrgb(167, 203, 164)hsl(115, 27%, 72%)
Strawberry Blondergb(255, 217, 218)hsl(358, 100%, 93%)
Ghost Whitergb(246, 248, 255)hsl(227, 100%, 98%)
Crystalrgb(167, 218, 227)hsl(189, 52%, 77%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Pastel Pea to Crystal — https://swatchly.xyz/palette/c6e6a7-a7cba4-ffd9da-f6f8ff-a7dae3 */
:root {
  --pastel-pea: #c6e6a7;
  --limestoned: #a7cba4;
  --strawberry-blonde: #ffd9da;
  --ghost-white: #f6f8ff;
  --crystal: #a7dae3;
}

    Tailwind CSS v4

    /* Pastel Pea to Crystal — https://swatchly.xyz/palette/c6e6a7-a7cba4-ffd9da-f6f8ff-a7dae3 */
@theme {
  --color-pastel-pea: #c6e6a7;
  --color-pastel-pea-50: #ecfedc;
  --color-pastel-pea-100: #e1f5cf;
  --color-pastel-pea-200: #c6e6a7;
  --color-pastel-pea-300: #b2cd99;
  --color-pastel-pea-400: #91ae74;
  --color-pastel-pea-500: #759257;
  --color-pastel-pea-600: #5b773e;
  --color-pastel-pea-700: #465f2a;
  --color-pastel-pea-800: #354a1c;
  --color-pastel-pea-900: #273911;
  --color-pastel-pea-950: #172407;
  --color-limestoned: #a7cba4;
  --color-limestoned-50: #e7fbe5;
  --color-limestoned-100: #dbf2d9;
  --color-limestoned-200: #c4dfc1;
  --color-limestoned-300: #a7cba4;
  --color-limestoned-400: #89ab87;
  --color-limestoned-500: #6e906b;
  --color-limestoned-600: #557552;
  --color-limestoned-700: #405e3e;
  --color-limestoned-800: #304a2e;
  --color-limestoned-900: #233922;
  --color-limestoned-950: #142413;
  --color-strawberry-blonde: #ffd9da;
  --color-strawberry-blonde-50: #ffe9e9;
  --color-strawberry-blonde-100: #ffd9da;
  --color-strawberry-blonde-200: #e6c9ca;
  --color-strawberry-blonde-300: #d3b3b4;
  --color-strawberry-blonde-400: #b69495;
  --color-strawberry-blonde-500: #9c7a7b;
  --color-strawberry-blonde-600: #816162;
  --color-strawberry-blonde-700: #694d4e;
  --color-strawberry-blonde-800: #543b3c;
  --color-strawberry-blonde-900: #422c2d;
  --color-strawberry-blonde-950: #2a1b1b;
  --color-ghost-white: #f6f8ff;
  --color-ghost-white-50: #f6f8ff;
  --color-ghost-white-100: #eceef2;
  --color-ghost-white-200: #d8d9de;
  --color-ghost-white-300: #c0c2c8;
  --color-ghost-white-400: #a0a2a8;
  --color-ghost-white-500: #85868d;
  --color-ghost-white-600: #6a6b71;
  --color-ghost-white-700: #53555a;
  --color-ghost-white-800: #414247;
  --color-ghost-white-900: #323337;
  --color-ghost-white-950: #1e1f22;
  --color-crystal: #a7dae3;
  --color-crystal-50: #d9f6fb;
  --color-crystal-100: #caecf2;
  --color-crystal-200: #a7dae3;
  --color-crystal-300: #98c3cb;
  --color-crystal-400: #76a6ae;
  --color-crystal-500: #5b8c94;
  --color-crystal-600: #43727a;
  --color-crystal-700: #305c63;
  --color-crystal-800: #224950;
  --color-crystal-900: #17383e;
  --color-crystal-950: #0b2327;
}

    Similar palettes