Start generating

Basil Smash to Cotton Ball color palette

BBDDA2Basil SmashF4CC94Sparkling ChampagneF5C8C6Millennial PinkABF0ECPale King’s BlueEEF4FFCotton Ball
Open in generator Export PNG, PDF, ASE…

About this palette

Basil Smash to Cotton Ball is a 5-color pastel, light palette: #BBDDA2 (Basil Smash), #F4CC94 (Sparkling Champagne), #F5C8C6 (Millennial Pink), #ABF0EC (Pale King’s Blue), #EEF4FF (Cotton Ball). It mixes green, yellow, pink, turquoise, white tones and feels balanced overall. The strongest text pairing is #F4CC94 on #EEF4FF with a contrast ratio of 1.37:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Basil Smashrgb(187, 221, 162)hsl(95, 46%, 75%)
Sparkling Champagnergb(244, 204, 148)hsl(35, 81%, 77%)
Millennial Pinkrgb(245, 200, 198)hsl(3, 70%, 87%)
Pale King’s Bluergb(171, 240, 236)hsl(177, 70%, 81%)
Cotton Ballrgb(238, 244, 255)hsl(219, 100%, 97%)

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

    /* Basil Smash to Cotton Ball — https://swatchly.xyz/palette/bbdda2-f4cc94-f5c8c6-abf0ec-eef4ff */
:root {
  --basil-smash: #bbdda2;
  --sparkling-champagne: #f4cc94;
  --millennial-pink: #f5c8c6;
  --pale-king-s-blue: #abf0ec;
  --cotton-ball: #eef4ff;
}

    Tailwind CSS v4

    /* Basil Smash to Cotton Ball — https://swatchly.xyz/palette/bbdda2-f4cc94-f5c8c6-abf0ec-eef4ff */
@theme {
  --color-basil-smash: #bbdda2;
  --color-basil-smash-50: #e4f8d5;
  --color-basil-smash-100: #d7eec7;
  --color-basil-smash-200: #bbdda2;
  --color-basil-smash-300: #a9c693;
  --color-basil-smash-400: #89a872;
  --color-basil-smash-500: #6f8e57;
  --color-basil-smash-600: #57743f;
  --color-basil-smash-700: #435e2d;
  --color-basil-smash-800: #334a1f;
  --color-basil-smash-900: #263a15;
  --color-basil-smash-950: #162409;
  --color-sparkling-champagne: #f4cc94;
  --color-sparkling-champagne-50: #fff0db;
  --color-sparkling-champagne-100: #fde3c0;
  --color-sparkling-champagne-200: #f4cc94;
  --color-sparkling-champagne-300: #d9b788;
  --color-sparkling-champagne-400: #bd9863;
  --color-sparkling-champagne-500: #a27d47;
  --color-sparkling-champagne-600: #86632e;
  --color-sparkling-champagne-700: #6e4e1b;
  --color-sparkling-champagne-800: #583c0e;
  --color-sparkling-champagne-900: #452e05;
  --color-sparkling-champagne-950: #2c1b01;
  --color-millennial-pink: #f5c8c6;
  --color-millennial-pink-50: #ffefee;
  --color-millennial-pink-100: #fee1df;
  --color-millennial-pink-200: #f5c8c6;
  --color-millennial-pink-300: #dab4b2;
  --color-millennial-pink-400: #bd9492;
  --color-millennial-pink-500: #a27977;
  --color-millennial-pink-600: #86605e;
  --color-millennial-pink-700: #6d4a49;
  --color-millennial-pink-800: #573938;
  --color-millennial-pink-900: #442b2a;
  --color-millennial-pink-950: #2c1a19;
  --color-pale-king-s-blue: #abf0ec;
  --color-pale-king-s-blue-50: #f0fffe;
  --color-pale-king-s-blue-100: #d6fcf9;
  --color-pale-king-s-blue-200: #abf0ec;
  --color-pale-king-s-blue-300: #9ed5d1;
  --color-pale-king-s-blue-400: #76b5b1;
  --color-pale-king-s-blue-500: #559895;
  --color-pale-king-s-blue-600: #387b78;
  --color-pale-king-s-blue-700: #22625f;
  --color-pale-king-s-blue-800: #124c4a;
  --color-pale-king-s-blue-900: #073b39;
  --color-pale-king-s-blue-950: #022524;
  --color-cotton-ball: #eef4ff;
  --color-cotton-ball-50: #eef4ff;
  --color-cotton-ball-100: #e6eaf1;
  --color-cotton-ball-200: #d2d7df;
  --color-cotton-ball-300: #bbc0c9;
  --color-cotton-ball-400: #9ca1ab;
  --color-cotton-ball-500: #818690;
  --color-cotton-ball-600: #676c75;
  --color-cotton-ball-700: #51555e;
  --color-cotton-ball-800: #3f424a;
  --color-cotton-ball-900: #303339;
  --color-cotton-ball-950: #1d1f24;
}

    Similar palettes