Start generating

Seedling to Sun-Kissed Sands color palette

C2C994SeedlingABD0E5Vive le VentC4E4FFSalty IceFFE4E8Porcelain SkinFFECBFSun-Kissed Sands
Open in generator Export PNG, PDF, ASE…

About this palette

Seedling to Sun-Kissed Sands is a 5-color pastel, light palette: #C2C994 (Seedling), #ABD0E5 (Vive le Vent), #C4E4FF (Salty Ice), #FFE4E8 (Porcelain Skin), #FFECBF (Sun-Kissed Sands). It mixes green, blue, white, yellow tones and feels balanced overall. The strongest text pairing is #C2C994 on #FFECBF with a contrast ratio of 1.49:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Seedlingrgb(194, 201, 148)hsl(68, 33%, 68%)
Vive le Ventrgb(171, 208, 229)hsl(202, 53%, 78%)
Salty Icergb(196, 228, 255)hsl(207, 100%, 88%)
Porcelain Skinrgb(255, 228, 232)hsl(351, 100%, 95%)
Sun-Kissed Sandsrgb(255, 236, 191)hsl(42, 100%, 87%)

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

    /* Seedling to Sun-Kissed Sands — https://swatchly.xyz/palette/c2c994-abd0e5-c4e4ff-ffe4e8-ffecbf */
:root {
  --seedling: #c2c994;
  --vive-le-vent: #abd0e5;
  --salty-ice: #c4e4ff;
  --porcelain-skin: #ffe4e8;
  --sun-kissed-sands: #ffecbf;
}

    Tailwind CSS v4

    /* Seedling to Sun-Kissed Sands — https://swatchly.xyz/palette/c2c994-abd0e5-c4e4ff-ffe4e8-ffecbf */
@theme {
  --color-seedling: #c2c994;
  --color-seedling-50: #f5fadd;
  --color-seedling-100: #ecf1d0;
  --color-seedling-200: #d8deb7;
  --color-seedling-300: #c2c994;
  --color-seedling-400: #a2a977;
  --color-seedling-500: #878d5a;
  --color-seedling-600: #6c7241;
  --color-seedling-700: #555a2d;
  --color-seedling-800: #42461f;
  --color-seedling-900: #323614;
  --color-seedling-950: #1f2109;
  --color-vive-le-vent: #abd0e5;
  --color-vive-le-vent-50: #f4fbff;
  --color-vive-le-vent-100: #e2f5ff;
  --color-vive-le-vent-200: #cae4f2;
  --color-vive-le-vent-300: #abd0e5;
  --color-vive-le-vent-400: #8caec1;
  --color-vive-le-vent-500: #6e91a5;
  --color-vive-le-vent-600: #537588;
  --color-vive-le-vent-700: #3d5c6d;
  --color-vive-le-vent-800: #2c4856;
  --color-vive-le-vent-900: #1f3642;
  --color-vive-le-vent-950: #11222a;
  --color-salty-ice: #c4e4ff;
  --color-salty-ice-50: #f7fbff;
  --color-salty-ice-100: #e7f4ff;
  --color-salty-ice-200: #c4e4ff;
  --color-salty-ice-300: #b1cbe1;
  --color-salty-ice-400: #8eabc3;
  --color-salty-ice-500: #708ea6;
  --color-salty-ice-600: #557289;
  --color-salty-ice-700: #405a6f;
  --color-salty-ice-800: #2f4557;
  --color-salty-ice-900: #223545;
  --color-salty-ice-950: #13212c;
  --color-porcelain-skin: #ffe4e8;
  --color-porcelain-skin-50: #fff2f4;
  --color-porcelain-skin-100: #ffe4e8;
  --color-porcelain-skin-200: #e6d2d5;
  --color-porcelain-skin-300: #d1bbbe;
  --color-porcelain-skin-400: #b39b9e;
  --color-porcelain-skin-500: #977f83;
  --color-porcelain-skin-600: #7c6569;
  --color-porcelain-skin-700: #644f52;
  --color-porcelain-skin-800: #4f3d40;
  --color-porcelain-skin-900: #3d2e31;
  --color-porcelain-skin-950: #271c1e;
  --color-sun-kissed-sands: #ffecbf;
  --color-sun-kissed-sands-50: #fff7e2;
  --color-sun-kissed-sands-100: #ffecbf;
  --color-sun-kissed-sands-200: #e6d8b8;
  --color-sun-kissed-sands-300: #d1c19c;
  --color-sun-kissed-sands-400: #b2a178;
  --color-sun-kissed-sands-500: #96855b;
  --color-sun-kissed-sands-600: #7b6a42;
  --color-sun-kissed-sands-700: #63532f;
  --color-sun-kissed-sands-800: #4e4120;
  --color-sun-kissed-sands-900: #3d3116;
  --color-sun-kissed-sands-950: #261e0a;
}

    Similar palettes