Start generating

Cabbage to Cold White color palette

8AD2B6CabbageF5CD96Sparkling ChampagneB6ECCAMint-o-liciousFFE4D1Slightly in LoveEBFBFFCold White
Open in generator Export PNG, PDF, ASE…

About this palette

Cabbage to Cold White is a 5-color pastel, light, gradient palette: #8AD2B6 (Cabbage), #F5CD96 (Sparkling Champagne), #B6ECCA (Mint-o-licious), #FFE4D1 (Slightly in Love), #EBFBFF (Cold White). It mixes turquoise, yellow, green, orange, white tones and feels balanced overall. The strongest text pairing is #8AD2B6 on #EBFBFF with a contrast ratio of 1.65:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cabbagergb(138, 210, 182)hsl(157, 44%, 68%)
Sparkling Champagnergb(245, 205, 150)hsl(35, 83%, 77%)
Mint-o-liciousrgb(182, 236, 202)hsl(142, 59%, 82%)
Slightly in Lovergb(255, 228, 209)hsl(25, 100%, 91%)
Cold Whitergb(235, 251, 255)hsl(192, 100%, 96%)

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

    /* Cabbage to Cold White — https://swatchly.xyz/palette/8ad2b6-f5cd96-b6ecca-ffe4d1-ebfbff */
:root {
  --cabbage: #8ad2b6;
  --sparkling-champagne: #f5cd96;
  --mint-o-licious: #b6ecca;
  --slightly-in-love: #ffe4d1;
  --cold-white: #ebfbff;
}

    Tailwind CSS v4

    /* Cabbage to Cold White — https://swatchly.xyz/palette/8ad2b6-f5cd96-b6ecca-ffe4d1-ebfbff */
@theme {
  --color-cabbage: #8ad2b6;
  --color-cabbage-50: #daffef;
  --color-cabbage-100: #cbf7e4;
  --color-cabbage-200: #b0e5cf;
  --color-cabbage-300: #8ad2b6;
  --color-cabbage-400: #6db197;
  --color-cabbage-500: #4f967c;
  --color-cabbage-600: #347b62;
  --color-cabbage-700: #1f634d;
  --color-cabbage-800: #104e3b;
  --color-cabbage-900: #063d2d;
  --color-cabbage-950: #01261b;
  --color-sparkling-champagne: #f5cd96;
  --color-sparkling-champagne-50: #fff1de;
  --color-sparkling-champagne-100: #fee4c2;
  --color-sparkling-champagne-200: #f5cd96;
  --color-sparkling-champagne-300: #dab88a;
  --color-sparkling-champagne-400: #bd9965;
  --color-sparkling-champagne-500: #a27d48;
  --color-sparkling-champagne-600: #87642f;
  --color-sparkling-champagne-700: #6e4e1d;
  --color-sparkling-champagne-800: #583c0f;
  --color-sparkling-champagne-900: #452e06;
  --color-sparkling-champagne-950: #2c1b02;
  --color-mint-o-licious: #b6ecca;
  --color-mint-o-licious-50: #eafff1;
  --color-mint-o-licious-100: #daf9e5;
  --color-mint-o-licious-200: #b6ecca;
  --color-mint-o-licious-300: #a6d2b6;
  --color-mint-o-licious-400: #81b294;
  --color-mint-o-licious-500: #639677;
  --color-mint-o-licious-600: #487a5d;
  --color-mint-o-licious-700: #346147;
  --color-mint-o-licious-800: #244c35;
  --color-mint-o-licious-900: #183b28;
  --color-mint-o-licious-950: #0c2517;
  --color-slightly-in-love: #ffe4d1;
  --color-slightly-in-love-50: #fff1e7;
  --color-slightly-in-love-100: #ffe4d1;
  --color-slightly-in-love-200: #e6d2c4;
  --color-slightly-in-love-300: #d2bbab;
  --color-slightly-in-love-400: #b49c8a;
  --color-slightly-in-love-500: #98806f;
  --color-slightly-in-love-600: #7d6656;
  --color-slightly-in-love-700: #655042;
  --color-slightly-in-love-800: #503e31;
  --color-slightly-in-love-900: #3e2f24;
  --color-slightly-in-love-950: #281d15;
  --color-cold-white: #ebfbff;
  --color-cold-white-50: #ebfbff;
  --color-cold-white-100: #e6eff2;
  --color-cold-white-200: #d0dbde;
  --color-cold-white-300: #b8c5c8;
  --color-cold-white-400: #97a5a9;
  --color-cold-white-500: #7b898d;
  --color-cold-white-600: #616f72;
  --color-cold-white-700: #4b585b;
  --color-cold-white-800: #3a4547;
  --color-cold-white-900: #2b3537;
  --color-cold-white-950: #1a2122;
}

    Similar palettes