Start generating

Frosted Fir to Bunny Tail color palette

B4D7BEFrosted FirE0BCBBSoft BlushCBC9FEInnocent SnowdropBEE2FFBroad DaylightC7F0D4Pastel MintFFDDF6Bunny Tail
Open in generator Export PNG, PDF, ASE…

About this palette

Frosted Fir to Bunny Tail is a 6-color pastel, light, cool palette: #B4D7BE (Frosted Fir), #E0BCBB (Soft Blush), #CBC9FE (Innocent Snowdrop), #BEE2FF (Broad Daylight), #C7F0D4 (Pastel Mint), #FFDDF6 (Bunny Tail). It mixes green, pink, purple, blue tones and feels cool overall. The strongest text pairing is #E0BCBB on #FFDDF6 with a contrast ratio of 1.40:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frosted Firrgb(180, 215, 190)hsl(137, 30%, 77%)
Soft Blushrgb(224, 188, 187)hsl(2, 37%, 81%)
Innocent Snowdroprgb(203, 201, 254)hsl(242, 96%, 89%)
Broad Daylightrgb(190, 226, 255)hsl(207, 100%, 87%)
Pastel Mintrgb(199, 240, 212)hsl(139, 58%, 86%)
Bunny Tailrgb(255, 221, 246)hsl(316, 100%, 93%)

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

    /* Frosted Fir to Bunny Tail — https://swatchly.xyz/palette/b4d7be-e0bcbb-cbc9fe-bee2ff-c7f0d4-ffddf6 */
:root {
  --frosted-fir: #b4d7be;
  --soft-blush: #e0bcbb;
  --innocent-snowdrop: #cbc9fe;
  --broad-daylight: #bee2ff;
  --pastel-mint: #c7f0d4;
  --bunny-tail: #ffddf6;
}

    Tailwind CSS v4

    /* Frosted Fir to Bunny Tail — https://swatchly.xyz/palette/b4d7be-e0bcbb-cbc9fe-bee2ff-c7f0d4-ffddf6 */
@theme {
  --color-frosted-fir: #b4d7be;
  --color-frosted-fir-50: #dff4e5;
  --color-frosted-fir-100: #d1e9d8;
  --color-frosted-fir-200: #b4d7be;
  --color-frosted-fir-300: #a3c1ab;
  --color-frosted-fir-400: #83a48d;
  --color-frosted-fir-500: #6a8b74;
  --color-frosted-fir-600: #52715c;
  --color-frosted-fir-700: #3f5c48;
  --color-frosted-fir-800: #304938;
  --color-frosted-fir-900: #23392a;
  --color-frosted-fir-950: #142319;
  --color-soft-blush: #e0bcbb;
  --color-soft-blush-50: #fff5f5;
  --color-soft-blush-100: #ffe9e8;
  --color-soft-blush-200: #efd5d4;
  --color-soft-blush-300: #e0bcbb;
  --color-soft-blush-400: #bd9c9b;
  --color-soft-blush-500: #a1807f;
  --color-soft-blush-600: #846564;
  --color-soft-blush-700: #6b4e4e;
  --color-soft-blush-800: #543c3b;
  --color-soft-blush-900: #412d2c;
  --color-soft-blush-950: #2a1b1b;
  --color-innocent-snowdrop: #cbc9fe;
  --color-innocent-snowdrop-50: #eeeeff;
  --color-innocent-snowdrop-100: #e2e1ff;
  --color-innocent-snowdrop-200: #cbc9fe;
  --color-innocent-snowdrop-300: #b6b5e3;
  --color-innocent-snowdrop-400: #9896c7;
  --color-innocent-snowdrop-500: #7f7cad;
  --color-innocent-snowdrop-600: #666391;
  --color-innocent-snowdrop-700: #514e78;
  --color-innocent-snowdrop-800: #403d62;
  --color-innocent-snowdrop-900: #312e4d;
  --color-innocent-snowdrop-950: #1e1c32;
  --color-broad-daylight: #bee2ff;
  --color-broad-daylight-50: #f3faff;
  --color-broad-daylight-100: #e2f2ff;
  --color-broad-daylight-200: #bee2ff;
  --color-broad-daylight-300: #accae1;
  --color-broad-daylight-400: #89a9c4;
  --color-broad-daylight-500: #6c8da8;
  --color-broad-daylight-600: #51718b;
  --color-broad-daylight-700: #3c5a70;
  --color-broad-daylight-800: #2c4559;
  --color-broad-daylight-900: #203546;
  --color-broad-daylight-950: #11212d;
  --color-pastel-mint: #c7f0d4;
  --color-pastel-mint-50: #def6e6;
  --color-pastel-mint-100: #c7f0d4;
  --color-pastel-mint-200: #bcdbc5;
  --color-pastel-mint-300: #a4c6af;
  --color-pastel-mint-400: #83a990;
  --color-pastel-mint-500: #698f75;
  --color-pastel-mint-600: #50755d;
  --color-pastel-mint-700: #3d5e49;
  --color-pastel-mint-800: #2d4a37;
  --color-pastel-mint-900: #203929;
  --color-pastel-mint-950: #122418;
  --color-bunny-tail: #ffddf6;
  --color-bunny-tail-50: #ffedfa;
  --color-bunny-tail-100: #ffddf6;
  --color-bunny-tail-200: #e6cddf;
  --color-bunny-tail-300: #d2b6ca;
  --color-bunny-tail-400: #b496ac;
  --color-bunny-tail-500: #997b91;
  --color-bunny-tail-600: #7e6177;
  --color-bunny-tail-700: #664c5f;
  --color-bunny-tail-800: #513a4b;
  --color-bunny-tail-900: #3f2c3a;
  --color-bunny-tail-950: #281a25;
}

    Similar palettes